"背景"的麻烦

术语"上下文"有时用来指通过引用的对象此.它的使用是不合适的,因为它不适合任何语义或技术上与ECMAScript中的这个.

"上下文"是指围绕某些事物增加意义的情况,或者是一些提供额外含义的前后信息.ECMAScript中使用术语"上下文"来指代执行上下文,它是一些执行代码范围内的所有参数,范围和这一点.

这在ECMA-262第10.4.2节中显示:

将ThisBinding设置为与调用执行上下文的ThisBinding相同的值

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

执行上下文提供周围信息,为正在执行的代码添加含义.它包含了更多只有thisBinding的信息.

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

这都是调用方法的"神奇"语法:

object.property();

当您从对象获取属性并一次调用它时,该对象将是该方法的上下文.如果您调用相同的方法,但是在单独的步骤中,则上下文是全局范围(窗口):

var f = object.property;
f();

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

this.saveNextLevelData(this.setAll);

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

this.saveNextLevelData(this.setAll.bind(this));

如果您使用的是jQuery,则应该使用该$.proxy方法,因为bind并非所有浏览器都支持:

this.saveNextLevelData($.proxy(this.setAll, this));

当前，如果在代码中使用类，则可能存在另一种方法。

在类字段 的支持下，可以进行其他操作：

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

可以肯定的是，绑定上下文的都是老式的好箭头函数，但是以这种形式，它看起来比显式绑定更清晰。

由于是Stage 3 Proposal，因此您现在需要Babel和适当的Babel插件来处理它（08/2018）。

这个问题围绕着this关键字在javascript中的行为方式展开。this表现如下

的值this通常由函数执行上下文确定。

在全局范围内，this指的是全局对象（windowobject）。

如果为任何功能启用了严格模式，则的值this将undefined与严格模式中的一样，全局对象将undefined代替window对象。

此关键字将绑定到点之前的对象。

我们可以明确地设置这个值call()，bind()和apply()

当使用new关键字（构造函数）时，它将绑定到正在创建的新对象。

箭头函数不绑定this？，而是按this词法绑定（即基于原始上下文）

正如大多数答案所暗示的，我们可以使用箭头函数或bind()方法或自变量。我会从Google JavaScript样式指南中引用有关lambdas（箭头功能）的观点

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

Google明确建议使用Lambda而不是bind或 const self = this

因此最好的解决方案是使用如下所示的lambda，

function MyConstructor(data, transport) {
  this.data = data;
  transport.on('data', () => {
    alert(this.data);
  });
}

参考文献：

https://medium.com/tech-tajawal/javascript-this-4-rules-7354abdb274c

箭头功能与绑定

首先,您需要在上下文中清楚地了解关键字scope和行为.thisscope

this&scope:

there are two types of scope in javascript. They are :

   1) Global Scope

   2) Function Scope

简而言之,全局范围是指窗口对象.在全局范围内声明的变量可以从任何地方访问.另一方面,函数范围驻留在函数内部.函数内部声明的变量通常无法从外部访问.this全局范围中的关键字是指窗口对象.thisinside函数也指window对象.所以this我们总是会引用窗口,直到我们找到一种操作方式this来指示我们自己选择的上下文.

--------------------------------------------------------------------------------
-                                                                              -
-   Global Scope                                                               -
-   ( globally "this" refers to window object)                                 -     
-                                                                              -
-         function outer_function(callback){                                   -
-                                                                              -
-               // outer function scope                                        -
-               // inside outer function"this" keyword refers to window object -                                                                              -
-              callback() // "this" inside callback also refers window object  -

-         }                                                                    -
-                                                                              -
-         function callback_function(){                                        -
-                                                                              -
-                //  function to be passed as callback                         -
-                                                                              -
-                // here "THIS" refers to window object also                   -
-                                                                              -
-         }                                                                    -
-                                                                              -
-         outer_function(callback_function)                                    -
-         // invoke with callback                                              -
--------------------------------------------------------------------------------

操纵this内部回调函数的不同方法:

这里我有一个名为Person的构造函数.它有一个叫做财产name和四个方法中调用sayNameVersion1,sayNameVersion2,sayNameVersion3,sayNameVersion4.它们中的所有四个都有一个特定的任务.接受回调并调用它.回调有一个特定的任务,即记录Person构造函数实例的name属性.

function Person(name){

    this.name = name

    this.sayNameVersion1 = function(callback){
        callback.bind(this)()
    }
    this.sayNameVersion2 = function(callback){
        callback()
    }

    this.sayNameVersion3 = function(callback){
        callback.call(this)
    }

    this.sayNameVersion4 = function(callback){
        callback.apply(this)
    }

}

function niceCallback(){

    // function to be used as callback

    var parentObject = this

    console.log(parentObject)

}

现在让我们从person构造函数创建一个实例,并调用不同版本的sayNameVersionX(X指向1,2,3,4)方法,niceCallback以查看我们可以通过多少方式操作this内部回调来引用该person实例.

var p1 = new Person('zami') // create an instance of Person constructor

绑定:

绑定的作用是创建一个新的函数,并将this关键字设置为提供的值.

sayNameVersion1并sayNameVersion2使用bind来操纵this回调函数.

this.sayNameVersion1 = function(callback){
    callback.bind(this)()
}
this.sayNameVersion2 = function(callback){
    callback()
}

第一个与this方法本身内部的回调绑定.对于第二个,回调与绑定到它的对象一起传递.

p1.sayNameVersion1(niceCallback) // pass simply the callback and bind happens inside the sayNameVersion1 method

p1.sayNameVersion2(niceCallback.bind(p1)) // uses bind before passing callback

电话:

在first argument所述的call方法被用作this该被调用,该函数内call连接到它.

sayNameVersion3使用 call操纵this参考,而不是窗口对象,我们创建的Person对象.

this.sayNameVersion3 = function(callback){
    callback.call(this)
}

它被称为如下:

p1.sayNameVersion3(niceCallback)

申请:

类似于call,第一个参数apply指的是将由this关键字指示的对象.

sayNameVersion4用于apply操纵this以引用人物对象

this.sayNameVersion4 = function(callback){
    callback.apply(this)
}

它被调用如下.简单地说回调,

p1.sayNameVersion4(niceCallback)

我们不能将setTimeout()它绑定到,因为它总是用全局对象(Window)执行,如果你想this在回调函数中访问上下文,那么通过使用bind()我们可以实现的回调函数:

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

你应该知道"这个"关键字.

根据我的观点,你可以用三种方式实现"this" (自我/箭头功能/绑定方法)

与其他语言相比,函数的此关键字在JavaScript中的行为略有不同.

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

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

它不能在执行期间通过赋值设置,并且每次调用函数时都可能不同.

ES5引入了bind()方法来设置函数的值,无论它如何被调用,

和ES2015引入了箭头函数,这些函数不提供它们自己的这种绑定(它保留了封闭词汇上下文的这个值).

方法1:即使在上下文发生变化时,也会使用自我来维护对原始引用的引用.这是一种常用于事件处理程序的技术(特别是在闭包中).

参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

function MyConstructor(data, transport) {
    this.data = data;
    var self = this;
    transport.on('data', function () {
        alert(self.data);
    });
}

方法2:箭头函数 - 箭头函数表达式是常规函数表达式的语法紧凑替代方法,

虽然没有自己绑定到this,arguments,super或new.target关键字.

箭头函数表达式不适合作为方法,它们不能用作构造函数.

参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

  function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data',()=> {
        alert(this.data);
    });
}

方法3:绑定 - bind()方法创建一个新函数,

调用时,将其关键字设置为提供的值,

在调用新函数时,在任何提供的参数序列之前使用给定的参数序列.

参考: https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

  function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data',(function() {
        alert(this.data);
    }).bind(this);