call、bind、apply:用于改变this的指向,是函数的方法。
区别:call、apply改变this的指向之后会自动调用函数,bind改变指向后会返回一个函数,不会自动调用。

样例一:

  1. function dog() {
  2. console.log(this.name);
  3. }
  4. dog(); // undefined
  5. var item = {
  6. name: 'ben'
  7. }
  8. dog.call(item) // ben

样例二:

  1. let dog = {
  2. name: '旺财',
  3. sayName() {
  4. console.log('我是', this.name);
  5. },
  6. eat(food1, food2) {
  7. console.log('我喜欢吃', food1, food2);
  8. }
  9. }
  10. let cat = {
  11. name: '喵喵'
  12. }
  13. dog.sayName.call(cat)
  14. dog.eat.call(cat, '鱼', '肉')

样例三:
apply的使用用法和call一样,call的第二个参数开始,就是被调用函数的参数列表,依次往后排开即可。
apply的使用,第一个参数是要改变的this指向是谁,第二个参数是个数组,将被调用函数的参数列表放入到apply的参数数组中即可。

样例四:
bind:传参的形式和call一样,使用方式也一样,call会调用这个函数,但是bind不会调用函数,只会将改变this指向的函数返回过来。
如何使用?只需要用一个参数接收bind返回的函数,然后接下来调用代码即可实现和call一样的功能。

总结:

  1. bind、apply、call都是函数上的方法,用于改变调用函数的this指向。
  2. call、apply在改变this指向的时候会自动调用函数,bind不会自动调用函数,而是返回一个改变this指向的函数。
  3. 当函数需要传参时,call、bind、apply的第一个参数均为需要改变的this指向对象、call、bind的第二个参数开始,后面的参数对应上被调用函数的参数,依次排开;apply的第二个参数是被调用函数的参数数组。

使用

实现继承、多重继承。

  1. // 构造函数Animal
  2. function Animal() {
  3. this.eat = function () {
  4. console.log('asdasdasd');
  5. }
  6. }
  7. // 构造函数Flay
  8. function Flay() {
  9. this.fly = function () {
  10. console.log('fly');
  11. }
  12. }
  13. // 构造函数
  14. // 现在让cat继承Flay and Animal
  15. function Cat() {
  16. /**
  17. * Cat构造函数中,this->Cat
  18. * Animal.this -> Cat
  19. * 通过调用Animal的构造函数,改变了Animal中的this指向
  20. * 则this -> Cat this.eat -> Cat.eat
  21. * 可以实现多重继承
  22. */
  23. Flay.call(this);
  24. Animal.call(this);
  25. }
  26. let cat = new Cat();
  27. cat.eat();
  28. cat.fly()