JavaScript函数上下文和this关键字

  岸边的风：个人主页

  个人专栏 :《 VUE 》 《 javaScript 》

⛺️ 生活的理想，就是为了理想的生活 !

目录

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

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

3. 构造函数调用

4. 构造函数返回对象

5. 函数调用时使用 call 或 apply

6. 箭头函数的上下文

---

 

 

函数是 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 关键字的一些重要概念和用法。