我有一个注册事件处理程序的构造函数：
函数MyConstructor（数据，传输）{this.data=数据；transport.on（'数据'，函数（）{警报（this.data）；});}//模拟传输对象var传输={on：函数（事件，回调）{setTimeout（回调，1000）；}};//称为var obj=新MyConstructor（'o'，传输）；
但是，我无法访问回调中创建的对象的数据属性。看起来这不是指创建的对象，而是指另一个对象。
我还尝试使用对象方法而不是匿名函数：
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', this.alert);
}
MyConstructor.prototype.alert = function() {
alert(this.name);
};
但它表现出相同的问题。
如何访问正确的对象？
当前回答
你应该知道什么
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文档。
如何参考正确的
使用箭头功能
ECMAScript 6引入了箭头函数，可以认为是lambda函数。他们没有自己的绑定。相反，这是在范围内查找的，就像普通变量一样。这意味着你不必调用.bind。这不是他们唯一的特殊行为，请参阅MDN文档了解更多信息。
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', () => alert(this.data));
}
不要使用此
实际上，您不想特别访问它，而是访问它所引用的对象。这就是为什么一个简单的解决方案是简单地创建一个新的变量，该变量也引用该对象。变量可以有任何名称，但常见的是self和that。
function MyConstructor(data, transport) {
this.data = data;
var self = this;
transport.on('data', function() {
alert(self.data);
});
}
由于self是一个普通变量，因此它遵守词法范围规则，可以在回调中访问。这还有一个优点，即您可以访问回调本身的This值。
显式设置回调的这一部分-第1部分
可能看起来您无法控制此值，因为其值是自动设置的，但事实并非如此。
每个函数都有.bind[docs]方法，该方法返回一个新函数，并将其绑定到一个值。该函数的行为与您调用的.bind函数完全相同，只是这是由您设置的。无论如何或何时调用该函数，它都将始终引用传递的值。
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在内部处理这个问题。
设置回调-第2部分
一些接受回调的函数/方法也接受回调的this应该引用的值。这与自己绑定它基本相同，但函数/方法是为您执行的。数组#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
注意：该函数/方法的文档中通常会提到是否可以为此传递值。例如，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被指定为单击事件处理程序，但如果单击document.body，则记录的值将未定义，因为在事件处理程序中，它引用的是document.body，而不是Foo的实例。正如开头已经提到的，这所指的内容取决于函数的调用方式，而不是函数的定义方式。如果代码如下所示，则可能更明显的是函数没有对对象的隐式引用：
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();
其他回答
你应该知道什么
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文档。
如何参考正确的
使用箭头功能
ECMAScript 6引入了箭头函数，可以认为是lambda函数。他们没有自己的绑定。相反，这是在范围内查找的，就像普通变量一样。这意味着你不必调用.bind。这不是他们唯一的特殊行为，请参阅MDN文档了解更多信息。
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', () => alert(this.data));
}
不要使用此
实际上，您不想特别访问它，而是访问它所引用的对象。这就是为什么一个简单的解决方案是简单地创建一个新的变量，该变量也引用该对象。变量可以有任何名称，但常见的是self和that。
function MyConstructor(data, transport) {
this.data = data;
var self = this;
transport.on('data', function() {
alert(self.data);
});
}
由于self是一个普通变量，因此它遵守词法范围规则，可以在回调中访问。这还有一个优点，即您可以访问回调本身的This值。
显式设置回调的这一部分-第1部分
可能看起来您无法控制此值，因为其值是自动设置的，但事实并非如此。
每个函数都有.bind[docs]方法，该方法返回一个新函数，并将其绑定到一个值。该函数的行为与您调用的.bind函数完全相同，只是这是由您设置的。无论如何或何时调用该函数，它都将始终引用传递的值。
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在内部处理这个问题。
设置回调-第2部分
一些接受回调的函数/方法也接受回调的this应该引用的值。这与自己绑定它基本相同，但函数/方法是为您执行的。数组#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
注意：该函数/方法的文档中通常会提到是否可以为此传递值。例如，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被指定为单击事件处理程序，但如果单击document.body，则记录的值将未定义，因为在事件处理程序中，它引用的是document.body，而不是Foo的实例。正如开头已经提到的，这所指的内容取决于函数的调用方式，而不是函数的定义方式。如果代码如下所示，则可能更明显的是函数没有对对象的隐式引用：
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();
这一切都在调用方法的“神奇”语法中：
object.property();
当您从对象中获取属性并一次性调用它时，该对象将成为该方法的上下文。如果调用相同的方法，但在不同的步骤中，则上下文是全局范围（窗口）：
var f = object.property;
f();
当您获得方法的引用时，它将不再附加到对象。它只是对普通函数的引用。当您获取要用作回调的引用时，也会发生同样的情况：
this.saveNextLevelData(this.setAll);
这就是将上下文绑定到函数的地方：
this.saveNextLevelData(this.setAll.bind(this));
如果使用jQuery，则应改用$.proxy方法，因为并非所有浏览器都支持绑定：
this.saveNextLevelData($.proxy(this.setAll, this));
“上下文”的问题
术语“上下文”有时用于指代此引用的对象。它的使用是不合适的，因为它在语义上或技术上都不符合ECMAScript的this。
“上下文”是指围绕着某事物的环境，它增加了意义，或是一些前后信息赋予了额外的意义。ECMAScript中使用术语“上下文”来指代执行上下文，它是一些执行代码范围内的所有参数、范围和内容。
如ECMA-262第10.4.2节所示：
将ThisBinding设置为与调用执行上下文
这清楚地表明这是执行上下文的一部分。
执行上下文提供为正在执行的代码添加意义的周围信息。它包含了比thisBinding更多的信息。
它的价值不是“上下文”。它只是执行上下文的一部分。它本质上是一个局部变量，可以通过对任何对象的调用，在严格模式下，设置为任何值。
以下是访问子上下文中的父上下文的几种方法-
您可以使用bind（）函数。在另一个变量中存储对context/this的引用（参见下面的示例）。使用ES6箭头功能。改变代码、功能设计和架构——为此，您应该能够控制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);
如果您正在使用Undercore.js-http://underscorejs.org/#bind
transport.on('data', _.bind(function () {
alert(this.data);
}, this));
2.在另一个变量中存储对context/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);
});
}
你应该知道“this”关键字。
根据我的观点，你可以通过三种方式实现“这一点”（自身|箭头函数|绑定方法）
与其他语言相比，函数的this关键字在JavaScript中的表现稍有不同。
严格模式和非严格模式之间也有一些区别。
在大多数情况下，其值取决于函数的调用方式。
它不能在执行过程中通过赋值来设置，每次调用函数时可能会有所不同。
ES5引入了bind（）方法来设置函数的值，
ES2015引入了箭头函数，这些函数不提供自己的绑定（它保留了封闭词汇上下文的值）。
方法1：Self-Self被用于维护对原始this的引用，即使上下文在变化。这是一种常用于事件处理程序（尤其是闭包）的技术。
参考：此
function MyConstructor(data, transport) {
this.data = data;
var self = this;
transport.on('data', function () {
alert(self.data);
});
}
方法2：箭头函数-箭头函数表达式在语法上是正则函数表达式的一种紧凑的替代方法，尽管它本身没有与this、arguments、super或new.target关键字的绑定。
箭头函数表达式不适合作为方法，并且不能用作构造函数。
参考：箭头函数表达式
function MyConstructor(data, transport) {
this.data = data;
transport.on('data',()=> {
alert(this.data);
});
}
方法3:Bind-Bind（）方法创建一个新函数，当调用该函数时，将其this关键字设置为所提供的值，并在调用新函数时提供的任何参数之前使用给定的参数序列。
引用：Function.pr原型.bind（）
function MyConstructor(data, transport) {
this.data = data;
transport.on('data',(function() {
alert(this.data);
}).bind(this);
