我有一个注册事件处理程序的构造函数：
函数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);
};
但它表现出相同的问题。
如何访问正确的对象？
当前回答
这一切都在调用方法的“神奇”语法中：
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));
其他回答
你应该知道“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);
我遇到了Ngx折线图xAxisTickFormatting函数的问题，该函数是从HTML调用的，如下所示：[xAxisTikFormatting]=“xFormat”。
我无法从声明的函数访问组件的变量。这个解决方案帮助我解决了问题，找到了正确的答案。
不要像这样使用函数：
xFormat (value): string {
return value.toString() + this.oneComponentVariable; //gives wrong result
}
使用此项：
xFormat = (value) => {
// console.log(this);
// now you have access to your component variables
return value + this.oneComponentVariable
}
以下是访问子上下文中的父上下文的几种方法-
您可以使用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);
});
}
我们不能将其绑定到setTimeout（），因为它总是使用全局对象（Window）执行。如果您想在回调函数中访问this上下文，那么通过对回调函数使用bind（），我们可以如下实现：
setTimeout(function(){
this.methodName();
}.bind(this), 2000);
问题围绕着this关键字在JavaScript中的行为。这表现如下不同，
其值通常由函数执行上下文确定。在全局范围中，这是指全局对象（窗口对象）。如果为任何函数启用了严格模式，则其值将是未定义的，因为在严格模式中，全局对象是指未定义的窗口对象。位于点之前的对象是this关键字将绑定到的对象。我们可以使用call（）、bind（）和apply（）显式设置此值当使用new关键字（构造函数）时，它将绑定到正在创建的新对象。箭头函数不绑定此 — 相反，这是在词汇上绑定的（即，基于原始上下文）
正如大多数答案所建议的那样，我们可以使用arrow函数或bind（）方法或Self var。我将引用GoogleJavaScript风格指南中关于lambdas（arrow函数）的一点
更喜欢使用箭头函数而不是f.bind（this），尤其是在goog.绑定（f，this）。避免写入常量self=this。箭头功能对于有时意外传递的回调特别有用其他参数。
谷歌明确建议使用lambdas，而不是bind或const self=this
因此，最好的解决方案是使用如下lambdas，
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', () => {
alert(this.data);
});
}
参考文献：
https://medium.com/tech-tajawal/javascript-this-4-rules-7354abdb274c箭头函数与绑定
