JS中call、apply和bind函数

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
}
上一篇:伪书组 ,简单理解call、apply、bind的用法!


下一篇:凸优化第四章凸优化问题 4.5 几何规划