我有一个注册事件处理程序的构造函数：

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', function () {
        alert(this.data);
    });
}

// Mock transport object
var transport = {
    on: function(event, callback) {
        setTimeout(callback, 1000);
    }
};

// called as
var obj = new MyConstructor('foo', transport);

但是，我无法访问回调中创建对象的属性。看起来不是指创建的对象，而是另一个对象。datathis

我还尝试使用对象方法而不是匿名函数：

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', this.alert);
}

MyConstructor.prototype.alert = function() {
    alert(this.name);
};

但它表现出同样的问题。

如何访问正确的对象？

网友回答：

你应该知道什么this

this（又名“上下文”）是每个函数中的一个特殊关键字，其值仅取决于函数的调用方式，而不是定义函数的方式/时间/位置。它不像其他变量那样受到词法作用域的影响（箭头函数除外，见下文）。以下是一些示例：

function foo() {
    console.log(this);
}

// normal function call
foo(); // `this` will refer to `window`

// as object method
var obj = {bar: foo};
obj.bar(); // `this` will refer to `obj`

// as constructor function
new foo(); // `this` will refer to an object that inherits from `foo.prototype`

要了解有关 的更多信息，请查看 MDN 文档。this

如何引用正确的this

使用箭头函数

ECMAScript 6 引入了箭头函数，可以将其视为 lambda 函数。他们没有自己的绑定。相反，就像普通变量一样在范围内查找。这意味着您不必致电.这不是他们唯一的特殊行为，请参阅 MDN 文档以获取更多信息。thisthis.bind

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', () => alert(this.data));
}

不要使用this

您实际上不想特别访问，而是它所引用的对象。这就是为什么一个简单的解决方案是简单地创建一个也引用该对象的新变量。变量可以具有任何名称，但常见的名称是 和 。thisselfthat

function MyConstructor(data, transport) {
    this.data = data;
    var self = this;
    transport.on('data', function() {
        alert(self.data);
    });
}

由于是一个普通变量，因此它遵守词法范围规则，并且可以在回调中访问。这也有一个优点，即您可以访问回调本身的值。selfthis

显式设置回调 – 第 1 部分this

看起来您无法控制 的值，因为它的值是自动设置的，但实际上并非如此。this

每个函数都有方法 ^[docs]，该方法返回一个绑定到值的新函数。该函数的行为与您调用的函数完全相同，只是由您设置。无论如何或何时调用该函数，都将始终引用传递的值。.bindthis.bindthisthis

function MyConstructor(data, transport) {
    this.data = data;
    var boundFunction = (function() { // parenthesis are not necessary
        alert(this.data);             // but might improve readability
    }).bind(this); // <- here we are calling `.bind()` 
    transport.on('data', boundFunction);
}

在本例中，我们将回调绑定到 ‘s 的值。thisMyConstructorthis

注意：当 jQuery 的绑定上下文时，请改用 ^[docs]。这样做的原因是，在取消绑定事件回调时，无需存储对函数的引用。jQuery在内部处理这个问题。jQuery.proxy

回调集 – 第 2 部分this

一些接受回调的函数/方法也接受回调应该引用的值。这基本上与自己绑定相同，但函数/方法会为您执行此操作。 ^[文档] 就是这样一种方法。它的签名是：thisArray#map

array.map(callback[, thisArg])

第一个参数是回调，第二个参数是应该引用的值。这是一个人为的例子：this

var arr = [1, 2, 3];
var obj = {multiplier: 42};

var new_arr = arr.map(function(v) {
    return v * this.multiplier;
}, obj); // <- here we are passing `obj` as second argument

注意：是否可以传递值通常在该函数/方法的文档中提及。例如，jQuery的方法^[docs]描述了一个名为：this$.ajaxcontext

此对象将成为所有与 Ajax 相关的回调的上下文。

常见问题：使用对象方法作为回调/事件处理程序

此问题的另一个常见表现是将对象方法用作回调/事件处理程序时。函数在 JavaScript 中是一等公民，术语“方法”只是函数的口语术语，它是对象属性的值。但是该函数没有指向其“包含”对象的特定链接。

请考虑以下示例：

function Foo() {
    this.data = 42,
    document.body.onclick = this.method;
}

Foo.prototype.method = function() {
    console.log(this.data);
};

该函数被指定为 click 事件处理程序，但如果单击 ，则记录的值将为 ，因为在事件处理程序内部，引用 ，而不是 的实例。
正如开头已经提到的，指的是什么取决于函数的调用方式，而不是如何定义函数。
如果代码如下所示，则函数没有对对象的隐式引用可能更明显：this.methoddocument.bodyundefinedthisdocument.bodyFoothis

function method() {
    console.log(this.data);
}


function Foo() {
    this.data = 42,
    document.body.onclick = this.method;
}

Foo.prototype.method = method;

解决方案与上面提到的相同：如果可用，请使用 显式绑定到特定值.bindthis

document.body.onclick = this.method.bind(this);

或者通过使用匿名函数作为回调/事件处理程序并将对象 （） 分配给另一个变量来显式调用函数作为对象的“方法”：this

var self = this;
document.body.onclick = function() {
    self.method();
};

或使用箭头功能：

document.body.onclick = () => this.method();

网友回答：

以下是访问子上下文中的父上下文的几种方法–

1. 您可以使用该功能。bind()
2. 将对上下文/this的引用存储在另一个变量中（请参阅下面的示例）。
3. 使用 ES6 箭头函数。
4. 更改代码、函数设计和架构 – 为此，您应该掌握JavaScript中的设计模式。

1. 使用功能bind()

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', ( function () {
        alert(this.data);
    }).bind(this) );
}
// Mock transport object
var transport = {
    on: function(event, callback) {
        setTimeout(callback, 1000);
    }
};
// called as
var obj = new MyConstructor('foo', transport);

如果您使用的是下划线.js – http://underscorejs.org/#bind

transport.on('data', _.bind(function () {
    alert(this.data);
}, this));

2. 在另一个变量中存储对上下文/this 的引用

function MyConstructor(data, transport) {
  var self = this;
  this.data = data;
  transport.on('data', function() {
    alert(self.data);
  });
}

3.箭头功能

function MyConstructor(data, transport) {
  this.data = data;
  transport.on('data', () => {
    alert(this.data);
  });
}

网友回答：

这一切都在调用方法的“神奇”语法中：

object.property();

当您从对象获取属性并一次性调用它时，该对象将成为该方法的上下文。如果调用相同的方法，但在不同的步骤中，上下文是全局范围（窗口）：

var f = object.property;
f();

获取方法的引用时，它不再附加到对象。它只是对普通函数的引用。当您获取要用作回调的引用时，也会发生同样的情况：

this.saveNextLevelData(this.setAll);

这是将上下文绑定到函数的位置：

this.saveNextLevelData(this.setAll.bind(this));

如果你使用的是jQuery，你应该改用该方法，因为并非所有浏览器都支持这种方法：$.proxybind

this.saveNextLevelData($.proxy(this.setAll, this));