当前位置: 首页 > 面试题库 >

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

龚钧
2023-03-14
问题内容

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

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

但是也有同样的问题

如何访问正确的对象?


问题答案:

你应该知道什么 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`

要了解更多信息this,请查看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部分

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

每个函数都有方法.bind [docs]
,该方法返回一个this绑定到值的新函数。该函数的行为与您调用的行为完全相同.bind,只是this您设置的行为。无论如何或何时调用该函数,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,它的值MyConstructorthis

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

ECMAScript 6:使用[箭头功能](https://developer.mozilla.org/en-

US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

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

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

设置this回调-第2部分

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

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

注意:this该函数/方法的文档中通常会提到是否可以传递值。例如,jQuery的 [docs]$.ajax方法
__描述了一个名为的选项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显式绑定this到特定值

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

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

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

或使用箭头功能:

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


 类似资料:
  • 问题内容: 例如,我有一个带有两种绑定方法的react组件: 在上面的代码中,我有两种绑定方法:一种是和一种是。功能有效,但无效。运行时,它返回错误: TypeError:无法读取未定义的属性“ handleRemoveComment” 问题答案: 问题在于这条线: 因为您忘记了绑定,映射回调方法,所以inside 方法将不会引用类上下文。 使用这些解决方案中的 任何一种 ,它将起作用。 1- 在

  • 问题内容: 看来我无法访问jquery ajax成功函数内的$(this)。请参见下面的代码。 问题答案: 应该怎么办 如果在该函数之外有对它的引用,则可以将其存储到变量中。

  • 问题内容: 是否有人在React 16.8中为useState挂钩的更新部分创建了同步回调?我一直在寻找一种方法,这样我就可以使用第三方库来处理同步操作,而我似乎无法根据自己的需要来完成一项工作。 如果有人对成功完成此操作的人员有任何引用,请在此处添加。 干杯, 问题答案: 使用钩子,您不再需要该函数的回调。现在,您可以使用挂钩设置状态,并监听其值以使用挂钩更新。挂钩的可选第二个参数采用一组值来侦

  • thinkphp6设置微信支付回调URL,回调没有任何反应,各种方式都试过了,还是没有回调成功 网上查了很多,都没有解决问题 postman 都可以正常请求,外地的朋友访问也能访问的到

  • 问题内容: 我有以下课程片段: 我无法获得设置的超时值以从事件中打印值,我应该做些什么,但我不是吗? 问题答案: SyntheticEvent 。 根据 DOC : SyntheticEvent已合并。这意味着在调用事件回调之后,将重新使用SyntheticEvent对象,并且所有属性都将无效。这是出于性能原因。 例: 如何访问回调中的值? 将值存储在变量中: 如果要在超时回调函数中访问该值,则将

  • 我有一个返回[异常,字符串]的方法 } 现在我为类B和I存根方法验证编写测试 是否可以以这种方式存根以返回函数的右(......)?