草庐IT

javascript - 如何在回调中访问正确的 `this`

coder 2023-04-23 原文

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

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);
};
但它表现出同样的问题。
如何访问正确的对象？

最佳答案

您应该知道的 thisthis (又名“上下文”)是每个函数中的一个特殊关键字，它的值仅取决于函数的调用方式，而不取决于函数的定义方式/时间/位置。它不像其他变量那样受词法作用域的影响(箭头函数除外，见下文)。这里有些例子:

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 documentation .

如何正确引用this使用 arrow functions
ECMAScript 6 引入了箭头函数，可以将其视为 lambda 函数。他们没有自己的this捆绑。相反，this就像普通变量一样在范围内查找。这意味着您不必拨打 .bind .这不是他们唯一的特殊行为，请参阅 MDN 文档以获取更多信息。
function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', () => alert(this.data));
}
不要使用 this您实际上不想访问 this特别是，但它所指的对象。这就是为什么一个简单的解决方案是简单地创建一个也引用该对象的新变量。变量可以有任何名称，但常见的是 self和 that .
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)到一个值。该函数与您调用的函数具有完全相同的行为 .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);
}
在这种情况下，我们绑定(bind)了回调的 this到 MyConstructor 的值的 this .
注:当 jQuery 的绑定(bind)上下文时，使用 jQuery.proxy [docs]反而。这样做的原因是，在取消绑定(bind)事件回调时，您不需要存储对函数的引用。 jQuery 在内部处理。
套装this回调 - 第 2 部分
一些接受回调的函数/方法也接受回调的 this 的值。应该引用。这与自己绑定(bind)基本相同，但是函数/方法会为您完成。 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's $.ajax method [docs]描述了一个名为 context 的选项:

This object will be made the context of all Ajax-related callbacks.



常见问题:使用对象方法作为回调/事件处理程序
此问题的另一个常见表现是将对象方法用作回调/事件处理程序。函数是 JavaScript 中的一等公民，术语“方法”只是作为对象属性值的函数的通俗术语。但是该函数没有指向其“包含”对象的特定链接。
考虑以下示例:
function Foo() {
    this.data = 42,
    document.body.onclick = this.method;
}

Foo.prototype.method = function() {
    console.log(this.data);
};
函数this.method被分配为点击事件处理程序，但如果 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明确绑定(bind) this到特定值
document.body.onclick = this.method.bind(this);
或者通过使用匿名函数作为回调/事件处理程序并将对象( this )分配给另一个变量，将函数作为对象的“方法”显式调用:
var self = this;
document.body.onclick = function() {
    self.method();
};
或使用箭头函数:
document.body.onclick = () => this.method();

关于javascript - 如何在回调中访问正确的 `this`，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20279484/

何在javascriptcodethisdatacallback

有关javascript - 如何在回调中访问正确的 `this`的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  3. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  4. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  5. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  6. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah

  7. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  8. ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2

    我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？ 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击

  9. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  10. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

随机推荐