【JS】bind，call，apply，箭头函数以及this指向

call和apply

除了把函数内部的this绑定到第一个参数之外，最后是直接返回函数执行
在ECMA规范中，我们可以看到call和apple最终都是执行的函数[[call]]操作，把当前的函数环境变为执行上下文。
ecma262/#sec-ecmascript-function-objects-call-thisargument-argumentslist

如何手动实现call和apply

js 实现call和apply方法，超详细思路分析

// call模拟
Function.prototype.call_ = function (obj) {
    //判断是否为null或者undefined,同时考虑传递参数不是对象情况
    obj = obj ? Object(obj) : window;
    var args = [];
    // 注意i从1开始
    for (var i = 1, len = arguments.length; i < len; i++) {
        args.push("arguments[" + i + "]");
    };
    obj.fn = this; // 此时this就是函数fn
    var result = eval("obj.fn(" + args + ")"); // 执行fn
    delete obj.fn; //删除fn
    return result;
};
// apply模拟
Function.prototype.apply_ = function (obj, arr) {
    obj = obj ? Object(obj) : window;
    obj.fn = this;
    var result;
    if (!arr) {
        result = obj.fn();
    } else {
        var args = [];
        // 注意这里的i从0开始
        for (var i = 0, len = arr.length; i < len; i++) {
            args.push("arr[" + i + "]");
        };
        result = eval("obj.fn(" + args + ")"); // 执行fn
    };
    delete obj.fn; //删除fn
    return result;
};

bind

bind是创建了一个新函数，并把其内部的this指向了我们指定的这个对象，
fun.bind()最后返回的其实是一个函数
MDN/Function/bind

箭头函数的this

this指向题目：

var a= 10;
var foo = {
  a:20,
  b:function(){
    var a =30;
    return this.a;  
  },
  c:()=>{ 
    var a = 40;
    return this.a;
  }
}
var d = {
  a:50,
}

console.log(a);
console.log(foo.b());
console.log(foo.c());
console.log(foo.b.bind(d)());
console.log(foo.c.bind(d)());

输出：
10
20
10
50
10

箭头函数this指向与它定义的时候所在的环境的this对象是同一个。箭头函数的this指向了它定义的环境的this对象后，这个绑定不会受到bind/call/apply影响，意思是对箭头函数直接call/bind/apply不会影响它的this指向。
但是！！！它定义时候所在环境的this的具体对象是有可能变化的！！
上面的例子，foo.c.bind(d)为什么是10呢？
我们可以看到，c在定义的时候，它是一个对象的属性，对象的属性没有创建新的词法环境(Lexical env)，所以在c箭头函数定义的时候，离它最近的Lexcial env就是global env，所以它的this指向的是global obj（浏览器中就是window），所以指向的就是global obj中的a。
如果我们在console foo.c.bind(d)()之前，把a赋值为其他值，你就会发现最后输出的是1234;。
a =1234; console.log(foo.c.bind(d)()); output：1234
我们看另外一种情况下的this：

function foo() {
  return () => {
    return () => {
      return () => {
        console.log("id:", this.id);
      };
    };
  };
}

var f = foo.call({id: 1});

var t1 = f.call({id: 2})()();
var t2 = f().call({id: 3})();
var t3 = f()().call({id: 4});

output:1,1,1

在这个例子里面，function在执行的时候会创建新的lexical env，这个时候，foo的lexcical env就是距离箭头函数最近的，箭头函数的this就指向了foo的this。所以嵌套的几层箭头函数都是指向foo的lexical env所以是，都输出了1.
对这个题目做一点小变形：

function foo() {
  return () => {
    return () => {
      return () => {
        console.log("id:", this.id);
      };
    };
  };
}

var f = foo.call({id: 1});

var t1 = f.call({id: 2})()();
f = foo.call({id: 5});
var t2 = f().call({id: 3})();
var t3 = f()().call({id: 4});
output:1,5,5

这个输出也验证了，foo返回的箭头函数this指向的就是foo的箭头函数，所以如果foo的this binding改变了，箭头函数获取到的this也就变了。
关于箭头函数this的理解几乎完全是错误的
this、apply、call、bind
深入理解ES6箭头函数中的this
箭头函数的this