Question

我正在努力创建一个＆＃34;类＆＃34;在JS中，其简化结构如下：

http://codepen.io/Deka87/pen/WpqYRP?editors=0010

function Alert() {
  this.message = "Test alert";
  this.document = $(document);

  this.document.on('click', function() {
     this.show();
  }.bind(this));

};

Alert.prototype.show = function() {
  setTimeout(function() {
    console.log(this.message);
  }, 50);
};

var alert = new Alert();

当您点击document时，它应该在控制台中显示this.message内容。但是，它现在显示为undefined。我认为问题是this.messsage无法获得原始的this上下文，因为它是另一个函数的包装器（在我的情况下是setTimeout）。任何帮助将不胜感激！

Answer 1

以下是对我有用的内容，您可以通过引用this.message来获取self，这是您需要的正确背景。

function Alert() {  
  this.message = "Test alert";
  this.document = $(document);
  this.document.on('click', function() {
  this.show();
}.bind(this));
};
Alert.prototype.show = function() {
  var self = this;
  setTimeout(function() {
    console.log(self.message);
  }, 50);
};
var alert = new Alert();

Answer 2

您可以使用箭头功能来保留此上下文。

function Alert() {
  this.message = "Test alert";
  this.document = $(document);

  this.document.on('click', () => {
     this.show();
  });

};

Alert.prototype.show = function () {
  setTimeout(() => {
    console.log(this.message);
  }, 50);
};

var alert = new Alert();

了解详情：https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions。

得到＆＃34;这个＆＃34; JS＆＃34;类＆＃34;中的上下文方法功能

2 个答案: