JS基础——call、bind、apply 和 this

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 绑定