首先，您需要对的上下文中scope的this关键字有清晰的了解和行为scope。

this＆scope：

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

   1) Global Scope

   2) Function Scope

简而言之，全局作用域是指window对象。在全局作用域中声明的变量可以从任何地方访问;另一方面，函数作用域位于函数内部。在函数内部声明的变量通常不能从外部访问。this全局范围内的关键字是指window对象。this内部函数还指代窗口对象，因此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来引用我们创建的人员对象，而不是窗口对象。

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(function(){
    this.methodName();
}.bind(this), 2000);

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

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

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

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

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);