新旧方法对比：JavaScript 中改变 `this` 指向的方式详解

使用方式与场景对比

call、apply 和 bind 是 JavaScript 中用于改变函数 this 指向的三种传统方法。随着 ES6 的引入，箭头函数、Reflect API 和 Proxy 等新特性也提供了灵活的方式来处理 this 指向。以下是对这些方法的详细解析及对比。

1. call

• 使用方式: func.call(thisArg, arg1, arg2, ...)
• 特点: 立即调用函数，参数逐个传递。
• 使用场景: 当需要立即调用函数并明确传递参数时。

2. apply

• 使用方式: func.apply(thisArg, [argsArray])
• 特点: 立即调用函数，参数以数组形式传递。
• 使用场景: 当参数是数组或类数组对象时，使用 apply 更加方便。

3. bind

• 使用方式: func.bind(thisArg, arg1, arg2, ...)
• 特点: 返回一个绑定了 this 的新函数，不会立即执行。
• 使用场景: 当需要延迟调用函数或将函数作为回调时。

新旧方法对比

实现原理

以下是 call、apply 和 bind 的实现原理，以及新特性在改变 this 指向中的应用。

1. call 的实现

Function.prototype.myCall = function (context = window) {
    context.fn = this; // 将函数设为对象的属性
    let args = [];
    for (let i = 1; i < arguments.length; i++) {
        args.push(arguments[i]); // 将参数转换为数组
    }
    let result = context.fn(...args); // 执行函数，指定 this 并传入参数
    delete context.fn; // 删除对象的属性
    return result; // 返回函数的执行结果
};

2. apply 的实现

Function.prototype.myApply = function (context = window) {
    context.fn = this; // 将函数设为对象的属性
    let result;
    if (arguments[1]) {
        result = context.fn(...arguments[1]); // 参数为数组形式
    } else {
        result = context.fn(); // 无参数时直接调用
    }
    delete context.fn; // 删除对象的属性
    return result; // 返回函数的执行结果
};

3. bind 的实现

Function.prototype.myBind = function (context = window) {
    let fn = this; // 保存函数
    let args = [...arguments].slice(1); // 获取绑定时的参数
    let bound = function () {
        let args1 = [...arguments]; // 获取调用时的参数
        return fn.apply(context, args.concat(args1)); // 合并参数并调用
    };
    return bound; // 返回绑定后的函数
};

示例代码

使用 call

function greet(greeting, punctuation) {
    console.log(`${greeting}, ${this.name}${punctuation}`);
}
const person = { name: 'Alice' };
greet.call(person, 'Hello', '!'); // 输出: Hello, Alice!

使用 apply

greet.apply(person, ['Hi', '.']); // 输出: Hi, Alice.

使用 bind

const boundGreet = greet.bind(person, 'Hey');
boundGreet('?'); // 输出: Hey, Alice?

使用箭头函数

const obj = {
    name: 'Alice',
    greet: function () {
        const inner = () => {
            console.log(`Hello, ${this.name}`);
        };
        inner();
    }
};
obj.greet(); // 输出: Hello, Alice

使用 Reflect.apply

function sum(a, b) {
    return a + b;
}
const result = Reflect.apply(sum, null, [1, 2]);
console.log(result); // 输出: 3

使用 Proxy

const target = {
    name: 'Alice'
};
const handler = {
    apply: function (target, thisArg, argumentsList) {
        console.log(`Called with this: ${thisArg.name}`);
        return target(...argumentsList);
    }
};
function greet(greeting) {
    return `${greeting}, ${this.name}`;
}
const proxy = new Proxy(greet, handler);
console.log(proxy.call(target, 'Hello')); // 输出: Called with this: Alice
                                         //       Hello, Alice

总结

JavaScript 提供了多种方式来改变 this 指向，从传统的 call、apply 和 bind 到 ES6 引入的箭头函数、Reflect API 和 Proxy，每种方式都有其独特的应用场景。开发者可以根据需求选择最合适的方式，以编写更简洁、可读性更高的代码。