JavaScript 高级

01.call, apply 和 bind 的区别

call 的使用方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//#region call
// 定义一个对象
let character = {
  name: "派蒙",
  weapon: [],
  // 得到一把武器
  getWeapon: function (weapon, weapon2) {
    this.weapon = [weapon, weapon2];
  },
};

let character2 = {
  name: "行秋",
  weapon: [],
};

console.log(character);
// 调用方法获取了一把护摩
character.getWeapon("护摩", "薙草之稻光");
console.log(character);

// character2也想得到一把武器,但是没有这个方法获得.character1表示可以把得到武器的方法借给character2使用
console.log(character2);
// character开始 借给character2
character.getWeapon.call(character2, "绿剑", "风鹰剑");
console.log(character2);
//#endregion

apply 的使用方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//#region apply
// 定义一个对象
let character = {
  name: "派蒙",
  weapon: [],
  // 得到一把武器
  getWeapon: function (weapon, weapon2) {
    this.weapon = [weapon, weapon2];
  },
};

let character2 = {
  name: "行秋",
  weapon: [],
};

console.log(character);
// 调用方法获取了一把护摩
character.getWeapon("护摩", "薙草之稻光");
console.log(character);

// character2也想得到一把武器,但是没有这个方法获得.character1表示可以把得到武器的方法借给character2使用
console.log(character2);
// character开始 借给character2
// call 换成了 apply 不过是后面的参数是一个数组罢了
character.getWeapon.apply(character2, ["绿剑", "风鹰剑"]);
console.log(character2);
//#endregion

bind 的使用方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//#region bind
// 定义一个对象
let character = {
  name: "派蒙",
  weapon: [],
  // 得到一把武器
  getWeapon: function (weapon, weapon2) {
    this.weapon = [weapon, weapon2];
  },
};

let character2 = {
  name: "行秋",
  weapon: [],
};

console.log(character);
// 调用方法获取了一把护摩
character.getWeapon("护摩", "薙草之稻光");
console.log(character);

// character2也想得到一把武器,但是没有这个方法获得.character1表示可以把得到武器的方法借给character2使用
console.log(character2);
// character开始 借给character2
// 不过 character2 不想马上得到武器而是等到有需要的时候再去得到
let result = character.getWeapon.bind(character2, "绿剑", "风鹰剑");
// 有需要的时候再去得到
result();
console.log(character2);
//#endregion

总结

  • call，apply 和 bind 都有改变 this 指向的作用
  • call 和 apply 的区别不过是 call() 方法接受的是一个参数列表，apply() 方法接受的是一个包含多个参数的数组
  • bind 与其他两个的区别是不会立即执行，会返回一个函数在需要的时候再执行