JS中apply、call、bind的区别

2018-11-16  本文已影响0人  史梦辰

相同点

  1. call、apply、bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向,扩充函数赖以运行的作用域。

  2. 三者第一个参数都是this要指向的对象

  3. 三者都可以利用后续参数传参

不同点

  1. bind返回的是函数,便于后续调用;apply,call则是立即调用的

  2. apply和call的区别是apply第二个参数是数组,可以Array的实例,也可以是arguments对象;call的其余参数都是直接传递给函数。

举个栗子:

window.color = "red";
var o = {
    color: "blue"
};

function sayColor() {
    console.log(this.color);
}

sayColor(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue
sayColor.apply(this); //red
sayColor.apply(o); //blue

window.firstName = "Li";

function sayName(lastName) {
    console.log(this.firstName + lastName);
}

var a = {
    firstName: "Zhang"
};
sayName.call(this, "Hua"); //LiHua
sayName.apply(this, ["Hua"]); //LiHua
sayName.call(a, "Hua"); //ZhangHua
sayName.apply(a, ["Hua"]); //ZhangHua

var objectSayName = sayName.bind(a, "Hua");
objectSayName(); //ZhangHua

call,apply在继承中的使用

在借用构造函数(constructor stealing)技术中,通过使用apply()和call()方法在子类构造函数的内部调用超类构造函数

举个栗子:

function SuperType() {
    this.colors = ["red", "blue", "green"];
}

function SubType() {
    //继承了SuperType
    SuperType.apply(this);
}

var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors); //"red,blue,green,black"

var instance2 = new SubType();
console.log(instance2.colors); //"red,blue,green"

/*实际上是在新创建的SubType实例的环境下
调用SuperType构造函数,这样,
SubType的每个实例都会有自己的colors属性副本。*/
上一篇下一篇

猜你喜欢

热点阅读