apply、call和bind函数

无论是apply、call还是bind其实都是改变this的指向，我们先来看一个例子

xxxxxxxxxx
var obj = {
    name:"小张",
    getName:function(){
        console.log(this.name)
    }
}
obj.getName(); // 小张

下面我们来看一下通过他们来改变this指向

xxxxxxxxxx
var obj = {
    name:"小张",
    getName:function(){
        console.log(this.name)
    }
}
var newObj = {
    name:'小王'
}
obj.getName.call(newObj); // 小王
obj.getName.apply(newObj); // 小王
obj.getName.bind(newObj)(); // 小王

由此得出结论，bind 返回的是一个新的函数，你必须调用它才会被执行

我们再来看一下apply和call的区别

xxxxxxxxxx
var obj = {
    name:"小张",
    getName:function(city){
        console.log(this.name,city)
    }
}
var newObj = {
    name:'小王'
}
obj.getName.call(newObj,'北京'); 
obj.getName.apply(newObj,['上海']);
obj.getName.bind(newObj,'深圳')(); 

第一个参数：this的指向，第二个参数为方法传递参数

常见应用场景

xxxxxxxxxx
var arr = [10,20,30]
Math.max.apply(null,arr) // 30

var arr = [10,20,30]
Math.max.call(null,...arr)

null代表指向window对象，这里是因为Array本身时候window对象的子元素

实时效果反馈

1. 下列代码关于call改变this关键字，输入结果是什么：

xxxxxxxxxx
var name = "itbaizhan"
var obj = {
    name: "小张",
    getName: function () {
        console.log(this.name)
    }
}
var newObj = {
    name: '小王'
}
obj.getName.call(window); 
obj.getName.call(newObj); 

A itbaizhan 小张

B itbaizhan 小王

C 小张 小王

D 小王 小王

答案

1=>B

实操

1. 【简答】什么是回流和重绘
2. 【实操】利用定时器实现防抖
3. 【实操】利用定时器实现节流
4. 【简答】简述什么是cookie有什么作用