深入解析 JS 中的 this、call、apply 和 bind

qq_39279448

于 2025-01-03 10:11:04 发布

阅读量833

点赞数 15

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_39279448/article/details/144902943

版权

在 JavaScript 中，this、call、apply 和 bind 是理解函数调用行为、上下文管理以及函数式编程的核心关键点以下通过底层机制剖析、实际案例分析 和 常见问题排查，深入理解概念。

一、`this` 的本质：运行时动态绑定

this 的值并不是在函数定义时决定的，而是在运行时根据调用者的上下文动态绑定的。其值的确定依赖以下因素：

1.1 `this` 的四种绑定规则

默认绑定（Default Binding）
在非严格模式下，this 默认指向全局对象；而在严格模式下，this 是 undefined。

function foo() {
    console.log(this);
}

foo(); // 非严格模式下输出 Window 或 global，严格模式下输出 undefined

隐式绑定（Implicit Binding）
当函数作为对象的方法调用时，this 会绑定到调用该方法的对象。

const obj = {
    name: "Alice",
    greet: function() {
        console.log(this.name);
    }
};

obj.greet(); // 输出 "Alice"

但是，隐式绑定丢失 是常见问题之一。当方法作为回调或赋值给另一个变量时，this 会恢复为默认绑定。

const greet = obj.greet;
greet(); // 输出 undefined 或抛出错误，取决于模式

显式绑定（Explicit Binding）
使用 call、apply 或 bind 方法可以显式绑定 this。

const obj = { name: "Bob" };

function greet() {
    console.log(this.name);
}

greet.call(obj); // 输出 "Bob"

构造函数绑定（New Binding）
当使用 new 调用一个函数时，this 会绑定到新创建的对象。

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

const person = new Person("Charlie");
console.log(person.name); // 输出 "Charlie"

1.2 箭头函数中的 `this`

箭头函数没有自己的 this，它会继承定义时的外部上下文的 this 值，且无法通过 call、apply 或 bind 修改。

const obj = {
    name: "David",
    greet: () => {
        console.log(this.name); // `this` 指向外层作用域中的 `this`
    }
};

obj.greet(); // 输出 undefined

1.3 事件处理函数中的 `this`

在 HTML 事件处理属性中，this 指向绑定事件的 HTML 元素。在 JavaScript 中使用 addEventListener 绑定事件时，this 也指向触发事件的元素。

<!DOCTYPE html>
<html>

<body>
    <button id="myButton">Click me</button>
    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            console.log(this === document.getElementById('myButton')); // 输出：true，this 指向按钮元素
        });
    </script>
</body>

</html>

二、`call`、`apply` 和 `bind` 的差异与底层机制

2.1 `call` 和 `apply` 的核心差异

call：将参数作为逗号分隔的列表传递。
apply：将参数作为数组传递。

两者在功能上完全等价，仅参数传递形式不同。它们通过显式设置函数执行时的 this，同时立即调用该函数。

function greet(age, job) {
    console.log(`Name: ${this.name}, Age: ${age}, Job: ${job}`);
}

const person = { name: "Eve" };

greet.call(person, 25, "Engineer"); // 输出 Name: Eve, Age: 25, Job: Engineer
greet.apply(person, [30, "Doctor"]); // 输出 Name: Eve, Age: 30, Job: Doctor

方法	参数形式	执行时机	返回值
`call`	依次传入参数	立即执行	函数的返回值
`apply`	传入一个数组作为参数	立即执行	函数的返回值
`bind`	传入 `this` 和参数，返回一个新函数	不立即执行，返回一个新函数	新函数

底层实现原理：
在 ECMAScript 规范中，call 和 apply 实际通过修改函数执行时的上下文（this）来实现：

将函数临时挂载到目标对象。
调用该函数。
执行后删除临时函数。

以下是类似原理的实现示例：

Function.prototype.myCall = function(thisArg, ...args) {
    thisArg = thisArg || globalThis; // 默认绑定全局对象
    const fnSymbol = Symbol(); // 避免覆盖原有属性
    thisArg[fnSymbol] = this; // 将当前函数绑定到对象
    const result = thisArg[fnSymbol](...args); // 调用函数
    delete thisArg[fnSymbol]; // 删除临时属性
    return result;
};

2.2 `bind` 的深度解析

bind 和 call/apply 的区别在于：

bind 返回一个新的函数，并不会立即调用。
新的函数可以多次调用，且 this 永远固定为绑定的值。

function greet(age, job) {
    console.log(`Name: ${this.name}, Age: ${age}, Job: ${job}`);
}

const person = { name: "Grace" };
const boundGreet = greet.bind(person, 35, "Teacher");

boundGreet(); // 输出 Name: Grace, Age: 35, Job: Teacher

注意：bind 的偏函数特性
bind 不仅可以绑定 this，还可以预设部分参数，形成偏函数：

function multiply(a, b) {
    return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5)); // 输出 10

2.3 性能对比与优化建议

call 和 apply 的性能基本一致，但在参数较多的情况下，apply 的性能可能略优，因为数组操作的优化：

function sum(...args) {
    return args.reduce((acc, val) => acc + val, 0);
}

const numbers = [1, 2, 3, 4, 5];

// `apply` 的性能可能比展开操作符更好
console.log(sum.apply(null, numbers)); // 输出 15
console.log(sum(...numbers)); // 输出 15

三、实战场景与复杂问题解决方案

3.1 动态上下文切换

在事件监听或回调中，this 通常指向调用者上下文，但我们可能需要强制绑定到特定对象：

class Button {
    constructor(label) {
        this.label = label;
    }

    handleClick() {
        console.log(this.label);
    }
}

const btn = new Button("Submit");
document.querySelector("#button").addEventListener("click", btn.handleClick.bind(btn));

3.2 方法借用与继承

call/apply 可用于在对象之间共享方法：

const obj1 = { name: "Hank" };
const obj2 = {
    name: "Ivy",
    greet: function() {
        return `Hello, ${this.name}`;
    }
};

console.log(obj2.greet.call(obj1)); // 输出 Hello, Hank

3.3 使用 `bind` 实现柯里化

柯里化是一种函数式编程技术，可以通过 bind 简单实现：

function add(a, b) {
    return a + b;
}

const add5 = add.bind(null, 5);
console.log(add5(10)); // 输出 15

3.4 调试上下文问题

在调试中，理解 this 的行为是关键。常见工具如 console.log 或断点调试可帮助确认 this 指向。

const obj = {
    name: "Debug Example",
    showContext: function() {
        console.log(this); // 断点观察
    }
};

obj.showContext();

四、实现

4.1 实现call()

call() 方法用于显式指定函数的 this，并逐个传递参数。其语法为：func.call(thisArg, arg1, arg2, ...)。

手动实现 call 方法时，我们需要通过传递 thisArg 来确保函数内部的 this 被绑定为指定的对象，并将参数逐一传递给函数。

Function.prototype.myCall = function(thisArg, ...args) {
  // 如果 thisArg 为 null 或 undefined，默认绑定到 global（浏览器中是 window）
  if (thisArg === null || thisArg === undefined) {
    thisArg = globalThis;
  }

  // 将当前函数（即调用 myCall 的函数）作为 thisArg 对象的一个方法
  thisArg.fn = this;

  // 调用该方法并传入参数
  const result = thisArg.fn(...args);

  // 删除临时方法
  delete thisArg.fn;

  return result;
};

// 示例
function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const person = { name: 'Alice' };
greet.myCall(person, 'Hello');  // 输出：Hello, Alice

4.2 实现 `apply()`

apply() 方法与 call() 方法类似，唯一的区别是 apply() 接收一个数组或类数组对象作为第二个参数，而 call() 接收一个逐个参数的列表。

我们可以通过 apply() 来实现将数组形式的参数传递给函数。与 call() 方法一样，apply() 也会改变 this 的绑定。

Function.prototype.myApply = function(thisArg, args) {
  // 如果 thisArg 为 null 或 undefined，默认绑定到 global（浏览器中是 window）
  if (thisArg === null || thisArg === undefined) {
    thisArg = globalThis;
  }

  // 将当前函数（即调用 myApply 的函数）作为 thisArg 对象的一个方法
  thisArg.fn = this;

  // 调用该方法并传入参数（通过展开操作符展开数组）
  const result = thisArg.fn(...args);

  // 删除临时方法
  delete thisArg.fn;

  return result;
};

// 示例
function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: 'Bob' };
greet.myApply(person, ['Hello', '!']);  // 输出：Hello, Bob!

4.3. 实现 `bind()`

bind() 方法用于创建一个新的函数，该函数的 this 永久绑定到指定的对象，并且可以预设部分参数。与 call() 和 apply() 不同，bind() 不会立即执行，而是返回一个新的函数。

手动实现 bind() 方法时，我们需要返回一个新的函数，并确保在该新函数调用时，this 会被正确地绑定。

Function.prototype.myBind = function(thisArg, ...args) {
  // 如果 thisArg 为 null 或 undefined，默认绑定到 global（浏览器中是 window）
  if (thisArg === null || thisArg === undefined) {
    thisArg = globalThis;
  }

  // 创建一个新的函数
  const self = this;  // 获取原始函数的引用

  return function(...newArgs) {
    // 使用 bind 时传入的 args + 新调用时传入的参数
    return self.apply(thisArg, [...args, ...newArgs]);
  };
};

// 示例
function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: 'Charlie' };
const greetCharlie = greet.myBind(person, 'Hello');  // 预设了第一个参数
greetCharlie('!');  // 输出：Hello, Charlie!

五、总结

call、apply 和 bind都可以改变函数的this对象指向
call、apply 和 bind第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window
call、apply 和 bind都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入
bind是返回绑定this之后的函数，apply、call 则是立即执行