[JavaScript知识库]call()函数apply()函数bind()函数

call()函数的基本使用

call()函数调用一个函数时,会将该函数的执行对象上下文改变为另一个对象

        //定义一个add()函数
        function add(x,y){
            return x + y
        }
        // 通过call()函数进行add()函数的调用
        function myAddCall(x,y){
            // 调用add()函数的call函数
            return add.call(this,x,y)   // 这个地方的this就是myAddCall
        }
        console.log(myAddCall(10,20));  // 30

apply()函数的基本使用

apply()函数的作用和call()函数是一样的,只是在传参的形式上有差别

        // 定义一个add()函数
        function add(x,y){
            return x + y
        }
        // 通过call()函数进行add()函数的调用
        function myAddApply(x,y){
            // 调用add()函数的call函数
            return add.apply(this,[x,y])   // 这个地方的this就是myAddCall
        }
        console.log(myAddApply(10,20));   // 30

bind()函数的基本使用

bind()函数创建一个新的函数,在调用时设置this关键字为提供的值,在执行新函数时,

将给定的参数列表作为原函数的参数序列,从前往后匹配

        // 定义一个add()函数
        function add(x,y){
            return x + y
        }
        // 通过call()函数进行add()函数的调用
        function myAddBind(x,y){
            // 调用add()函数的call函数
            var bindFn = add.bind(this,x,y);
            return bindFn()  
        }
        console.log(myAddBind(10,20));

三者的相同之处是:都会改变函数调用的执行主体,修改this的指向

不同之处:

1.关于函数的立即执行,call()函数和apply()函数在执行后会立即调用前面的数,

而bind()函数不会立即调用,他会返回一个新的函数,可以在任何时候进行调用.

2.关于传参,call()函数与bind()函数接受的参数相同,第一个参数表示要改变的执行主体,

既this指向,从第二个参数开始到最后一个参数表示的是函数接受的参数;

而对应apply()函数,第一个参数一致,第二个参数是一个数组,表示接受所有参数,

如果第二个参数不是一个有效的数组或者arguments对象,则会抛出一个typeError异常.

求数组的最大项和最小项

array数组本身没有max和min函数.但是Math有,可以使用apply函数来改变Math.max和min的执行主体.然后将数组作为参数传递给max和min函数

        var arr = [1,2,5,6,7,8,5,35,34]
        // 求数组中的最大值
        console.log(Math.max.apply(null,arr));
        // 求数组中的最小值          (window,arr)也行
        console.log(Math.min.apply(undefined,arr));  

bind()函数配合setTimeout

在默认情况下,使用setTimeout()函数的时候,this关键字会指向window,当使用类的函数时,?需要this引用类的实例,我们可能要显示的把this绑定到回调函数以便继续使用实例.

        // 定义一个函数
        function LateBloomer() {
            this.petalCount = Math.ceil(Math.random()*33)+1;
        }
        // 定义一个原型函数
        LateBloomer.prototype.bloom = function() {
            // 在一秒后调用实例的dclare()函数
            window.setTimeout(this.declare.bind(this),1000)
        }
        // 定义原型链上的declare()函数
        LateBloomer.prototype.declare = function() {
            console.log(this.petalCount);
        }

        //生成LateBloomer的实例
        var flower = new LateBloomer()
        flower.bloom()

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖