call、apply、bind的区别 | 青训营

128 阅读3分钟

call()和apply()

介绍

这两个方法都是函数对象的方法,需要通过函数对象来调用。

当函数调用call()和apply()时,函数都会立即执行。

都可以用来改变函数的this对象的指向。

第一个参数都是this要指向的对象(函数执行时,this将指向这个对象),后续参数用来传实参。

应用场景

  • 求数组中的最大值和最小值(并不是最佳选择)
  • 将伪数组转化为数组

js中的伪数组(例如通过document.getElementsByTagName或者document.querySelectorAll获取的元素)具有length属性,并且可以通过0、1、2…下标来访问其中的元素,但是没有Array中的push、pop等方法。我们可以利用call、apply来将其转化为真正的数组这样便可以方便地使用数组方法了。

  • 数组追加

在js中要往数组中添加元素, 可以直接用push方法

  • 判断变量类型

对于对象型的数据类型, 我们可以借助call来得知他的具体类型, 例如数组

显式绑定this

JS提供的绝大多数函数以及我们自己创建的所有函数,都可以使用call 和apply方法。

它们的第一个参数是一个对象。因为你可以直接指定 this 绑定的对象,因此我们称之为显式绑定。

例1:

function foo() {
    console.log(this.a);
}

var obj = {
    a: 2
};

// 将 this 指向 obj
foo.apply(obj); //打印结果:2

第一个参数的传递

1、thisObj不传或者为null、undefined时,函数中的this会指向window对象(非严格模式)。

2、传递一个别的函数名时,函数中的this将指向这个函数的引用。

3、传递的值为数字、布尔值、字符串时,this会指向这些基本类型的包装对象Number、Boolean、String。

4、传递一个对象时,函数中的this则指向传递的这个对象。

call()和apply()的区别

call()和apply()方法都可以将实参在对象之后依次传递,但是apply()方法需要将实参封装到一个数组中统一传递(即使只有实参只有一个,也要放到数组中)。##### call, apply与bind的差别他们俩之间的差别在于参数的区别,call和aplly的第一个参数都是要改变上下文的对象,而call从第二个参数开始以参数列表的形式展现,apply则是把除了改变上下文对象的参数放在一个数组里面作为它的第二个参数。

比如针对下面这样的代码:

var persion1 = {
    name: "小王",
    gender: "男",
    age: 24,
    say: function (school, grade) {
        alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);
    }
}
var person2 = {
    name: "小红",
    gender: "女",
    age: 18
}

如果是通过call的参数进行传参,是这样的:

persion1.say.call(persion2, "实验小学", "六年级");

如果是通过apply的参数进行传参,是这样的:

persion1.say.apply(persion2, ["实验小学", "六年级"]);

看到区别了吗,call后面的实参与say方法中是一一对应的,而apply传实参时,要封装成一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。

call()和apply()的作用

改变this的指向

实现继承。Father.call(this)

bind()

都能改变this的指向

call()/apply()是立即调用函数

bind()是将函数返回,因此后面还需要加()才能调用。

bind()传参的方式与call()相同。