Как использовать метод прототипа в конструкторе классов - PullRequest
Новая
       30

Как использовать метод прототипа в конструкторе классов

0 голосов
/ 16 декабря 2011

Я читал здесь об определении метода для класса Javascript Преимущества использования прототипа по сравнению с определением методов прямо в конструкторе? и я выбираю способ прототипа. Но я получаю проблему, например: 

function MyClass() {};
MyClass.prototype.Hide = function() {};

function MyClass() {
  this.layout = $("<div>", {id: "layout1"}).text("My content");
  this.button = $("<input />", {id: "button1"});
  this.layout.append(this.button);
  $("#button1").click(function() {
    //How can I call hide
    this.Hide()//Error
  });
}
MyClass.prototype.Hide = function() {
  this.layout.hide("slow");
}

Как я могу вызвать функцию-прототип в конструкторе? Я пробовал предварительное объявление для метода-прототипа, но я думаю, что проблема заключается в том, как я его называю, this.Hide () не поможет!
Спасибо за ваше время!

Ответы [ 4 ]

2 голосов
/ 16 декабря 2011 
$("#button1").click(function() {
  //How can I call hide
  this.Hide()//Error
});

В этой строке кода this относится к кнопке (она внутри функции).Перед этим связыванием вы можете определить var that = this; и использовать that в обратном вызове: 

function MyClass() {};
MyClass.prototype.Hide = function() {};

function MyClass() {
  var that = this;
  this.layout = $("<div>", {id: "layout1"}).text("My content");
  this.button = $("<input />", {id: "button1"});
  this.layout.append(this.button);
  $("#button1").click(function() {
    //How can I call hide
    that.Hide();
  });
}
MyClass.prototype.Hide = function() {
  this.layout.hide("slow");
}
2 голосов
/ 16 декабря 2011

Вы используете неправильный this.this, который вы используете для вызова Hide(), на самом деле является элементом #button.Присвойте this, который является MyClass объектом, локальной переменной, а затем используйте его в делегате щелчка: 

...
this.layout.append(this.button);
var $this = this;
$("#button1").click(function() {
    $this.Hide();
});
...
1 голос
/ 16 декабря 2011

Вы не вызываете Hide в конструкторе. Вы вызываете его в обратном вызове click, который имеет другой контекст (this отличается).

Используйте временную переменную для хранения ссылки на текущий объект: 

var t;
t = this;

...click(function () {
  t.hide();
});

Кроме того, соглашение JavaScript таково, что PascalCase используется для конструкторов, а camelCase используется для функций / методов.

0 голосов
/ 16 декабря 2011

Вы можете вызывать методы-прототипы из конструктора.Ваша проблема в том, что вы теряете контекст внутри функции анонимного щелчка.Таким образом, у вас есть два варианта: 

// 1. link to original object
var self = this;
$("#button1").click(function() {
    self.Hide();
});

// 2. use proxy (bind) to invoke method in correct context
// there is built in function available in jQuery
$("#button1").click($.proxy(function() {
    this.Hide();
}, this));
...