关于前端:现代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));  // 应用callconsole.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 关键字的一些重要概念和用法。