谈一下JS中call、apply、bind的异同和用法

首先他们都是调用一个对象的方法,用另一个对象替换当前对象。举个例子:

B.call(A, args1,args2);A对象调用B对象的方法。
B.apply(A, arguments);A对象应用B对象的方法。

可以看到:
相同点------方法是一样的,
------第一个参数的作用是一样的,
不同点------两者传入的列表形式一样
call可以传入多个参数
apply只能传入两个参数。第二个参数往往是作为数组形式传入

        var name = '小张',
            age =25;
        var obj ={
            name:'小刘',
            objAge:this.age,
            sayhai: function(){
                console.log(this.name+"年龄"+this.age);
            }
        }
        console.log(obj.objAge);
        obj.sayhai()
        // 输出的结果是:  17
        //                小刘年龄undefined

        var lol = '亚索'
        function show() {
            console.log(this.lol);
        }
        show()
        //输出结果是:亚索

比较两者this的差别,第一个this是指向ibj,第二个全局声明的show()函数this指向window

那么我们加入call apply bind的话是什么情况呢?

       var name = '小张',
            age =25;
        var obj ={
            name:'小刘',
            objAge:this.age,
            sayhai: function(){
                console.log(this.name+"年龄"+this.age);
            }
        }
        var lala ={
            name: "德玛",
            age:30
        }
        obj.sayhai()  //小刘年龄undefined,this还是指向obj
        obj.sayhai.call() //小张年龄25,this指向window
        obj.sayhai.call(lala) // 德玛年龄30,this指向 lala
        obj.sayhai.apply(lala) //结果同上
        obj.sayhai.bind(lala)()  //结果一样 ,但是bind返回的是一个新函数,必须调用才会被执行。

可以看到他们的this指向是有神奇的变化的,假如我们加入参数呢?

        var name = '小张',
            age =25;
        var obj ={
            name:'小刘',
            objAge:this.age,
            sayhai: function(f,t){
                console.log(this.name+"年龄"+this.age,'来自'+ f +'去往' + t);
            }
        }
        var lala ={
            name: "德玛",
            age:30
        }

        obj.sayhai.call(lala,'东土大唐','平凡之路') //德玛年龄30 来自东土大唐去往平凡之路
        obj.sayhai.apply(lala,['东土大唐','平凡之路']) // 德玛年龄30 来自东土大唐去往平凡之路
        obj.sayhai.bind(lala,'东土大唐','平凡之路')()  //德玛年龄30 来自东土大唐去往平凡之路
        obj.sayhai.bind(lala,['东土大唐','平凡之路'])()  //德玛年龄30 来自东土大唐,平凡之路去往undefined

call 的参数是直接放进去的,第二第三第n个参数全都用逗号分隔,直接放到后面obj.sayhai.call(lala,‘东土大唐’, …, ‘string’)。
apply的所有参数都必须放在一个数组里面传进去。
bind除了返回函数以外,它的参数和call 一样。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值