我们不能将其绑定到setTimeout（），因为它总是使用全局对象（Window）执行。如果您想在回调函数中访问this上下文，那么通过对回调函数使用bind（），我们可以如下实现：

setTimeout(function(){
    this.methodName();
}.bind(this), 2000);

你应该知道“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);

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

有了类字段的支持，可以通过以下方式实现：

class someView {
    onSomeInputKeyUp = (event) => {
        console.log(this); // This refers to the correct value
    // ....
    someInitMethod() {
        //...
        someInput.addEventListener('input', this.onSomeInputKeyUp)

当然，在幕后，绑定上下文的都是旧的好箭头函数，但在这种形式下，它看起来比显式绑定更清楚。

由于这是一个第3阶段的提案，您需要Babel和适当的Babel插件来处理它（08/2018）。

这在JavaScript中：

JavaScript中的this值100%取决于函数的调用方式，而不是函数的定义方式。我们可以通过“点规则左侧”相对容易地找到其值：

当使用function关键字创建函数时，this的值是调用的函数点左侧的对象如果点后面没有对象，那么函数内部的值通常是全局对象（Node.js中的全局对象和浏览器中的窗口）。我不建议在这里使用this关键字，因为它比使用类似window的关键字更不明确！存在某些构造，如箭头函数和使用Function.prototype.bind（）创建的函数，该函数可以修复此值。这些都是规则的例外，但它们确实有助于确定这一点的价值。

Node.js中的示例

module.exports.data = 'module data';
// This outside a function in node refers to module.exports object
console.log(this);

const obj1 = {
    data: "obj1 data",
    met1: function () {
        console.log(this.data);
    },
    met2: () => {
        console.log(this.data);
    },
};

const obj2 = {
    data: "obj2 data",
    test1: function () {
        console.log(this.data);
    },
    test2: function () {
        console.log(this.data);
    }.bind(obj1),
    test3: obj1.met1,
    test4: obj1.met2,
};

obj2.test1();
obj2.test2();
obj2.test3();
obj2.test4();
obj1.met1.call(obj2);

输出：

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

这是obj2，因为点规则的左侧，我们可以看到test1是如何被称为obj2.test1（）；的；。obj2位于点的左侧，因此为该值。即使obj2位于点的左侧，test2也通过bind（）方法绑定到obj1。此值为obj1。obj2位于调用为：obj2.test3（）的函数的点的左侧。因此obj2将是该函数的值。在本例中：obj2.test4（）obj2位于点的左侧。但是，箭头函数没有自己的这个绑定。因此，它将绑定到外部作用域的this值，即模块。导出一个开头记录的对象。我们还可以通过使用调用函数指定此值。在这里，我们可以传入所需的this值作为参数，在本例中为obj2。

我遇到了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
 }

另一种方法是EventListener接口中的handleEvent（evt）方法，这是自DOM2以来将其绑定到事件侦听器中的标准方法，它允许您始终删除侦听器（以及其他好处）：

var obj = {
  handleEvent(e) {
    // always true
    console.log(this === obj);
  }
};

document.body.addEventListener('click', obj);

有关使用handleEvent的详细信息可以在以下位置找到：DOM handleEvent：自2000年以来的跨平台标准