浅谈JS的call、apply和bind

前言

call、apply、bind 的作用是改变函数运行时 this 的指向

先搞懂 this，自己初学的时候对 this 是一脸懵逼的 o((⊙﹏⊙))o...

this

总结了一下，this 实际上是在函数被调用时发生的绑定，它指向什么地方完全取决于函数在哪里被调用。但这里有个列外，构造函数的 this 和 es6 的箭头函数的 this 又有所不同。

1.函数调用

 # Window
function print() {
  console.log(this);
}

print(); // 等价于window.print()

2.对象属性调用

谁调用，this 指向谁

const obj = {
  name: 'outside',
  print() {
    console.log(this.name);
  },
  extend: {
    name: 'inside',
    print() {
      console.log(this.name);
    },
  },
};

obj.print(); // outside
obj.extend.print(); // inside

第二个输出这里可能有点难理解，记住谁调用指向谁，是 extend 调用的，指向 extend

3.构造函数

构造函数的 this 将指向 new 出来的对象，在该例子中即 man

我们先看下面的代码：

class Man {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  print() {
    console.log(this.name, this.age);
  }
  extend = {
    name: 'inside',
    age: 99,
    print() {
      console.log(this.name, this.age);
    },
  };
}

const man = new Man('小明', 18);
console.log(man.print()); // 小明 18
console.log(man.extend.print()); // inside 99

第二个输出是不是有点奇怪，是的，我们打印一下 man 对象，发现其跟上一个例子情况是一样的,记住只是构造函数的 this 指向实例对象

4.箭头函数

箭头函数和匿名函数很像，不过箭头函数没有 this，箭头头函数的 this 是继承父执行上下文里面的 this

我们改写一下 3 中的 extend

class Man {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  print() {
    console.log(this.name, this.age);
  }
  extend = {
    name: 'inside',
    age: 99,
    print: () => {
      console.log(this.name, this.age);
    },
    deep_pro: {
      name: 'deep_insise',
      age: 9999,
      print: () => {
        console.log(this); //  Man {extend: {…}, name: "小明", age: 18}
        console.log(this.name, this.age);
      },
    }
  };
}

const man = new Man('小明', 18);
console.log(man.print()); // 小明 18
console.log(man.extend.print()); // 小明 18
console.log(man.extend.deep_pro.print()); // 小明 18

call、apply、bind

上面说了一大堆，搞懂了 this，回到正题

call、apply、bind 的作用是改变函数运行时 this 的指向

• call、apply 作用是执行一个方法并改变 this，他们的区别是传入参数的方式不同
• bind 和前面两者不同的是只是返回一个改变了 this 的函数，需手动执行它

call 和 apply 容易混淆问题，我是这么记忆的：call 可以想象为打电话，打电话是一个一个接着打的不可能同时多个，所以 call 是传多个参数，apply 直接一个数组。

调用：

func.call(obj, arg1, arg2, ...);
func.apply(obj, [arg1, arg2, ...]);

我们试着用 call、apply、bind 改变 this：

class Caculate {
  constructor(name) {
    this.name = name;
  }
  add(a, b) {
    return this.name + a + b;
  }
}

const demo = new Caculate('构造函数:');
console.log(demo.add('hello', ' world')); // 构造函数:hello world

1.call

console.log(demo.add.call({ name: 'call改变:' }, 'hello', ' call')); // call改变:hello call

2.apply

console.log(demo.add.apply({ name: 'apply改变:' }, ['hello', ' apply'])); // apply改变:hello apply

3.bind

bind 和 call 一样，参数是一个一个传的

const bind_ = demo.add.bind({ name: 'bind改变:' }, 'hello', ' bind');
console.log(bind_()); // "bind改变:hello bind"

看到这里，相信你已经理解了，上面解释 this 的时候函数调用有两种形式：

print(); // 1.函数调用
man.extend.print(); // 2.对象属性调用

实际上我们可以把它用 call 重写为：

print.call(window);
man.extend.print.call(man.extend);

实现简单的 call、apply、bind

我们也可以动手实现简单的 call、apply、bind，有助于加深理解

call：

Function.prototype.call_ = function (context, ...args) {
  let context_ = context || window;
  // 让 fn 的上下文为 context
  context_.fn = this;
  const result = context_.fn(...args);
  delete context_.fn;
  return result;
};

apply：

Function.prototype.apply_ = function (context, args) {
  let context_ = context || window;
  // 让 fn 的上下文为 context
  context_.fn = this;
  let param_ = args || [];
  const result = context_.fn(param_);
  delete context_.fn;
  return result;
};

bind：

Function.prototype.bind_ = function (context, ...args) {
  let fn = this;
  return function () {
    fn.apply(context, args.concat(...arguments));
  };
};

扩展

上面讲解 this 的时候讲到 this 实际上是在函数被调用时发生的绑定，它指向什么地方完全取决于函数在哪里被调用，但又有特例: 箭头函数和构造函数

其实我们可以用 bind 实现箭头函数,照搬上面的例子:

class Man {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  print() {
    console.log(this.name, this.age);
  }
  extend = {
    name: 'inside',
    age: 99,
    print: function print() {
      console.log(this.name, this.age);
    }.bind(this), // 手动绑定this
  };
}

const man = new Man('小明', 18);
console.log(man.print()); // 小明 18
console.log(man.extend.print()); 小明 18

自己手写一个 new 操作符方法：

function Factory(fn, ...args) {
  const target = Object.create(fn.prototype);
  const res = fn.apply(target, args);
  return res instanceof Object ? res : target;
}

以上纯手敲 + 个人理解，如有不足，欢迎指出~

---

END