如何理解call, call.call, call.call.call？你能搞懂这疯狂的call吗？

2023-11-04 16:02:03

如今，call已成为众多开发人员必备的工具。无论你是前端、后端还是全栈工程师，掌握call都将使你具备更全面的技术视野并提升你的编程能力。

call的语法

call方法的语法很简单：

call(thisArg, ...args);

thisArg：指定函数的调用上下文，即this在函数内部引用的对象。
...args：要传递给函数的参数列表。

call的用法

call方法可以应用于任何函数，包括内置函数、自定义函数以及构造函数。

调用函数 ：

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet.call(null, "John"); // 输出：Hello, John!

更改函数的调用上下文 ：

const person = {
  name: "John",
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet.call({ name: "Jane" }); // 输出：Hello, my name is Jane.

使用this关键字访问对象属性 ：

const obj = {
  name: "John",
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

const boundGreet = obj.greet.bind(obj);
boundGreet(); // 输出：Hello, my name is John.

call的应用场景

call方法在实际开发中非常有用，以下是一些常见的应用场景：

模拟继承 ：call方法可以实现函数的继承，子类可以继承父类的方法和属性。

function Parent(name) {
  this.name = name;
}

Parent.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

function Child(name, age) {
  Parent.call(this, name); // 调用Parent构造函数，并设置this为Child实例
  this.age = age;
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

const child = new Child("John", 20);
child.greet(); // 输出：Hello, my name is John.

绑定事件处理函数 ：call方法可以绑定事件处理函数，使事件处理函数在特定的上下文下运行。

const button = document.getElementById("btn");

button.addEventListener("click", function() {
  console.log(this); // 输出：<button id="btn">...</button>
});

button.addEventListener("click", function() {
  console.log(this.id); // 输出：btn
}.bind(button));

疯狂的call

call方法还有许多有趣的应用，比如实现函数柯里化、延迟执行、创建私有方法等。这些应用都离不开对call方法的深入理解和灵活运用。

函数柯里化 ：

function curry(fn) {
  return function(...args) {
    if (args.length >= fn.length) {
      return fn(...args);
    } else {
      return curry(fn.bind(null, ...args));
    }
  };
}

const add = (a, b, c) => a + b + c;
const curriedAdd = curry(add);

const result = curriedAdd(1)(2)(3);
console.log(result); // 输出：6

延迟执行 ：

function delay(fn, ms) {
  return function(...args) {
    setTimeout(() => {
      fn.call(this, ...args);
    }, ms);
  };
}

const greet = (name) => console.log(`Hello, ${name}!`);
const delayedGreet = delay(greet, 2000);

delayedGreet("John"); // 2秒后输出：Hello, John!

创建私有方法 ：

function Person(name) {
  this.name = name;

  // 私有方法
  const greet = function() {
    console.log(`Hello, my name is ${this.name}.`);
  };

  // 公有方法
  this.sayHello = function() {
    greet.call(this);
  };
}

const person = new Person("John");
person.sayHello(); // 输出：Hello, my name is John.