JavaScript之bind、apply、call

今天说说JavaScript的bind、apply、call

一、三者相同之处

• 都是用来改变函数的this对象的指向的。
• 第一个参数都是this要指向的对象。
• 都可以利用后续参数传参。

二、三者不同之处

• 下面代码传递一个参数

var xw = {
  name: "小王",
  gender: "男",
  age: 24,
  say: function () {
    console.log(this.name + " , " + this.gender + " ,今年" + this.age);
  },
};
var xh = {
  name: "小红",
  gender: "女",
  age: 18,
};
xw.say();  //小王 , 男 ,今年24
xw.say.call(xh);  //小红 , 女 ,今年18
xw.say.apply(xh);  //小红 , 女 ,今年18
xw.say.bind(xh)();  //小红 , 女 ,今年18

        如果直接写xw.say.bind(xh)是不会有任何结果的，看到区别了吗？call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以。

 

• 那么call和apply有什么区别呢？我们把例子稍微改写一下。

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

xw.say.call(xh, "实验小学", "六年级");
xw.say.apply(xh, ["实验小学", "六年级郑州牛皮癣医院"]);
xw.say.bind(xh, "实验小学", "六年级")();

            看到区别了吗，call后面的参数与say方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。
 

备注：

    使用call的性能会比apply的更优，详细的话可以自行去了解