关于前端:现代JavaScript高级教程JavaScript函数上下文和this关键字

函数上下文和 this 关键字

函数是 JavaScript 中最重要的概念之一，了解函数的定义和调用形式波及到多个知识点，特地是函数的上下文，即函数中的 this 关键字，是前端面试中必考的知识点。本文将介绍函数上下文、箭头函数以及修改 this 指向的办法。

1. 函数作为独立函数调用

思考以下脚本：

function printThis() {return this;}

console.log(printThis() === window);

输入后果：

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

解析：
当函数被作为独立函数调用时，this指向不同，严格模式和非严格模式下有区别。在严格模式下，this指向 undefined；在非严格模式下，this 指向全局对象 window。

2. 函数作为对象办法调用

思考以下脚本：

function printThis() {return this;}

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

输入后果：true

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

3. 结构函数调用

思考以下脚本：

function Dog() {this.name = 'Puppy';}

const dog = new Dog();
console.log(dog.name);

输入后果：Puppy

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

4. 构造函数返回对象

思考以下脚本：

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。

5. 函数调用时应用 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!。

6. 箭头函数的上下文

箭头函数的 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!。

这就是 JavaScript 函数上下文和 this 关键字的一些重要概念和用法。