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