call,apply,bind三者的区别

1、本质上的区别

三者最大的区别是call和apply会改变this的指向并且立即执行函数,但是bind方法不会立即执行函数,而是会返回this改变后的函数。

        let obj = {
            name:'张三',
            age:18,
            func:function(){
                console.log(this.name + "年龄" + this.age);
            }
        }
        let obj2 = {
            name:'李四',
            age:20
        }
        obj.func.call(obj2) //李四年龄20
        obj.func.apply(obj2); //李四年龄20
        obj.func.bind(obj2)(); //李四年龄20
这三个结果都一样 bind后面多一个括号是因为 bind返回值是一个函数加上()编程立即执行函数

2、call

fn.call()

当call方法执行的时候会做三个事情:

  • 1.首先要把操作的函数中的this关键字变为call方法第一个传递的参数。
  • 2.把call方法第二个及以后的参数获取到

3.把要操作的函数执行,并且把第二个以后传递进来的实参传递给函数用法:

(1)Object.call(obj,arg1,arg2.......)
参数:
第一个参数obj是作为函数上下文的对象(也就是this)
第二个参数arg1:从第二个参数开始后续所有参数都是传给方法的参数

(2)如果不传参数,或者第一个参数是nullnudefinedthis都指向window

let fn = function (a, b) {

  console.log(this, a, b);

};

let obj = { name: "obj" };

fn.call(obj, 1, 2); // this:obj    a:1         b:2

fn.call(1, 2); // this:1      a:2         b:undefined

fn.call(); // this:window a:undefined b:undefined

fn.call(null); // this=window a=undefined b=undefined

fn.call(undefined); // this=window a=undefined b=undefined

 3、apply

apply和call基本上一致,唯一区别在于传参方式:apply把需要传递给fn的参数放到一个数组(或者类数组)中传递进去,虽然写的是一个数组,但是也相当于给fn一个个的传递

(1)用法:Object.apply(obj,[args])
参数:
第一个参数obj是作为函数上下文的对象(也就是this)
第二个参数args:是一个数组作为参数传入

fn.call(obj, 1, 2);
fn.apply(obj, [1, 2]);
注意,如果fn.apply(obj,1,2)则会报错

4、bind

bind:语法和call一模一样,区别在于立即执行还是等待执行,bind不兼容IE6~8

fn.call(obj, 1, 2); // 改变fn中的this,并且把fn立即执行
fn.bind(obj, 1, 2); // 改变fn中的this,fn并不执行

(1)用法:Object.bind(obj,arg1,arg2.......)
参数:
第一个参数obj是作为函数上下文的对象(也就是this)
第二个参数arg1:从第二个参数开始后续所有参数都是传给方法的
参数

并且返回值是一个function

(2)

function foo() {

console.log("foo被执行", this);

}

function sum(num1, num2, num3, num4) {

console.log(num1, num2, num3, num4);

}

// 系统的bind使用

var bar = foo.bind("abc");

bar();

 5、总结

call和apply的区别:两个函数都是改变函数执行上下文的,但是传的参数不同
bind和其他两个差别在:传参与call相同,但是bind会返回一个新的函数

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值