函数上下文

函数是 JavaScript 中最重要的概念之一，理解函数的定义和调用方式涉及到多个知识点，特别是函数的上下文，即函数中的 this 关键字。

函数作为独立函数调用

示例

function printThis() {
    return this;
}
console.log(printThis() === window);

输出结果

• 在严格模式下：false
• 在非严格模式下：true

解析

当函数被作为独立函数调用时，this 指向不同，严格模式和非严格模式下有区别。

在严格模式下，this 指向 undefined；在非严格模式下，this 指向全局对象 window。

函数作为对象方法调用

示例

function printThis() {
    return this;
}
const obj = { printThis };
console.log(obj.printThis() === obj);

输出结果：true

解析

当函数被作为对象的方法调用时，其中的 this 指向该对象本身。在上述代码中，printThis 函数被作为 obj 对象的一个方法调用，所以 printThis 中的 this 指向 obj，而不是全局对象 window。

构造函数调用

示例

function Dog() {
    this.name = 'Puppy';
}
const dog = new Dog();
console.log(dog.name);

输出结果：Puppy

解析

在这段代码中，Dog 函数被当作构造函数调用，通过 new 关键字创建实例时，this 关键字会指向新创建的对象。因此，this.name = 'Puppy' 将在新创建的对象上设置 name 属性，最后打印出 Puppy。

构造函数返回对象

示例

const puppet = {
    rules: false
};
function Emperor() {
    this.rules = true;
    return puppet;
}
const emperor = new Emperor();
console.log(emperor.rules);

输出结果：false

解析

尽管构造函数的 this 关键字指向通过构造函数构建的实例，但如果构造函数中使用 return 语句返回一个对象，则返回的对象将取代通过构造函数创建的实例。

在上述代码中，Emperor 构造函数返回了 puppet 对象，因此 emperor 实例实际上就是 puppet 对象，其中的 rules 属性值为 false。

函数调用时使用 call 或 apply

示例

function greet() {
    return `Hello, ${this.name}!`;
}
const person = {
    name: 'Alice'
};
console.log(greet.call(person)); // 使用 call
console.log(greet.apply(person)); // 使用 apply

输出结果

• 使用 call ：Hello, Alice!
• 使用 apply ：Hello, Alice!

解析

通过使用函数的 call 或 apply 方法，可以显式地指定函数执行时的上下文，即 this 的值。在上述代码中，greet.call(person) 和 greet.apply(person) 中的 this 都被绑定到了 person 对象，所以打印出的结果都是 Hello, Alice!

箭头函数的上下文

箭头函数的 this 绑定与常规函数不同，箭头函数没有自己的 this 值，而是捕获了封闭上下文的 this 值。

示例

const obj = {
    name: 'Bob',
    greet: function () {
        const arrowFunc = () => {
            return `Hello, ${this.name}!`;
        };
        return arrowFunc();
    }
};
console.log(obj.greet());

输出结果：Hello, Bob!

解析

在这段代码中，箭头函数 arrowFunc 没有自己的 this 值，而是捕获了封闭上下文 greet 函数中的 this 值，即 obj 对象。所以 this.name 实际上指向 obj.name，打印出 Hello, Bob!。