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

Question

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

函数MyConstructor（数据、传输）{this.data=数据；transport.on（'数据'，函数（）{警报（this.data）；});}//模拟运输对象var传输={on：函数（事件，回调）{setTimeout（回调，1000）；}};//称为var obj=新MyConstructor（'foo'，transport）；

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

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

函数MyConstructor（数据、传输）{this.data=数据；transport.on（“数据”，this.alert）；}MyConstructor.prototype.alert=函数（）{警报（this.name）；};

但它也存在同样的问题。

如何访问正确的对象？

Answer 1

你应该知道什么这

这（也称为“上下文”）是每个函数中的一个特殊关键字，其值仅取决于怎样函数是被调用的，而不是如何/何时/在何处定义的。与其他变量一样，它不受词法作用域的影响（箭头函数除外，请参见下文）。以下是一些示例：

函数foo（）{console.log（this）；}//正常函数调用foo（）；//`这个“将指”窗口`//作为对象方法var对象={bar:foo}；对象栏（）；//`这“将指”obj“`//作为构造函数new foo（）；//`this将引用从foo.prototype继承的对象`

了解更多这，看看MDN文档.

---

如何引用正确的这

使用箭头功能

引入ECMAScript 6箭头功能，可以认为是lambda函数。他们没有自己的这结合。相反，这就像普通变量一样在范围中查找。这意味着你不必打电话.绑定。这并不是他们唯一的特殊行为，有关更多信息，请参阅MDN文档。

函数MyConstructor（数据、传输）{this.data=数据；transport.on（'data'，（）=>警报（this.data））；}

不要使用这

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

函数MyConstructor（数据、传输）{this.data=数据；var self=此；transport.on（'data'，function（）{警报（自我数据）；});}

自自己是一个普通变量，它遵守词法范围规则，可以在回调中访问。这还有一个优点，即您可以访问这回调本身的值。

显式设置这回调的第1部分

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

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

函数MyConstructor（数据、传输）{this.data=数据；var boundFunction=（function（）{//括号不是必需的警报（this.data）；//但可能会提高可读性}).绑定（this）；//<-这里我们调用`.bind（）`transport.on（'data'，boundFunction）；}

在这种情况下，我们将绑定回调这价值我的构造函数的这.

注：当jQuery的绑定上下文时，使用jQuery.代理 ^[文档]而不是。这样做的原因是为了在解除绑定事件回调时不需要存储对函数的引用。jQuery在内部处理这一点。

设置这回调的第2部分

一些接受回调的函数/方法也接受回调这这与自己绑定它基本相同，但函数/方法可以为您完成。阵列#映射 ^[文档]就是这样一种方法。其签名为：

array.map（回调[，thisArg]）

第一个参数是回调，第二个参数是值这应参考。以下是一个虚构的示例：

var arr=[1,2,3]；varobj={乘数：42}；var new_arr=arr.map（函数（v）{返回v*this.multiplier；}，对象）；//<-这里我们将“obj”作为第二个参数传递

注：是否可以为传递值这通常在该函数/方法的文档中提到。例如，jQuery的$.ajax（美元）方法^[文档]描述了一个名为上下文:

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

---

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

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

考虑以下示例：

函数Foo（）{this.data=42，document.body.onclick=本方法；}Foo.prototype.method=函数（）{console.log（this.data）；};

功能这个方法被指定为单击事件处理程序，但如果文档.正文单击，记录的值将为未定义，因为在事件处理程序内部，这指的是文档.正文，而不是的实例富.
正如前面提到的，什么这引用取决于函数的方式打电话，不是现在的样子定义.
如果代码如下所示，则更明显的是函数没有对对象的隐式引用：

函数方法（）{console.log（this.data）；}函数Foo（）{this.data=42，document.body.onclick=本方法；}Foo.prototype.method=方法；

解决方案与上述相同：如果可用，请使用.绑定显式绑定这设置为特定值

document.body.onclick=this.method.bind（this）；

或者通过使用匿名函数作为回调/事件处理程序并指定对象，将该函数作为对象的“方法”显式调用(这)到另一个变量：

var self=此；document.body.onclick=函数（）{self.method（）；};

或使用箭头功能：

document.body.onclick=（）=>this.method（）；

Answer 2

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

1. 您可以使用绑定()功能。
2. 将对context/this的引用存储在另一个变量中（参见下面的示例）。
3. 使用ES6箭头功能。
4. 更改代码、功能设计和体系结构-为此，您应该拥有命令设计模式在JavaScript中。

1.使用绑定（）功能

函数MyConstructor（数据、传输）{this.data=数据；transport.on（'数据'，（函数（）{警报（this.data）；})绑定（this））；}//模拟运输对象var传输={on：函数（事件、回调）{setTimeout（回调，1000）；}};//称为var obj=新的MyConstructor（'fo'，传输）；

如果您使用Underscore.js-http://underscorejs.org/#bind

transport.on（'data'，_.bind（function（））{警报（this.data）；}）；

2.将对context/this的引用存储在另一个变量中

函数MyConstructor（数据、传输）{var self=此；this.data=数据；transport.on（'data'，function（）{警报（自我数据）；});}

3.箭头功能

函数MyConstructor（数据、传输）{this.data=数据；transport.on（'数据'，（）=>{警报（this.data）；});}

Answer 3

这都是调用方法的“神奇”语法：

object.property（）；

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

var f=对象属性；f（）；

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

this.saveNextLevelData（this.setAll）；

这就是将上下文绑定到函数的地方：

this.saveNextLevelData（this.setAll.bind（this））；

如果使用jQuery，则应使用$.代理方法，作为绑定并非所有浏览器都支持：

this.saveNextLevelData（$.proxy（this.setAll，this））；

Answer 4

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

根据我的观点，你可以通过三种方式实现“这一点” （自|箭头函数|绑定方法）

A函数的这关键字在JavaScript中的行为与其他语言略有不同。

它在严格模式和非严格模式之间也有一些区别。

在大多数情况下，其值取决于函数的调用方式。

它不能在执行期间通过赋值进行设置，并且每次调用函数时可能会有所不同。

ES5引入了bind（）方法来设置函数的这不管它叫什么，

ES2015引入了箭头功能，但不提供自己的功能这绑定（它保留封闭词汇上下文的这个值）。

方法1：Self-Self被用来维护对原始文本的引用，即使上下文正在改变。这是事件处理程序中经常使用的一种技术（尤其是在闭包中）。

参考:这

函数MyConstructor（数据、传输）{this.data=数据；var self=此；transport.on（'数据'，函数（）{警报（自我数据）；});}

方法2用法：Arrow function-Arrow函数表达式是正则函数表达式的一种语法紧凑的替代形式，尽管它没有自己的this、arguments、super或new.target关键字绑定。

箭头函数表达式不适合用作方法，并且不能用作构造函数。

参考:箭头函数表达式

函数MyConstructor（数据、传输）{this.data=数据；transport.on（'数据'，（）=>{警报（this.data）；});}

方法3：Bind-Bind（）方法创建一个新函数，在调用时，该函数具有这关键字设置为提供的值，在调用新函数时，给定的参数序列位于任何提供的参数之前。

参考： 函数.prototype.bind（）

函数MyConstructor（数据、传输）{this.data=数据；transport.on（'data'，（function（）{警报（this.data）；})绑定（this）；

Answer 5

“上下文”的问题

术语“上下文”有时用于指这。它的使用是不合适的，因为它在语义上或技术上都不适合ECMAScript的这.

“上下文”意思是指围绕着一些增加意义的东西的环境，或者一些赋予额外意义的前后信息。ECMAScript中使用术语“上下文”来表示执行上下文，它是所有参数、范围和这在某些执行代码的范围内。

如所示ECMA-262第10.4.2节:

将ThisBinding设置为与调用执行上下文

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

执行上下文提供了为正在执行的代码添加含义的周围信息。它包含的信息远不止this绑定.

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

Answer 6

首先，你需要清楚地了解范围和行为这上下文中的关键字范围.

这&范围:

---

JavaScript中有两种类型的作用域。他们是：

1. 全球范围

2. 功能范围

简而言之，全局范围是指窗口对象。可以从任何地方访问全局范围中声明的变量。

另一方面，函数范围位于函数内部。在函数内部声明的变量通常无法从外部访问。

这个这全局范围中的关键字是指窗口对象。这函数内部还引用窗口对象。所以这将始终引用窗口，直到找到操作方法这以表明我们自己选择的背景。

---------------------------------------------------------------------------------                                                                              --全球范围--（全局“this”指窗口对象）--                                                                              --函数outer_function（回调）{--                                                                              --//外部功能范围--//在外部函数中，“this”关键字--//表示窗口对象--callback（）//回调中的“this”也指窗口对象--   }                                                                          --                                                                              --函数callback_function（）{--                                                                              --//作为回调传递的函数--                                                                              --//此处“THIS”也指窗口对象--   }                                                                          ----外部函数（回调函数）--//使用回调调用--                                                                              ---------------------------------------------------------------------------------

---

不同的操作方式这内部回调函数：

这里有一个名为Person的构造函数。它有一个名为名称四种方法被称为sayName版本1，语言名称版本2，sayName版本3、和sayName版本4他们四个人都有一个特定的任务。接受回调并调用它。回调有一个特定的任务，即记录Person构造函数实例的name属性。

职能人员（姓名）{this.name=名称this.sayNameVersion1=函数（回调）{回调绑定（this）（）}this.sayNameVersion2=函数（回调）{回调（）}this.sayNameVersion3=函数（回调）{callback.call（this）}this.sayNameVersion4=函数（回调）{回调.apply（this）}}函数niceCallback（）{//用作回调的函数var parentObject=此console.log（parentObject）}

现在，让我们从person构造函数创建一个实例并调用不同版本的sayName版本X（X指1,2,3,4）方法nice回拨看看我们可以用多少方法来操纵这内部回调以引用人实例。

var p1=new Person（'zami'）//创建Person构造函数的实例

绑定：

bind所做的是使用这关键字设置为提供的值。

sayName版本1和语言名称版本2使用bind进行操作这回调函数的。

this.sayNameVersion1=函数（回调）{callback.bind（this）（）}this.sayNameVersion2=函数（回调）{回调（）}

第一个绑定这方法本身内部有一个回调。对于第二个回调函数，回调函数是通过绑定到它的对象传递的。

p1.sayNameVersion1（niceCallback）//简单地传递回调，绑定发生在sayNameVersion1方法中p1.sayNameVersion2（niceCallback.bind（p1））//在传递回调之前使用bind

---

呼叫：

这个第一个参数的呼叫方法用作这在用调用的函数内部呼叫与之相连。

sayName版本3使用呼叫操作这引用我们创建的person对象，而不是window对象。

this.sayNameVersion3=函数（回调）{callback.call（this）}

它的名称如下：

p1.sayName版本3（niceCallback）

---

应用：

类似于呼叫，的第一个参数应用指将由这关键字。

sayName版本4使用应用操纵这指person对象

this.sayNameVersion4=函数（回调）{回调.apply（this）}

它的名称如下。只需传递回调，

p1.sayName版本4（niceCallback）

Answer 7

我们无法将此绑定到设置超时（），因为它总是与一起执行全局对象（窗口）。如果要访问这然后使用绑定（）对于回调函数，我们可以实现如下：

setTimeout（函数（）{this.methodName（）；}bind（this），2000年）；

Answer 8

问题围绕着如何这关键字在JavaScript中的行为。这表现不同如下，

1. 的价值这通常由函数执行上下文决定。
2. 在全球范围内，这指全局对象（窗口对象）。
3. 如果为任何函数启用了严格模式，则这将未定义与strict模式一样，全局对象引用未定义代替窗口对象。
4. 站在圆点前的物体是这关键字将绑定到。
5. 我们可以使用显式设置此值调用（），绑定（）、和应用（）
6. 当新的关键字被使用（构造函数），它被绑定到正在创建的新对象。
7. 箭头函数不绑定这——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————相反，这按词汇绑定（即基于原始上下文）

正如大多数答案所示，我们可以使用箭头功能或绑定（）方法或自身var.我会引用lambdas（箭头函数）的一点谷歌JavaScript风格指南

首选使用箭头函数而不是f.bind（this），尤其是在goog.bind（f，this）。避免写const self=this。箭头函数对于回调特别有用，回调有时会意外传递其他参数。

谷歌明确建议使用lambdas，而不是bind或const self=这个

所以最好的解决方案是如下所示使用lambdas，

函数MyConstructor（数据、传输）{this.data=数据；transport.on（'数据'，（）=>{警报（this.data）；});}

参考文献：

1. https://medium.com/tech-tajawal/javascript-this-4-rules-7354abdb274c
2. 箭头功能-vs-bind

Answer 9

目前，如果在代码中使用类，还有另一种可能的方法。

在的支持下类字段，可以按以下方式进行：

类someView{onSomeInputKeyUp=（事件）=>{console.log（this）；//这是指正确的值// ....someInit方法（）{//...someInput.addEventListener（“输入”，this.onSomeInputKeyUp）

当然，在幕后，绑定上下文的是所有旧的好箭头函数，但在这种形式下，显式绑定看起来更加清晰。

由于这是第三阶段提案，您需要巴别塔和适当的巴别塔插件目前处理（2018年8月）。

Answer 10

另一种方法是自DOM2以来的标准方式绑定这在事件侦听器中让您始终删除侦听器（除其他好处外）处理事件（evt）方法事件侦听器接口：

var对象={处理事件（e）{//总是正确的console.log（this===obj）；}};document.body.addEventListener（'click'，obj）；

有关使用的详细信息处理事件可在此处找到：DOM handleEvent：自2000年以来的跨平台标准

Answer 11

我遇到了一个问题Ngx公司折线图xAxisTick格式化从HTML调用的函数如下：[xAxisTickFormatting]=“xFormat”.

我无法从声明的函数中访问组件的变量。这个解决方案帮助我解决了这个问题，找到了正确的答案。

而不是像这样使用函数：

xFormat（value）：字符串{return value.toString（）+this.oneComponentVariable//给出错误的结果}

使用此选项：

xFormat=（值）=>{//console.log（this）；//现在您可以访问组件变量了返回值+this.oneComponentVariable}

Answer 12

这在JavaScript中：

的价值这在JavaScript中，函数是如何调用的，而不是如何定义的。我们可以相对容易地找到这由'点规则左侧':

1. 使用function关键字创建函数时这是被调用函数的点左边的对象
2. 如果点的左边没有物体，那么这函数内部通常是全局对象(全球的在Node.js和窗口在浏览器中）。我不建议使用这关键字，因为它不如使用类似这样的东西显式窗口！
3. 存在某些构造，如箭头函数和使用函数.prototype.bind（）一个可以固定这。这些是规则的例外，但它们确实有助于确定这.

Node.js中的示例

module.exports.data='模块数据'；//此节点中函数外部引用了module.exports对象console.log（this）；常量obj1={data:“obj1数据”，met1：函数（）{console.log（this.data）；},met2:（）=>{console.log（this.data）；},};常量对象2={data:“obj2数据”，测试1：函数（）{console.log（this.data）；},测试2：函数（）{console.log（this.data）；}绑定（obj1），测试3:obj1.met1，测试4:obj1.met2，};对象2.test1（）；obj2.test2（）；对象2.test3（）；obj2.test4（）；obj1.met1.call（obj2）；

输出：

让我逐一向您介绍输出（忽略从第二个日志开始的第一个日志）：

1. 这是对象2由于点规则的左侧，我们可以看到测试1被称为对象2.test1（）；.对象2位于点的左侧，因此这值。
2. 尽管目标2在点的左边，测试2已绑定到对象1通过绑定（）方法。这个这值为对象1.
3. 对象2位于函数点的左侧，该函数称为：对象2.test3（）.因此对象2将是的值这.
4. 在这种情况下：对象2.test4（） 对象2在点的左边。然而，箭头函数没有自己的这结合。因此，它将绑定到这外部范围的值，即模块.导出开始时记录的对象。
5. 我们还可以指定这通过使用呼叫功能。在这里，我们可以传递所需的这值作为参数，这是对象2在这种情况下。

Answer 13

其他一些人已经谈到了如何使用.bind（）方法，但具体来说，如果有人在让他们一起工作时遇到困难，可以将其与.then（）一起使用：

某些函数（）.then（函数（响应）{//“this”以前在这里无法访问，但现在可以访问了}.bind（this））

如注释中所述，另一种方法是使用没有自己的“this”值的箭头函数

某些函数（）.然后（（响应）=>{//这里总是可以访问“this”})

Answer 14

你可以使用箭头函数来避免此问题。

const functionToTest=（dataToSet，transport）=>{this.dataToSet=数据ToSet；transport.on（'dataToSet'，（）=>{console.log（this.dataToSet）；});}

Answer 15

2024年答案

这里的很多信息都已经过时了。这个答案的重点是如何在2024年解决+

1. 调用函数时使用实例

• 永远不要将函数“从其实例中”取出。如果以后需要调用该函数，只需保留整个实例，例如：

A级{构造函数（id）{this.id=id；}某些函数（）{console.log（this）；}}const a1=新A（5）；常数a2=新A（20）；常数arr=[a1，a2]；//一些业务逻辑arr.forEach（a=>a.someFunction（））；

2. 不要过度使用 这

不要使用这以及类（如果不需要的话）。当您需要存储库、控制器、服务等文件时，它默认会创建单例，这是您想要的（它基本上类似于Java中的@Autowired，但却是本机的）。单例不需要类和“this”，无论您需要定义什么，都可以在文件的根上定义。然后只导出所需的函数/变量。如果你不使用这，您不会有问题这.

例如somethingService.js可以与下面的代码类似：

const someDefaultValue=10；导出函数doSomething（）{console.log（someDefaultValue）；}

那么你就不必考虑使用做某事（）作为somethingService.doSomething（）或做某事（）直接。（它也会起作用）

3. 使用apply/call/bind

我个人不喜欢使用应用（或呼叫或绑定这基本上是一样的，只是有点不同），根据我的经验，它可能会给代码带来更多的混乱。但在某些情况下，您可能需要它，所以我将在这里列出它。你基本上可以“注射”这在函数中使用任何你喜欢的对象。

类简单{构造函数（id）{this.id=id；}showThis（文本）{console.log（this，`**${text}**`）}}const简单=新简单（25）；const showThisFn=simple.showThis；showThisFn（“使用它而不应用”）；showThisFn.apply（简单，[“using it with apply”]）showThisFn.call（简单地说，“将其与call一起使用-基本上与apply相同，只是今天的语法差异”）boundShowThisFn=显示ThisFn.bind（简单）；boundShowThisFn（“现在它与函数绑定，所以在调用它时不必指定它”）；

4. 正确使用箭头函数=>

如果在函数中有函数，则使用这，箭头函数将传递这以您期望的方式显示上下文。使用功能关键字将更改的上下文这.

（基本上只要有可能并且你是安全的，就使用箭头功能）

A级{构造函数（baseValue）{this.baseValue=基本值；}doMathArrowFunction（arr）{arr.forEach（项目=>{console.log（`箭头函数：item是${item}，this？.baseValue是${this？.laseValue}`）；console.log（item+this？.baseValue）；});}doMathOldWay（arr）{arr.forEach（功能（项）{console.log（`Old fashion function:item是${item}，this？.baseValue是${this？.laseValue}`）；console.log（项+this？.baseValue）；});}}常数x=[1,2]；常数a=新a（10）；a.doMathArrowFunction（x）；a.doMathOldWay（x）；

在过去（在Arrow函数存在之前），通常使用自我/那个关键字。如果您遇到它并想了解更多信息，请在此线程中检查已接受的答案。

Answer 16

这就是我解决问题的方法

类myClass{构造函数（父级）{this.callback=（函数（）{this.callbackFunctionOfParent（）；}).bind（父级）；}调用回调（）{this.callback（）；}}等级Class2{构造函数（）{这个。名称=“CLASS 2”；this.test=新myClass（this）；this.test.callCallback（）；} callbackFunctionOfParent（）{console.log（“父对象是：”+this.Name）；}}var c2=新类别2；