Question

我在这里读到了关于定义Javascript类Advantages of using prototype, vs defining methods straight in the constructor?的方法，我选择了原型方法。但我遇到了一个问题，例如：

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（）没有帮助！
谢谢你的时间！

Answer 1

你使用了错误的this。您用来调用this的{{1}}实际上是Hide()元素。将#button对象this分配给局部变量，然后在单击委托中使用它：

MyClass

Answer 2

$("#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");
}

Answer 3

您没有在构造函数中调用Hide。您在click回调中调用它，该回调具有不同的上下文（this不同）。

使用temp变量存储对当前对象的引用：

var t;
t = this;

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

此外，JavaScript约定是PascalCase用于构造函数，camelCase用于函数/方法。

Answer 4

您可以从构造函数调用prototype方法。您的问题是您在匿名点击功能中丢失了上下文。所以你有两个选择：

// 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));

如何在类构造函数中使用原型方法

4 个答案: