如何在回调中访问正确的 "this"?

javascript callback this


我有一个构造函数,可以注册一个事件处理程序。

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

但是,我无法在回调内部访问已创建对象的 data 属性。 看起来 this 并不引用创建的对象,而是引用另一个对象。

我也尝试过用对象方法来代替匿名函数。

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

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

但它表现出同样的问题。

如何才能访问正确的对象?





Answer 1 Felix Kling


您应该知道些什么

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

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

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

由于 self 是一个普通变量,因此它遵循词汇范围规则,并且可以在回调内部进行访问。 这还有一个优点,就是您可以访问回调本身的 this 值。

明确设置 this 回调-第1部分

您似乎无法控制此值,因为它的值是自动设置的,但实际上并非如此。

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

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

在这种情况下,我们将回调的 this 绑定到 MyConstructor 的this的值。

注意:当为jQuery绑定上下文时,请改用 jQuery.proxy [docs] 。 这样做的原因是,使您在取消绑定事件回调时不需要存储对该函数的引用。 jQuery在内部进行处理。

ECMAScript 6:使用箭头功能

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

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

设置 this 回调-第2部分

某些接受回调的函数/方法也接受该回调应引用的值。 这基本上与您自己绑定它相同,但是函数/方法可以为您完成它。 Array#map [docs]是这种方法。 它的签名是:

array.map(callback[, thisArg])

第一个参数是回调,第二个参数是应引用的值。 这是一个人为的示例:

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

注意:通常可以在该函数/方法的文档中提及是否可以 this 传递值。 例如, jQuery的 $.ajax 方法[docs]描述了一个称为 context 的选项:

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


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

这个问题的另一种常见表现形式是当一个对象方法被用作回调事件处理程序时。函数是JavaScript中的第一等公民,"方法 "只是一个俗称,指的是一个函数是对象属性的值。但这个函数并没有具体的链接到它的 "包含 "对象。

请看下面的例子:

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

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

函数 this.method 被分配为click事件处理程序,但是如果单击 document.body ,则记录的值将是 undefined ,因为在事件处理程序内部, this 引用 document.body ,而不是 Foo 的实例。
如开始时已经提到的, this 指的是取决于函数的调用方式 ,而不是函数的定义方式
如果代码像下面这样,可能更明显的是函数没有隐含引用对象。

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


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

Foo.prototype.method = method;

解决方案与上述相同:如果可用,请使用 .bind 将其显式绑定到特定值

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

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

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

或使用箭头功能。

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



Answer 2 Mohan Dere


Here are several ways to access parent context inside child context -

  1. 您可以使用 bind() 函数。
  2. 将contextthis的引用存储在另一个变量中(见下面的例子)。
  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);

如果您使用的是 underscore.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);
  });
}



Answer 3 Guffa


这一切都在调用方法的 "神奇 "语法中。

object.property();

当你从对象中获取属性并一次性调用时,该对象将成为该方法的上下文。如果你调用同一个方法,但在不同的步骤中调用,那么上下文就是全局范围(窗口)。

var f = object.property;
f();

当你得到一个方法的引用时,它不再附着在对象上,它只是一个普通函数的引用。当你得到引用作为回调使用时也是一样的。

this.saveNextLevelData(this.setAll);

这就是你要把上下文与功能绑定的地方。

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

如果您使用的是jQuery,则应改用 $.proxy 方法,因为并非所有浏览器都支持 bind

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



Answer 4 RobG


"语境 "的问题

术语“上下文”有时用于表示this引用的对象。 它的使用是不合适的,因为它在语义上或技术上都不适合ECMAScript的this

“上下文”是指围绕某些事物增加含义的环境,或一些提供额外含义的前后信息。 ECMAScript中使用术语“上下文”来指代执行上下文 ,它是所有参数,范围以及某些执行代码范围内的内容。

这在ECMA-262第10.4.2节中显示

将 ThisBinding 设置为与调用执行上下文的 ThisBinding 相同的值

这清楚地表明是执行上下文的一部分。

执行上下文提供了周围的信息,这些信息为正在执行的代码增加了含义。 它不仅包含thisBinding ,还包含更多信息。

因此, 值不是“上下文”,它只是执行上下文的一部分。 从本质上讲,它是一个局部变量,可以通过调用任何对象并在严格模式下将其设置为任何值。




Answer 5 Ashish


您应该了解“ this”关键字。

根据我的观点,您可以通过三种方式 (自/箭头功能/绑定方法) 实现“ this”

一个函数的这个关键字在JavaScript中的表现与其他语言相比有一点不同。

它也有严格模式和非严格模式的一些区别。

在大多数情况下,这个值是由函数的调用方式决定的。

在执行过程中不能通过赋值来设置,每次调用函数的时候,它可能会有不同的变化。

ES5引入了bind()方法来设置一个函数的这个值,不管它是如何调用的。

和ES2015引入了不提供自己的这个绑定的箭头函数(它保留了这个值的包围词义上下文)。

方法1:自我-自我用于保持对原始内容的引用,即使上下文在变化。 这是事件处理程序中经常使用的一种技术(尤其是在闭包中)。

参考https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

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

方法2 :箭头函数-箭头函数表达式在语法上比常规函数表达式紧凑,

虽然没有自己绑定this、arguments、super或new.target关键字。

箭头函数表达式不适合作为方法,不能作为构造函数使用。

参考https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

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

方法3 :绑定-bind()方法创建一个新函数,

调用时,将其this关键字设置为所提供的值。

在新函数被调用时,在给定的参数序列之前的任何给定参数。

Reference:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

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