js 对象绑定

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第42天，点击查看活动详情

前言

在上一篇文章中说到this 指向的问题，其中还提到如果遇到 call、apply 绑定时this指向的是指定的对象。那么指定的是什么样的对象还是会有区别的，但是基本都是指定的是调用者。在 JavaScript 中，函数在定义时和运行时，其上下文 this 有时候需要作相应的变化。而 Function 自带的三个方法 bind、apply、 call就是为了改变函数中 this 的指向而存在的。

call

call(thisArgs [,args...])

call() 方法参数有两个：

• thisArgs 是函数在运行期的调用者（即是 this ）。

  • 当 thisArgs 参数不传或者传null,undefined， this 指向 window 对象；
  • 当是另一个函数的函数名，this 指向该函数；
  • 当是字符串、数值或布尔类型等基础类型， this 指向其对应的包装对象，如 String、Number、Boolean；
  • 当是一个对象， this 指向这个对象

• 参数列表是会被传入调用函数中。

使用场景：用来实现继承

apply

apply(thisArgs [,args[]])

call 方法第二个参数和 apply方法不同，第一个参数和call 一样，第二个参数必须是数组。

使用场景：和数组有关系

var o = {
  name: 'andy'
}
 function fn(a, b) {
      console.log(this);
      console.log(a+b)
};
fn()// 此时的this指向的是window
fn.apply(o,[1,2])//此时的this指向的是对象o,参数使用数组传递

bind

bind(thisArgs [,args...])

bind 是 ES5新增的方法，传参和call方法相同，但是bind不会执行对应的函数，只是返回函数的引用，这和call和apply方法不同，它们会自动执行。

使用场景：事件的绑定，只改变 this 执行而不执行函数。

var person ={
  name :'tom'
}
function sayHi(a, b) {
  console.log(this);
  console.log(a + b);
};
//this指向的是对象person 参数使用逗号隔开
var f_say = sayHi.bind(person, 1, 2); //此处的f是bind返回的新函数
f_say(); // 只有重新调用才会执行

所以在使用 call、apply bind 时也是会改变的 this 对象的指向。他们的区别：

1. 都是绑定对象，都将构造方法当作普通方法调用

2. 均传递是一个this域对象、均可传递参数

3、不同点：call直接调用，bind返回一个新函数，需手动调用