三大妙招，手写实现apply，call，bind

前言

手写实现apply、call、bind在技术面试中经常被问到。了解这三个函数的底层原理有助于更深入理解JavaScript的运行机制，提升编程能力。本文将从原理、应用和技巧三个方面，带领大家全面掌握这三个函数。

原理剖析

1. apply

apply方法允许将一个函数绑定到一个指定的对象上，并传入一个参数数组来调用该函数。该对象将作为函数的this值，而参数数组将作为函数的参数。其语法如下：

Function.prototype.apply(thisArg, [args])

例如：

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

person.greet(); // 输出：Hello, my name is John Doe

const anotherPerson = {
    name: "Jane Smith"
}

person.greet.apply(anotherPerson); // 输出：Hello, my name is Jane Smith

2. call

call方法与apply类似，但它接受参数列表而不是数组。其语法如下：

Function.prototype.call(thisArg, arg1, arg2, ..., argN)

例如：

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

person.greet("Hello"); // 输出：Hello, my name is John Doe

const anotherPerson = {
    name: "Jane Smith"
}

person.greet.call(anotherPerson, "Hi"); // 输出：Hi, my name is Jane Smith

3. bind

bind方法创建并返回一个新的函数，该函数在调用时将指定的对象作为this值。其语法如下：

Function.prototype.bind(thisArg, ...args)

例如：

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

const boundGreet = person.greet.bind(person);

boundGreet(); // 输出：Hello, my name is John Doe

应用场景

apply、call、bind在各种场景中都有广泛的应用，以下是几个常见的例子：

1. 改变函数的执行上下文

apply、call、bind可以用来改变函数的执行上下文。例如，我们可以使用apply或call方法将一个函数绑定到另一个对象上，并在该对象上调用该函数，从而改变函数的this值。

2. 传递参数

apply方法可以将一个参数数组作为参数传递给函数。这在需要将多个参数传递给函数时非常方便，尤其是在函数的参数数量不定时。

3. 创建新的函数

bind方法可以创建一个新的函数，该函数在调用时将指定的对象作为this值。这在创建回调函数或事件处理程序时非常有用。

技巧详解

1. 使用箭头函数

箭头函数没有自己的this值，所以当使用箭头函数时，apply、call、bind方法将忽略this值。这在需要将函数绑定到一个特定的this值时需要注意。

2. 使用bind()创建新的构造函数

我们可以使用bind()方法来创建新的构造函数。例如：

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

const john = new Person("John Doe").bind(null);

john.name // 输出：John Doe

结语

apply、call、bind是JavaScript中的三个重要函数，可以用来改变函数的执行上下文、传递参数和创建新的函数。理解这些函数的底层原理和应用场景，可以帮助我们写出更灵活、更健壮的代码。