JavaScript中call、apply、bind的使用

作用

call、apply、bind都是用来重定义this这个对象的。

1
var name = '小明';
2
var age = '20';
3
var obj = {
4
  name:'小红',
5
  objAge:this.age,
6
  foo:function() {
7
    console.log(this.name + '年龄' + this.age);
8
  }
9
}
10
var data = {
11
  name:'小强',
12
  age:22
13
}
14
15
obj.foo.call(data);   // 小强年龄22
16
obj.foo.apply(data);  // 小强年龄22
17
let f = obj.foo.bind(data);  // ƒ () {
18
                             //       console.log(this.name + '年龄' + this.age);
19
                             //     }
20
f();                  // 小强年龄22

它们之间主要的差异：
call()的参数是一个参数列表由逗号分隔的，返回值是该函数的返回值。如果没有返回值，则返回undefined。 obj.foo.call(data,1,2….);
apply()的所有参数都是放在一个数组内的，与call()方法类似，区别是call()接受的是参数列表，而applu()接受的是一个参数数组。 obj.foo.apply(data,[1,2,…]);
bind()的返回是函数，参数和call()一样

例子

1
let obj1 = {
2
  name:'obj1',
3
  print:function() {
4
    return () => console.log(this.name)
5
  }
6
}
7
let obj2 = {name:'obj2'}
8
obj1.print()();              // obj1
9
obj1.print().call(obj2);     // obj1
10
obj1.print.call(obj2)();     // obj2