美文网首页
call apply bind 区别

call apply bind 区别

作者: 洪锦一 | 来源:发表于2021-10-12 17:30 被阅读0次

call 作用:1.修改this指向

var o = {
    name: 'ZS'
};

//构造函数
 function fn(a = 10, b = 6) {
     console.log(this);
     console.log(a + b);
}
fn.call(o, 5, 3);

call 作用:2.用作继承

        //这是es5通过构造函数实例化对象的语法 
        //父构造函数
        function Father(name, age) {
            this.name = name;
            this.age = age;
        }

        Father.prototype.say = function () {
            console.log("我是father的say");
        }

        //子构造函数
        function Son(name, age, score) {
            Father.call(this, name, age)
            this.score = score;
        }
        Son.prototype = new Father();//让子类的原型对象指向父类实例, 这样一来在子实例中找不到的属性和方法就会到原型对象(父类实例)上寻找

        //Son.prototype.constructor = Son;// 根据原型链的规则,顺便绑定一下 constructor, 这一步不影响继承, 只是在用到constructor时会需要

        var s = new Son('张三', 13, 80)
        console.log(s);
        s.say()

apply 作用:也是改变this指向 传的参数是数组

   var o = {
        name: 'zhangsan'
    }

    function fn(a, b) {
        console.info(this)
        console.log(a + b);
    }
    fn.apply(o, [2, 5])


    //求数组最大最小值
    console.log(Math.max.apply(Math, [2, 34, 5]));
    console.log(Math.min.apply(Math, [2, 34, 5]));

bind 作用:也是改变this指向, 但是bind不会立即执行

        var o = {
            name: 'zhangsan'
        }

        function fn(a, b) {
            console.info(this)
            console.log(a + b);
        }

        var f = fn.bind(o, 2, 3)
        f()

demo:点击按钮禁用,2s后可以点击

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
 document.querySelectorAll('button').forEach(function (item) {
            item.onclick = function () {
                this.disabled = true
                //箭头函数this没有问题
                // setTimeout(() => {
                //     this.disabled = false
                // }, 2000)
                //不用箭头函数,使用bind改变this指向
                setTimeout(function () {
                    this.disabled = false
                }.bind(this), 2000)
            }
})

---------------------------------------------------------总结---------------------------------------------------------
相同点:
都可以改变函数内部this指向

区别点:
1.call和apply 会调用函数,并且改变函数内部this指向
2.call和apply 传递参数不一样,call传递参数 aru1,aru2...形式 apply 必须数组形式[arg]
3.bind 不会调用函数,可以改变函数内部this指向

应用场景:
1.call 经常做继承
2.apply 经常给数组有关系,比如借助数学对象实现数组最大值最小值
3.bind 不调用函数,但是还想改变this指向,比如改变定时器内部的this指向

相关文章

  • 理解JS中的 call, apply, bind方法

    call, apply, bind 方法的目的和区别 我们常说,call(), apply(),bind()方法的...

  • this_原型链_继承

    this相关问题 apply、call 、bind的作用以及区别 call、apply和bind方法的用法以及区别...

  • this&原型链&继承

    this 1. apply、call 、bind有什么作用,什么区别? apply、call 、bind 都是用来...

  • this_原型链_继承

    this 相关 1. apply、call 、bind有什么作用,什么区别 apply、call、bind可以改变...

  • 关于 this_原型链_继承 相关问题总结

    关于this 1- apply、call 、bind的作用和区别 apply、call 、bind都有改变thi...

  • this_原型链_继承

    问题1: apply、call 、bind有什么作用,什么区别? apply和call call apply,调用...

  • this 原型链 继承

    this 相关问题 1.apply、call 、bind有什么作用,什么区别 apply、call 、bind这三...

  • call(),apply()和bind()

    call、apply和bind函数存在的区别:bind返回对应函数, 便于稍后调用; apply, call则是立...

  • this 相关问题

    问题1: apply、call 、bind有什么作用,什么区别 apply call bind 问题2: 以下代码...

  • js继承

    问题1: apply、call 、bind有什么作用,什么区别 apply/call/bind 问题2: 以下代码...

网友评论

      本文标题:call apply bind 区别

      本文链接:https://www.haomeiwen.com/subject/hnfjoltx.html