如何理解javascript 中的this，call 、apply 、bind

this 在日常的js代码中 几乎随处可见， 但理解this并不是那么容易的 ？ 那么this到底是什么呢 ?

const  f = function () {
  console.log(x);
};

js 在设计之初是允许在函数内部调用其他外部变量的 ，就像 f  函数体里面使用了变量x。

该变量由运行环境提供。由于函数运行在不同的运行环境。所以就需要有一种机制 ，能够在函数体内部获取当前的运行环境（又叫可执行上下文），所以 ，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。实际上 函数在调用时候 会创建一个可执行环境 包括 调用位置，  创建活动对象（arguments，其他临时变量）， 作用域链   确定this指针，this 只是可执行上下文对象的其中一个属性。到此我们知道this 从哪来， this 指针又指向谁？

1.默认绑定 ：当函数在全局调用时候或者不符合其他绑定规则时候 ,非严格模式下this默认指向window ,严格模式下this指向undifined；

//全局调用默认绑定window
var   a  = 1;
function fn (){
       console.log(this===window);   // true 
       console.log(this.a)    // 1 
}
fn();

函数内部的函数不符合其他的绑定规则，此时默认绑定window
function outerfn (){
      var a = 2;
      innerfn();
    function innerfn(){
      console.log(this===window); // true
      console.log(this.a) ;  // 1 
   }
}
outerfn();

2.隐式绑定 ： 当函数作为对象的引用属性调用时候，this指向最后调用它的那个对象。例如

var name = '木木';
 function globalFn (){
       console.log(this.name)
 }
 var innerObj={
        name :'小木木',
        fn:globalFn
 };
 var  outerObj= {
        name:'小小木木',
        obj:innerObj
 }

innerObj.fn(); // 小木木
outerObj.obj.fn();  // 小木木

同时我们应该也要知道，js 复杂对象赋值时候，对象的属性是引用了函数对象的地址，上方隐式绑定可能出现this丢失。

function  fn (){
        console.log(this.a);
 }
 function fn1 (dofn){
        if (typeof dofn !=='function')return ;
        dofn();
 }
 var a = '我是obj外部的a';
 var obj ={
        a : '我是obj内部的a',
        fn:fn,
 };
 var fn2 = obj.fn;
     fn1(obj.fn)  //我是obj外部的a
     fn2(); //我是obj外部的a
    (obj.fn)(); // 我是obj内部的a
    (obj.fn||obj.fn3)() // 我是obj外部的a      
    (var fn4 = obj.fn)()  // 我obj外部的a  

当然实际的生产代码应该是没有人像最后三种那样去调用函数， 但它可以帮助我们更好的理解 this绑定的原理。 fn2 中保存的是obj.fn 函数的地址， fn2 执行的时候，相当于在全局环境中执行fn ，符合上方第一 条绑定规则。

 我们知道函数的参数传递是按照值得传递，如果参数是引用类型，传递的引用类型的地址，fn1 传入的函数，相当于把obj.fn 函数的地址 赋值给了dofn ，然后函数内部执行，如第一 条绑定规则；

最后三个 第一个括号 只是用来确定执行的 优先级， (obj.fn)()等同于obj.fn() 的正常调用， this绑定 obj；

后面两个 = 、 ||  是一个表达式返回的是 保存obj.fn 地址的变量 调用后等同于在全局 调用，符合第一条调用规则。

3. 显式绑定 apply 、 call  、 bind  ; 三者都能改变this的指向 ， 也略有不同。

  call ()  , apply() 方法用法十分相似，相同点都是 调用一个函数, 其第一个参数对象绑定this的目标值， 不同的传参方式 call（）中 所有的参数都是传给父函数本身使用的参数，apply() 方法的传参是采用数组的形式. 

var a = '我是obj外部的a';
var obj = {
 a:'我是obj内部的a',
};
function fn (){
 console.log(this.a);
}
fn.call(obj);   // 我是obj内部的a

 当call   或apply  传入的第一个参数是null 时 ， 内部的this 指向的window  ；

bind 与上面两者相同的地方，都有可以用来改变this的指向， 不同的地方在于call和apply都是改变上下文中的this并立即执行这个函数， bind调用的函数不是立即执行， 而是会返回 被修改过this指向的函数 ；

var a = '我是obj外部的a';
var obj = {
 a:'我是obj内部的a',
};
function fn (d,e,f){
 console.log(this.a);
 console.log(d,e,f); 
}
var c=fn.bind(obj,1);
c(2,3); // 我是obj内部的a
       // 1 2 3 

bind 也可以添加多个参数，并且参数在执行的 时候可以再次添加， 参数是按照形参的顺序进行的，类似call的 传参方式；

4 .new 关键字改变this 指向；

es5 中，用 new 调用一个构造函数，会创建一个新对象，  构造函数中的this 指向了该实例对象，

function MyPromise (){
 this.promise = 'promise';
}
var p = new MyPromise();
  console.log(p); // {promise:'promise'}

我们看下 new  关键字都做了什么事？其实很简单，就干了三件事情

 

 function _new(fn,...rest){
     const tempObj = Object.create(fn.prototype);
     const fnResult  = fn.call(tempObj,...rest);
    return   fnResult instanceof Object  ? fnResult : tempObj
    
}

第一行，我们创建了一个空对象tempObj   并且 _proto_指向构造函数的原型；
第二行，调用构造函数 改变其内部的this  指针， 构造函数属性添加到实例上，同时生成构造函数的运行的结果；
第三行，如果构造函数生成的结果是个对象，就返回该结果，否则就返回新生成的对象

5 .箭头函数中的this；
 先要说明的，箭头函数没有自己的 this 绑定。箭头函数中使用的 this，其实是直接包含它的那个函数或函数表达式中的 this。

即箭头函数中的this 来自于声明处；

var obj =  {
    test :function(){
       // console.log(this);这里的 this 指向obj
      const arrowFunction =()=>{
      console.log(this===obj) // 箭头函数的this 指向声明处
        }
        arrowFunction();
     }
};
obj.test(); // true

总结： 1-4   数字最小优先级越高；
1、函数被new调用，this指向由new新构造出来的这个对象；
2、函数通过call()、apply()、bind()调用，this指向被绑定的对象；
3、函数作为对象的方法被调用，this指向这个对象（即常说的对象上下文）；
4、默认（非严格模式）情况下，this指向window, 严格模式下，this指向undefined。// 其他情况不匹配时候  都归结为此情况