1、相同点
三个函数都是JS内置对象Function的方法,故所有的函数都可以调用这三个方法。
都可以改变this的指向。什么事this的指向呢,就是当调用这三个函数的时候将会把function原本的this指向认为设定的对象中。
2、不同点
是否会调用函数 | 应用场景 | 参数 | |
---|---|---|---|
call() | 是 | 实现继承 | 第一个参数为指向的对象,第二个后面所有的参数传递给call()的调用者函数,传递方式是多个,以逗号分隔 |
apply | 是 | 求数组中的最大最小值 | 第一个参数为指向的对象,第二个参数是数组,数组会以元素的形式传递给call()的调用者,内部传递的时候一个一个传的 |
bind() | 否 | 点击事件延时触发 | 第一个参数为指向的对象,第二个后面所有的参数传递给call()的调用者函数,传递方式是多个,以逗号分隔 |
2.1 call()实现继承
function Parent(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
function Child(name,age,sex){
return Parent.call(this,name,age,sex)
}
var xiaozhang = new Child('小张',20,'男');
console.log(xiaozhang);//{name:'小张',age:20,sex:'男'}
2.2 apply()实现数组最大值和最小值
const arr = [1,2,51,98,12,31,-5];
const max = Math.max.apply(Math,arr); // 通过内置Math对象的球最大值max方法来调用apply函数,因为第一个参数是指向问题,这里不需要指向其他对象,就直接指向自己了
const min = Math.min.apply(Math,arr);
console.log(max,min)//98,-5
2.3 bind()实现点击事件的延时触发
上面call和apply都是在调用的时候就会对函数进行触发,而bind()则不会触发函数,所以bind一般用在延时函数或者定时函数里面。
<button><button>
btn = document.querySelector('button');
btn.onclick = function(){
this.disabled = false;//点击按钮禁用按钮
setTimeout(function(){
this.disabled = true;//延时三秒后启用按钮,setTimeout里面的this指向的是window
}.bind(this),3000)
//bind(this)就会把onclick作用域里面的this传给setTimeout里面
//之前没有这个方法,就在最上面写一个let that = this;来保存this
}