简述this,call,apply,bind之间的关系

一、什么是this？

this是JavaScript语言的一个关键字，它是函数运行时在函数体内部自动生成的一个对象，只能在函数体内部使用。函数的不同使用场合，this的指向不同。

在ES5中，this永远指向最终调用它的对象。

例1：
这里最终调用函数a的对象是全局window,相当于window.a()。
所以this指向window，this.name的值为全局变量name的值 'windowsName'。
 
var name = "windowsName";
function a () {
    var name = "Cherry";
    console.log(this.name); // windowsName
    console.log(this); // [object Window]
}
a();
console.log(this) // [object Window]

例2：
a.fn()调用函数fn的最终对象是a，this指向对象a，所以最终的name值是'skillnull'。
window.a.fn()调用函数fn的最终对象是a，this指向a，所以最终的name值是'skillnull'。
注：由于window下的变量和方法访问和调用的时候可以省略window，所以a.fn() === window.a.fn()。
b()调用函数fn的最终对象是window，this指向window，所以最终的name值是'windowsName'。这里将a.fn赋值给变量b的时候并没有调用fn。  
 
var name = "windowsName";
var a = {
    name: "skillnull",
    fn: function () {
        console.log(this.name);
    }
}
a.fn();  // skillnull
window.a.fn(); // skillnull
 
var b = a.fn;
b(); // windowsName

二、如何改变this的指向？

• 使用 ES6 的箭头函数
  箭头函数的 this 始终指向函数定义时的 this，而非执行时。

  例3：
  注：若setTimeout推迟执行的函数是某个对象的方法，那么该方法中的this关键字将指向全局环境。
  由此可以看出a.fn2()中被setTimeout推迟执行的函数的最终调用对象是window，this指向window，
  而window中没有fn1方法，所以最终结果为错误信息：this.fn1 is not a function。
  a.fn3()中被setTimeout推迟执行的函数使用了箭头函数，此时的this指向函数定义时的this，即a，所以最终结果为：skillnull。
  a.fn4()中的函数没有被setTimeout推迟执行，最终对象仍为a，此时的this指向a，所以最终结果为：skillnull。
   
  var name = "windowsName";
  var a = {
      name: "skillnull",
      fn1: function () {
          console.log(this.name)
      },
      fn2: function () {
         // console.log(this) // a
          setTimeout(function () {
              // console.log(this) // [object Window]
              this.fn1()
          }, 100);
      },
      fn3: function () {
          setTimeout(() => {
             // console.log(this) // a
              this.fn1()
          }, 100);
      },
      fn4: function () {
          this.fn1()
      }
  };
  a.fn2() // this.fn1 is not a function
  a.fn3() // skillnull
  a.fn4() // skillnull

• 在函数内部使用 that = this

  如果上面例子中的fn2中使用that = this改变一下this的指向,此时that属于fn2的内部变量，指向a，所以最终结果为：skillnull
  fn2: function () {
      var that = this;
      setTimeout(function () {
          // console.log(that) // a
          that.fn1()
      }, 100);
  }

• new 实例化一个对象
  
  如果函数调用前使用了 new 关键字, 则是调用了构造函数。这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象。

  new实例化一个对象的过程如下：
  1.创建一个空对象 obj;
  2.将新创建的空对象的隐式原型指向其构造函数的显示原型。
  3.使用 call 改变 this 的指向
  4.如果无返回值或者返回一个非对象值，则将 obj 返回作为新对象；如果返回值是一个新对象的话那么直接直接返回该对象。

  伪代码表示：
  var a = new myFunction("Li", "Yafei");
  new myFunction {
      var obj = {};
      obj.__proto__ = myFunction.prototype;
      var result = myFunction.call(obj, "Li", "Yafei");
      return typeof result === 'obj' ? result : obj;
  }

• 使用 apply、call、bind

  例4：
  call、apply、bind都可以更改this的指向，三者作用相同。
  由于a.fn赋值给全局变量b的时候没有执行，上面已经说过，此时的this指向widnow，调用b('skill', 'null')的结果为：i am skillnull
  而在调用方法b的时候使用call、apply或bind，将此时的this指向a，所以最终结果是：i am not skillnull

  var name = 'i am '
  var a = {
      name: "i am not ",
      fn: function (a, b) {
          console.log(this.name + a + b)
      }
  }
   
  var b = a.fn;
  b('skill', 'null') // i am skillnull
  b.call(a, 'skill', 'null') // i am not skillnull
  b.apply(a, ['skill', 'null']) // i am not skillnull
  b.bind(a, 'skill', 'null')() // i am not skillnull

三、call、apply、bind 和 this 的关系

从上面的文章可以看出来，其实call、apply、bind最常用的用途是更改this指向。

四、call、apply、bind三者的区别

call和apply不同之处主要在于参数的形式，call参数是一个列表，apply参数是一个数组。
       而bind会创建一个新函数，需要手动调用，bind的参数形式和call相同。

注：如果当前函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（浏览器中就是window对象）。