Question

我正在学习javascript并尝试理解'this'。在下面的代码中，为什么我无法在render方法中访问this.ul？（它说未定义）。我被引导相信cacheDOM方法会将this.ul绑定到people对象，然后可以由Object的其余部分访问。

var ul = this.ul

固定。将{{1}}添加到我的渲染函数的顶部，然后允许地图函数正确访问！

Answer 1

此参数的值由调用模式确定。

JavaScript中有四种调用模式：方法调用模式，函数调用模式，构造函数调用模式和应用调用模式。检查this link以了解这些模式。

检查渲染功能的以下实现;

render: function() {
  var data = this.people;
  var that = this;
  data.map(function(person){
    var li = document.createElement('li');
    li.textContent = person;
    that.ul.appendChild(li);
  });
}

或者您可以将此的值作为参数传递给 map（）函数：

  render: function() {
  var data = this.people;
  data.map(function(person){
    var li = document.createElement('li');
    li.textContent = person;
    this.ul.appendChild(li);
  },this);
}

Answer 2

Array.prototype.map方法创建自己的闭包，这样就不会在这里引用people对象了。你需要将“this”绑定为：

render: function() {
  var data = this.people;

  data.map(function(person){
    var li = document.createElement('li');
    li.textContent = person;
    this.ul.appendChild(li);
  }.bind(this));
}

Answer 3

您可以将传递给map的函数绑定到对象文字的上下文中：

data.map(function(person){
  var li = document.createElement('li');
  li.textContent = person;
  this.ul.appendChild(li);
}.bind(this));

或更透明：

var iteratee = function(person){
  var li = document.createElement('li');
  li.textContent = person;
  this.ul.appendChild(li);
}
data.map(iteratee.bind(this));

Answer 4

在匿名函数中，此不引用对象文字。此是对引用它的作用域所有者的引用。在一个匿名函数中，我非常确定这个是对全局/窗口对象的引用。

要访问对象的 ul 成员，您可以使用JavaScript的闭包功能。

render: function() {
  var self = this; // here this points to the object literal
  var data = this.people;

  data.map(function(person){
    var li = document.createElement('li');
    li.textContent = person;
    self.ul.appendChild(li);
  });
}

对象文字方法的范围

4 个答案: