分不清apply,bind,call?看这篇文章就够了

我们来深入地梳理一下函数、方法、对象，以及它们之间纠缠的根源------this。这不仅仅是记住几个概念，而是理解JavaScript（以及很多面向对象语言）在运行时，代码是如何被组织、调用和执行的。

首先，我们需要建立一个核心的、动态的世界观：代码是静态的文本，而对象是存在于内存中的、活的"事物"。 函数则是一段可以执行的、静态的代码和动态的执行环境的结合体。

1. 对象：数据的容器与行为的宿主

对象，从本质上讲，是在内存中开辟的一块区域，用来存放一组相关联的数据 （我们称之为属性）和操作这些数据的行为（我们称之为方法）。

可以把对象想象成一个"小王国"。这个王国里有很多"资源"（属性），比如 name: 'Alice', age: 30。同时，这个王国也有一些"法令"或"工作流程"（方法），比如 sayHello()。当这个王国要执行 sayHello 这个工作流程时，它需要知道"我"是谁？它需要访问自己的资源 name，才能说出"你好，我是Alice"。

所以，对象存在的核心意义之一，就是为行为（函数）提供一个执行的上下文（Context） 。这个"上下文"就是 this 最终指向的东西------即当前这个活跃的"小王国"本身。

2. 函数：独立的执行代码单元

函数，本质上也是一段可执行的代码。但它不像方法那样，生来就"属于"某个对象。函数是独立的。你可以把它想象成一个"万能工具"或一份"公开的蓝图"。

这份蓝图（函数体）本身描述了要做什么：function greet() { console.log('Hello') }。但在它真正被执行（被调用）之前，它不知道自己属于哪个"王国"。它是自由的、无上下文的。

当你在全局环境中调用它，它就暂时地在全局"王国"里执行。你可以把这个自由的函数，通过赋值的方式，"借给"一个对象，让它成为那个对象的一个属性。从这一刻起，它在这个对象上，就扮演了"方法"的角色。

3. 方法：函数在对象中的角色

所以，方法并不是一种特殊的函数，而是函数的一种"角色"或"状态"。

当你通过一个对象去调用它拥有的函数属性时，比如 alice.sayHello()，这个函数就临时获得了 alice 这个对象作为它的执行上下文。此刻，它就不再是一个孤立的"万能工具"，而是为 alice 王国服务的、有归属的"工作流程"。

关键点来了：函数本身并没有变，变的是它被调用的方式。 同一个函数，完全可以一会儿作为独立函数被调用，一会儿作为某个对象的方法被调用。它的行为会因为调用方式的不同而产生巨大的差异，这个差异的核心，就是 this。

4. this：动态的执行上下文指针

this 就是连接函数、方法和对象的那根"命脉"。它是一个在函数被调用时才确定下来的指针，指向调用该函数的那个对象（即当前执行的上下文）。

• 当函数作为独立函数被调用时： greet()。在非严格模式下，this 会指向全局对象（浏览器里的 window）。这就像这个函数在全局王国里临时客串了一下，但它找不到自己的属性，很容易出错。在严格模式下，this 则是 undefined，明确告诉你，它没有合法的上下文。

• 当函数作为对象的方法被调用时： alice.sayHello()。this 就会指向 alice 这个对象。sayHello 函数体里的 this.name，就自然而然地取到了 alice.name 的值。这就是"方法"能够操作"所属对象"数据的根本原理。

• 当函数作为构造函数被调用时： new Person('Bob')。一个全新的、空的对象会在内存中被创建出来，然后这个函数被调用，并且函数体内的 this 会指向这个即将被创建出来的新对象 。函数通过 this.name = name 这样的方式，给这个新对象初始化属性。最后，这个新对象被返回。这个过程清晰地展示了函数如何作为"蓝图"来创造新的对象"王国"。

• 通过 .call、.apply 或 .bind 强制指定 this： 这是最灵活的方式。你可以强行把一个函数"塞"进任何一个对象里去执行。比如 greet.call(alice)，就是把 greet 这个独立函数，临时借给 alice 对象，让它以 alice 为上下文去执行。这完美地证明了函数和方法的本质关系------函数只是一个代码块，而通过控制 this，我们可以动态地决定它"属于"谁。

5. 内在关联：

把这些点串联起来，我们就能看到一个完整的逻辑链条：

1. 存储与组织： 我们用对象来组织数据和逻辑。对象的属性存储数据，而它的方法则定义了对这些数据的操作。
2. 定义与复用： 这些"方法"本质上就是函数。我们在对象外部或内部定义函数，目的是为了复用代码逻辑。函数本身不依赖于任何对象。
3. 绑定与执行： 当程序运行时，我们需要把函数和对象动态地结合起来。这个结合点就是函数调用 。调用方式（独立调用、方法调用、构造调用、间接调用）决定了函数体内的 this 指针指向哪个对象。
4. 上下文的意义： this 指向的对象，为函数的执行提供了"上下文"数据。方法之所以能操作其所属对象的属性，就是因为 this 正确地指向了那个对象。

6. bind、apply、call：手动控制this

理解了this是动态绑定的之后，我们就掌握了一个强大的能力------我们可以主动干预这个绑定过程 。JavaScript提供了三个方法：call、apply和bind，它们都存在于函数对象的原型上（Function.prototype），这意味着每一个函数都天生拥有这三个方法。

这三个方法的核心作用完全一致：让你手动指定函数执行时的this指向。但它们在使用方式和执行时机上有细微的差别，理解这些差别能让你在不同的场景下灵活运用。

6.1 执行并传参：call 与 apply

call和apply都是立即执行 函数的方法。它们的作用完全一样，唯一的区别在于传参方式不同。

call：参数列表形式

function greet(greeting, punctuation) {
    console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Alice' };

// call 接收参数列表，第一个参数是 this 的指向，后面的参数依次传给函数
greet.call(person, 'Hello', '!'); 
// 输出：Hello, Alice!

apply：参数数组形式

// apply 接收两个参数：第一个是 this 的指向，第二个是参数数组
greet.apply(person, ['Hi', '!!']); 
// 输出：Hi, Alice!!

为什么需要两种形式？

这源于JavaScript的灵活性。call适用于你明确知道函数需要几个参数的情况，写起来更直观。apply的强大之处在于，它可以配合数组使用，特别是当参数数量不确定时，或者你有一个现成的参数数组时。

一个经典的例子：求数组中的最大值

const numbers = [5, 6, 2, 3, 7];

// Math.max 接收参数列表，不接收数组
const max1 = Math.max(5, 6, 2, 3, 7); // 正常用法

// 但如果我们有一个数组呢？用 apply 可以完美解决
const max2 = Math.max.apply(null, numbers); 
// 这里第一个参数传 null，是因为 Math.max 不依赖 this
console.log(max2); // 7

// 现在也可以用扩展运算符实现类似效果
const max3 = Math.max(...numbers);

6.2 绑定并等待：bind

bind和前两者有本质区别。bind不是立即执行函数，而是返回一个新的函数 ，这个新函数的this被永久地绑定到了你指定的对象上。

function greet(greeting, punctuation) {
    console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Alice' };

// bind 返回一个新函数，this 被绑定到 person
const greetAlice = greet.bind(person, 'Hello');

// 现在可以在任何时候调用这个新函数
greetAlice('!'); // 输出：Hello, Alice!
greetAlice('!!'); // 输出：Hello, Alice!!

注意上面的例子中，我们不仅绑定了this，还预置了第一个参数'Hello'。这叫做**柯里化（Currying）**的一种形式------固定某些参数，生成一个参数更少的新函数。

bind的核心特征：

1. 永久绑定 ：一旦用bind绑定了this，即使对这个新函数再次使用call、apply或bind，也无法改变它的this指向。这被称为"硬绑定"。

const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };

const greetPerson1 = greet.bind(person1);

// 尝试用 call 改变 this，不会生效
greetPerson1.call(person2, 'Hi', '!'); // 仍然输出：Hi, Alice!

2. 延迟执行 ：bind生成的函数可以留到需要的时候再调用，这在实际开发中非常有用，特别是在事件处理、定时器、回调函数等场景中。

6.3 实际应用场景：为什么要手动控制this？

理解了这三个工具怎么用，更重要的是理解什么时候需要用它们。

场景一：丢失的this（最经典的场景）

const person = {
    name: 'Alice',
    greet: function() {
        console.log('Hello, ' + this.name);
    }
};

// 正常调用
person.greet(); // Hello, Alice

// 把方法赋值给一个变量
const greetFunction = person.greet;
greetFunction(); // Hello, undefined （或者报错）

为什么会这样？因为greetFunction现在是独立函数调用，this指向了全局对象。解决方案就是用bind固定this：

const boundGreet = person.greet.bind(person);
boundGreet(); // Hello, Alice

在React类组件中，你经常看到this.handleClick = this.handleClick.bind(this)，正是为了解决这个问题。

场景二：借用方法

有时候一个对象没有某个方法，但另一个对象有。我们可以借用过来用。

const alice = {
    name: 'Alice',
    friends: ['Bob', 'Charlie']
};

const bob = {
    name: 'Bob',
    friends: ['Alice', 'David']
};

// 定义一个通用的打印方法（当然也可以定义在原型上）
function printFriends() {
    this.friends.forEach(friend => {
        console.log(this.name + ' knows ' + friend);
    });
}

// 让 alice 借用这个方法
printFriends.call(alice);
// Alice knows Bob
// Alice knows Charlie

// 让 bob 借用
printFriends.call(bob);
// Bob knows Alice
// Bob knows David

场景三：类数组对象转数组

DOM操作返回的NodeList、函数内部的arguments都是类数组对象，它们有length属性和索引，但没有数组的方法。我们可以借用数组的方法。

function listArguments() {
    // arguments 是类数组，没有 forEach 方法
    // 但我们可以借用数组的 forEach
    Array.prototype.forEach.call(arguments, arg => {
        console.log(arg);
    });
    
    // 或者转成真正的数组
    const argsArray = Array.prototype.slice.call(arguments);
    // 现代写法：const argsArray = Array.from(arguments);
}

listArguments(1, 2, 3); // 输出 1, 2, 3

场景四：保存上下文（配合箭头函数）

在异步回调中，我们常常需要保存外层的this。在箭头函数出现之前，常用的手法是var self = this，然后用bind。

function Timer() {
    this.seconds = 0;
    
    // 传统写法：用 bind 绑定
    setInterval(function() {
        this.seconds++;
        console.log(this.seconds);
    }.bind(this), 1000);
    
    // 箭头函数写法（箭头函数没有自己的 this，会继承外层）
    setInterval(() => {
        this.seconds++;
        console.log(this.seconds);
    }, 1000);
}

6.4 总结三者的核心区别

方法	执行时机	返回值	参数传递	典型用途
call	立即执行	函数执行结果	参数列表	需要立即调用，参数数量明确
apply	立即执行	函数执行结果	参数数组	需要立即调用，参数是数组形式
bind	延迟执行	新函数	参数列表（可分批）	需要固定this以便后续调用

所以 ： 想立即调用 并指定this，用call或apply（区别在于传参方式），想创建一个新函数 ，永久绑定this到某个对象，以便以后调用，用bind