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会返回一个新的函数

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐