在 JavaScript 中，为执行上下文中的“this”赋值：深入探讨

前端

2024-02-10 15:13:08

“this”在 JavaScript 中的神奇之处

在 JavaScript 的王国中，“this”是一个神奇的，拥有独一无二的作用。它代表着当前正在执行的函数或对象实例，但其具体指向却取决于一系列因素，如函数调用方式、执行上下文和运行环境的严格模式。

非严格模式下的“this”

在非严格模式的统治下，“this”默认绑定到全局对象，即在浏览器的领地中为 window 对象，而在 Node.js 的世界里则为 global 对象。这就好比一个万能的容器，包罗万象。

严格模式下的“this”

然而，当严格模式降临，一切规则都发生了改变。“this”的任性行为被收敛，变得更具章法。

全局作用域： “this”仍然坚守在全局对象的岗位上。
函数中： “this”不再对全局对象唯命是从。它转而效忠于包含函数调用的对象。如果函数失去了对象的庇护，则 “this”就会飘摇不定，归于 undefined 的怀抱。

词法作用域与闭包：一场双簧戏

词法作用域像一场帷幕，决定了 JavaScript 中变量和函数的出场与谢幕。它基于函数定义的位置，而不是它的出场方式。这意味着在词法作用域中出生的函数可以随心所欲地调戏其父辈中的变量和函数，即使它们不在同一个语境中。

闭包就是一场词法作用域和函数结合的双簧戏。它们是函数中的特殊角色，能够自由出入其出生地，随时取用里面的变量和函数，即使它们的演出早已落幕。

示例大放送

为了让大家更深入地领悟“this”的神奇力量，我们奉上一个代码实例：

// 非严格模式
function foo() {
  console.log(this === window); // true
}

// 严格模式
"use strict";
function bar() {
  console.log(this === undefined); // true
}

// 示例：词法作用域与闭包
const obj = {
  a: 1,
  foo() {
    console.log(this.a); // 1
  }
};

const bar = obj.foo;

obj.foo(); // 1
bar(); // undefined