this
首先我们分析一下下面代码的执行结果
function foo(num) {
console.log(“foo: ” + num);
this.count++; // 记录函数执行次数
}
foo.count = 0;
function test(){
for(let i = 0 ; i < 4; i++){
foo(i)
}
console.log(‘foo 执行次数：’+foo.count)
}
test()
执行结果如下：
foo: 0
foo: 1
foo: 2
foo: 3
foo 执行次数：0
由此可见 this 指向的并不是函数自身。this 是在运行时进行绑定的，它的指向取决于它的调用位置。我们可以通过分析调用栈来找到函数的调用位置。（调用位置为当前正在执行的函数的前一个调用中）。当我们在第一个例子中增加 debugger, 在浏览器工具中可以清晰的看到函数的调用栈：foo 函数的调用位置在 test 函数中，此时 this 的指向默认绑定为 window，而不是 foo 对象。我们可以可以通过修改 this.count 为 foo.count 来达到目的。
绑定
this 的绑定规则有：默认绑定、隐式绑定、显式绑定、new 绑定，上面函数调用中 this 就是默认绑定。
new 绑定
function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log(bar.a); //2
var bar2 = new foo(3);
console.log(bar2.a) //3
当使用 new 调用 foo 函数时，会构造一个新对象并把它绑定到 foo
显式绑定
我们可以通过 call、bind、apply 来改变 this 的指向。call、apply 本质上没有区别，都是立即执行，只是第二个参数的传值方式不一样。bind 返回要执行的函数，需要的时候再执行。(bind 后的函数当使用 new 执行时，绑定无效)
function foo() {
console.log(this.a);
}
var obj = {
a:2
};
var fn = foo.bind(obj);
fn() //2
new fn() //undefined
隐式绑定
当函数存在上下文对象时会影响调用位置
function foo() {
console.log(this.a);
}
var obj2 = {
a: 42,
foo: foo
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.foo(); //42
箭头函数
箭头函数会继承外层函数调用的 this 绑定