JavaScript 面试问题

TL;DR

Hoisting（变量提升）是一种 JavaScript 机制，在编译阶段，变量和函数声明会被“提升”到其包含作用域的顶部。

• 变量声明 (var)：声明被提升，但未初始化。如果在使用前访问变量，则变量的值为 undefined。
• 变量声明 (let 和 const)：声明被提升，但未初始化。访问它们会导致 ReferenceError，直到遇到实际的声明。
• 函数表达式 (var)：声明被提升，但未初始化。如果在使用前访问变量，则变量的值为 undefined。
• 函数声明 (function)：声明和定义都被完全提升。
• 类声明 (class)：声明被提升，但未初始化。访问它们会导致 ReferenceError，直到遇到实际的声明。
• 导入声明 (import)：声明被提升，并且在执行其余代码之前，会执行导入模块的副作用。

以下行为总结了在声明变量之前访问变量的结果。

Hoisting（变量提升）

Hoisting（变量提升）是一个术语，用于解释 JavaScript 代码中变量声明的行为。

使用 var 关键字声明或初始化的变量将在编译期间将其声明“移动”到其包含作用域的顶部，我们将其称为变量提升。

只有声明被提升，初始化/赋值（如果存在）将保留在原来的位置。请注意，声明实际上并没有移动——JavaScript 引擎在编译期间会解析声明，并了解变量及其作用域，但是通过将声明可视化为“提升”到其作用域的顶部，更容易理解这种行为。

让我们用几个代码示例来解释。请注意，这些示例的代码应该在模块作用域内执行，而不是像浏览器控制台那样逐行输入到 REPL 中。

使用 var 声明的变量的变量提升

在这里可以看到变量提升的实际效果，即使在第一个 console.log() 之后才声明和初始化 foo，第一个 console.log() 也会将 foo 的值打印为 undefined。

console.log(foo); // undefined
var foo = 1;
console.log(foo); // 1

您可以将代码可视化为：

var foo;
console.log(foo); // undefined
foo = 1;
console.log(foo); // 1

使用 let、const 和 class 声明的变量的变量提升

通过 let、const 和 class 声明的变量也会被提升。但是，与 var 和 function 不同，它们没有被初始化，在声明之前访问它们将导致 ReferenceError 异常。该变量处于一个“暂时性死区”，从块的开始到声明被处理。

y; // ReferenceError: Cannot access 'y' before initialization
let y = 'local';

z; // ReferenceError: Cannot access 'z' before initialization
const z = 'local';

Foo; // ReferenceError: Cannot access 'Foo' before initialization

class Foo {
  constructor() {}
}

函数表达式的提升

函数表达式是以变量声明的形式编写的函数。由于它们也是使用 var 声明的，因此只有变量声明被提升。

console.log(bar); // undefined
bar(); // Uncaught TypeError: bar is not a function

var bar = function () {
  console.log('BARRRR');
};

函数声明的提升

函数声明使用 function 关键字。与函数表达式不同，函数声明同时提升声明和定义，因此即使在声明之前也可以调用它们。

console.log(foo); // [Function: foo]
foo(); // 'FOOOOO'

function foo() {
  console.log('FOOOOO');
}

这同样适用于生成器 (function*)、异步函数 (async function) 和异步函数生成器 (async function*)。

import 语句的提升

Import 声明被提升。import 引入的标识符在整个模块范围内都可用，并且它们产生的副作用在模块的其余代码运行之前产生。

foo.doSomething(); // Works normally.

import foo from './modules/foo';

幕后

实际上，JavaScript 在尝试执行代码之前，会在当前作用域中创建所有变量。使用 var 关键字创建的变量的值将为 undefined，而使用 let 和 const 关键字创建的变量将被标记为 <value unavailable>。因此，在初始化之前访问它们将导致 ReferenceError，从而阻止您在初始化之前访问它们。

在 ECMAScript 规范中，let 和 const 声明解释如下：

当它们包含的 Environment Record 被实例化时，变量被创建，但在变量的 LexicalBinding 被求值之前，可能无法以任何方式访问它们。

但是，对于 var 关键字，此语句略有不同：

当它们包含的 Environment Record 被实例化时，Var 变量被创建，并在创建时被初始化为 undefined。

现代实践

在实践中，现代代码库避免使用 var，并且仅使用 let 和 const。建议在包含范围/模块的顶部声明和初始化变量和 import 语句，以消除跟踪何时可以使用变量的心理负担。

ESLint 是一个静态代码分析器，可以发现违反此类情况，使用以下规则：

• no-use-before-define: 当遇到对尚未声明的标识符的引用时，此规则将发出警告。
• no-undef: 当遇到对尚未声明的标识符的引用时，此规则将发出警告。

延伸阅读

• Hoisting | MDN
• What is Hoisting in JavaScript?

TL;DR

在 JavaScript 中，let、var 和 const 都是用于声明变量的关键字，但它们在作用域、初始化规则、是否可以重新声明或重新赋值以及在声明前访问时的行为方面存在显着差异：

行为差异

让我们看看 var、let 和 const 之间的行为差异。

作用域

使用 var 关键字声明的变量的作用域限定于创建它们的函数，或者如果创建在任何函数之外，则限定于全局对象。let 和 const 是块作用域，这意味着它们只能在最近的一组花括号（函数、if-else 块或 for 循环）内访问。

function foo() {
  // All variables are accessible within functions.
  var bar = 1;
  let baz = 2;
  const qux = 3;

  console.log(bar); // 1
  console.log(baz); // 2
  console.log(qux); // 3
}

foo(); // Prints each variable successfully
console.log(bar); // ReferenceError: bar is not defined
console.log(baz); // ReferenceError: baz is not defined
console.log(qux); // ReferenceError: qux is not defined

在下面的示例中，bar 可以在 if 块之外访问，但 baz 和 quz 则不能。

if (true) {
  var bar = 1;
  let baz = 2;
  const qux = 3;
}

// var variables are accessible anywhere in the function scope.
console.log(bar); // 1
// let and const variables are not accessible outside of the block they were defined in.
console.log(baz); // ReferenceError: baz is not defined
console.log(qux); // ReferenceError: qux is not defined

初始化

var 和 let 变量可以在没有值的情况下初始化，但 const 声明必须初始化。

var foo; // Ok
let bar; // Ok
const baz; // SyntaxError: Missing initializer in const declaration

重新声明

使用 var 重新声明变量不会抛出错误，但 let 和 const 会。

var foo = 1;
var foo = 2; // Ok
console.log(foo); // Should print 2, but SyntaxError from baz prevents the code executing.

let baz = 3;
let baz = 4; // Uncaught SyntaxError: Identifier 'baz' has already been declared

重新赋值

let 和 const 的区别在于，var 和 let 允许重新分配变量的值，而 const 不允许。

var foo = 1;
foo = 2; // This is fine.

let bar = 3;
bar = 4; // This is fine.

const baz = 5;
baz = 6; // Uncaught TypeError: Assignment to constant variable.

声明前访问

var、let 和 const 声明的变量都会被提升。var 声明的变量会自动初始化为 undefined 值。但是，let 和 const 变量不会被初始化，在声明之前访问它们将导致 ReferenceError 异常，因为它们处于从块的开始到声明被处理的“暂时性死区”。

console.log(foo); // undefined
var foo = 'foo';

console.log(baz); // ReferenceError: Cannot access 'baz' before initialization
let baz = 'baz';

console.log(bar); // ReferenceError: Cannot access 'baz' before initialization
const bar = 'bar';

笔记

• 在现代 JavaScript 中，通常建议默认对不需要重新赋值的变量使用 const。这可以提高不变性并防止意外更改。
• 当您需要在其范围内重新分配变量时，请使用 let。
• 避免使用 var，因为它可能存在作用域问题和提升行为。
• 如果您需要针对旧版浏览器，请使用 let/const 编写代码，并使用 Babel 等转译器将您的代码编译为旧语法。

延伸阅读

• Javascript 中 "var" vs "let" vs "const" 的区别

TL;DR

== 是抽象相等运算符，而 === 是严格相等运算符。== 运算符会在进行任何必要的类型转换后比较是否相等。=== 运算符不会进行类型转换，因此如果两个值不是同一类型，=== 将直接返回 false。

相等运算符 (==)

== 运算符检查两个值是否相等，但如果这些值的类型不同，则会执行类型转换。这意味着 JavaScript 将尝试在进行比较之前将这些值转换为通用类型。

console.log(42 == '42'); // true
console.log(0 == false); // true
console.log(null == undefined); // true
console.log([] == false); // true
console.log('' == false); // true

在这些示例中，JavaScript 在进行比较之前将操作数转换为相同的类型。例如，42 == '42' 为 true，因为字符串 '42' 在比较之前被转换为数字 42。

但是，当使用 == 时，可能会发生不直观的结果：

console.log(1 == [1]); // true
console.log(0 == ''); // true
console.log(0 == '0'); // true
console.log('' == '0'); // false

作为一般经验法则，永远不要使用 == 运算符，除非为了方便与 null 或 undefined 进行比较，其中 a == null 将在 a 为 null 或 undefined 时返回 true。

var a = null;
console.log(a == null); // true
console.log(a == undefined); // true

严格相等运算符 (===)

=== 运算符，也称为严格相等运算符，检查两个值是否相等，而不执行类型转换。这意味着，只有当值和类型都相同时，比较才会返回 true。

console.log(42 === '42'); // false
console.log(0 === false); // false
console.log(null === undefined); // false
console.log([] === false); // false
console.log('' === false); // false

对于这些比较，不执行类型转换，因此如果类型不同，该语句将返回 false。例如，42 === '42' 为 false，因为类型（数字和字符串）不同。

// 带有类型转换的比较 (==)
console.log(42 == '42'); // true
console.log(0 == false); // true
console.log(null == undefined); // true

// 不带类型转换的严格比较 (===)
console.log(42 === '42'); // false
console.log(0 === false); // false
console.log(null === undefined); // false

额外内容：Object.is()

JavaScript 中最后一个值比较操作是 Object.is() 静态方法。Object.is() 和 === 之间唯一的区别在于它们如何处理带符号的零和 NaN 值。=== 运算符（和 == 运算符）将数字值 -0 和 +0 视为相等，但将 NaN 视为彼此不相等。

结论

• 当您希望通过类型转换比较值（并了解其含义）时，请使用==。 实际上，相等运算符的唯一合理用例是在单个比较中同时检查null和undefined以方便使用。
• 当您希望确保值和类型都相同时，请使用===，这在大多数情况下是更安全、更可预测的选择。

笔记

• 建议使用 ===（严格相等）以避免类型强制转换的缺陷，这可能导致代码中出现意外行为和错误。它使您的比较意图更清晰，并确保您同时比较值和类型。
• ESLint 的 eqeqeq 规则强制使用严格相等运算符 === 和 !==，甚至提供了一个选项，始终强制使用严格相等，除非与 null 字面量进行比较。

延伸阅读

• Equality (==) | MDN
• Strict equality (===) | MDN

TL;DR

事件循环是JavaScript运行时环境中的一个概念，涉及异步操作如何在JavaScript引擎中执行。它的工作原理如下：

1. JavaScript 引擎开始执行脚本，将同步操作放在调用堆栈上。
2. 当遇到异步操作（例如，setTimeout()、HTTP 请求）时，它会被卸载到相应的 Web API 或 Node.js API，以在后台处理该操作。
3. 一旦异步操作完成，其回调函数将被放置在相应的队列中——任务队列（也称为宏任务队列/回调队列）或微任务队列。从这里开始，我们将“任务队列”称为“宏任务队列”，以便更好地与微任务队列区分开来。
4. 事件循环持续监视调用堆栈并执行调用堆栈上的项目。如果/当调用堆栈为空时：
   1. 处理微任务队列。微任务包括 promise 回调（then、catch、finally）、MutationObserver 回调和对 queueMicrotask() 的调用。事件循环从微任务队列中获取第一个回调并将其推送到调用堆栈以供执行。重复此操作，直到微任务队列为空。
   2. 处理宏任务队列。宏任务包括 Web API，如 setTimeout()、HTTP 请求、用户界面事件处理程序，如点击、滚动等。事件循环从宏任务队列中出列第一个回调并将其推送到调用堆栈以供执行。但是，在处理完宏任务队列回调后，事件循环不会继续处理下一个宏任务！事件循环首先检查微任务队列。检查微任务队列是必要的，因为微任务的优先级高于宏任务队列回调。刚刚执行的宏任务队列回调可能添加了更多微任务！
      1. 如果微任务队列非空，则按上一步处理它们。
      2. 如果微任务队列为空，则处理下一个宏任务队列回调。重复此操作，直到宏任务队列为空。
5. 此过程无限期地持续进行，允许 JavaScript 引擎高效地处理同步和异步操作，而不会阻塞调用堆栈。

不幸的是，仅使用文本很难很好地解释事件循环。我们建议查看以下优秀的视频之一，解释事件循环：

• JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue (2024): Lydia Hallie 是一个受欢迎的 JavaScript 教育者，这是最近解释事件循环的最佳视频。对于那些喜欢详细的基于文本的解释的人，还有一个随附的博客文章。
• In the Loop (2018): 来自 Chrome 团队的 Jake Archibald 在 JSConf 2018 期间提供了事件循环的视觉演示，解释了不同类型的任务。
• What the heck is the event loop anyway? (2014): Philip Robert 在 JSConf 2014 上发表了这次史诗般的演讲，这是 YouTube 上观看次数最多的 JavaScript 视频之一。

我们建议观看 Lydia 的视频，因为它是最现代和简洁的解释，时长仅为 13 分钟，而其他视频至少需要 30 分钟。她的视频足以满足面试的目的。

JavaScript 中的事件循环

事件循环是 JavaScript 异步操作的核心。它是一种处理代码执行的机制，允许异步操作并确保 JavaScript 引擎的单线程性质不会阻塞程序的执行。

事件循环的组成部分

为了更好地理解它，我们需要了解系统的所有组成部分。这些组件是事件循环的一部分：

调用堆栈

调用堆栈跟踪程序中正在执行的函数。当调用一个函数时，它被添加到调用堆栈的顶部。当函数完成时，它将从调用堆栈中删除。这允许程序跟踪它在函数执行中的位置，并在函数完成时返回到正确的位置。顾名思义，它是一个遵循后进先出的堆栈数据结构。

Web API/Node.js API

异步操作，如 setTimeout()、HTTP 请求、文件 I/O 等，由 Web API（在浏览器中）或 C++ API（在 Node.js 中）处理。这些 API 不是 JavaScript 引擎的一部分，并且在单独的线程上运行，允许它们并发执行而不会阻塞调用堆栈。

任务队列 / 宏任务队列 / 回调队列

任务队列，也称为宏任务队列/回调队列/事件队列，是一个保存需要执行的任务的队列。这些任务通常是异步操作，例如传递给 Web API 的回调（setTimeout()、setInterval()、HTTP 请求等）以及用户界面事件处理程序，如点击、滚动等。

微任务队列

Microtasks 是比 macrotasks 具有更高优先级的任务，它们在当前执行的脚本完成之后、下一个 macrotask 执行之前立即执行。Microtasks 通常用于更即时、轻量级的操作，这些操作应在当前操作完成后尽快执行。有一个专门用于 microtasks 的 microtask 队列。Microtasks 包括 promise 回调（then()、catch() 和 finally()）、await 语句、queueMicrotask() 和 MutationObserver 回调。

事件循环顺序

1. JavaScript 引擎开始执行脚本，将同步操作放在调用堆栈上。
2. 当遇到异步操作（例如，setTimeout()、HTTP 请求）时，它会被卸载到相应的 Web API 或 Node.js API，以在后台处理该操作。
3. 一旦异步操作完成，其回调函数将被放置在相应的队列中——任务队列（也称为 macrotask 队列/回调队列）或 microtask 队列。从这里开始，我们将“任务队列”称为“macrotask 队列”，以便更好地与 microtask 队列区分开来。
4. 事件循环持续监视调用堆栈并执行调用堆栈上的项目。如果/当调用堆栈为空时：
   1. microtask 队列被处理。事件循环从 microtask 队列中获取第一个回调，并将其推送到调用堆栈以供执行。这将重复进行，直到 microtask 队列为空。
   2. macrotask 队列被处理。事件循环从 macrotask 队列中取出第一个回调，并将其推送到调用堆栈上以供执行。但是，在处理完 macrotask 队列回调之后，事件循环不会继续处理下一个 macrotask！事件循环首先检查 microtask 队列。检查 microtask 队列是必要的，因为 microtasks 的优先级高于 macrotask 队列回调。刚刚执行的 macrotask 队列回调可能添加了更多 microtasks！
      1. 如果 microtask 队列非空，则按上一步处理它们。
      2. 如果 microtask 队列为空，则处理下一个 macrotask 队列回调。这将重复进行，直到 macrotask 队列为空。
5. 此过程无限期地持续进行，允许 JavaScript 引擎高效地处理同步和异步操作，而不会阻塞调用堆栈。

示例

以下代码使用正常执行、macrotasks 和 microtasks 的组合来记录一些语句。

console.log('Start');

setTimeout(() => {
  console.log('Timeout 1');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise 1');
});

setTimeout(() => {
  console.log('Timeout 2');
}, 0);

console.log('End');

// Console output:
// Start
// End
// Promise 1
// Timeout 1
// Timeout 2

输出说明：

1. Start 和 End 首先被记录，因为它们是初始脚本的一部分。
2. Promise 1 接下来被记录，因为 promises 是 microtasks，并且 microtasks 在调用堆栈上的项目之后立即执行。
3. Timeout 1 和 Timeout 2 最后被记录，因为它们是 macrotasks，并且在 microtasks 之后被处理。

延伸阅读和资源

• 事件循环 - MDN
• Node.js 事件循环
• 事件循环：microtasks 和 macrotasks
• JavaScript 可视化：Lydia Hallie 的事件循环
• Lydia Hallie 的“JavaScript 可视化 - 事件循环、Web API、（Micro）任务队列”
• Philip Robert 的“到底什么是事件循环？”
• Jake Archibald 的“In The Loop”

TL;DR

事件委托是 JavaScript 中的一种技术，它将单个事件监听器附加到父元素，而不是将事件监听器附加到多个子元素。当子元素上发生事件时，该事件会冒泡到 DOM 树中，父元素的事件监听器会根据目标元素处理该事件。

事件委托具有以下优点：

• 提高性能：附加单个事件监听器比将多个事件监听器附加到各个元素更有效，尤其是在处理大型或动态列表时。这减少了内存使用并提高了整体性能。
• 简化事件处理：使用事件委托，您只需要在父元素的事件监听器中编写一次事件处理逻辑。这使得代码更易于维护和更新。
• 动态元素支持：事件委托会自动处理父元素中动态添加或删除元素的事件。当 DOM 结构发生变化时，无需手动附加或删除事件监听器

但是，请注意：

• 确定触发事件的目标元素非常重要。
• 并非所有事件都可以被委托，因为它们不会冒泡。不冒泡的事件包括：focus、blur、scroll、mouseenter、mouseleave、resize 等。

事件委托

事件委托是 JavaScript 中用于通过将单个事件监听器附加到公共祖先元素来有效管理和处理多个子元素上的事件的设计模式。此模式在您有大量相似元素（例如列表项）并希望优化事件处理的场景中特别有价值。

事件委托的工作原理

1. 将监听器附加到公共祖先：您将单个事件监听器附加到 DOM 层次结构中较高的公共祖先元素，而不是将各个事件监听器附加到每个子元素。
2. 事件冒泡：当子元素上发生事件时，它会通过 DOM 树冒泡到公共祖先元素。在此传播过程中，公共祖先上的事件监听器可以拦截和处理该事件。
3. 确定目标：在事件监听器中，您可以检查事件对象以识别事件的实际目标（触发事件的子元素）。您可以使用 event.target 或 event.currentTarget 等属性来确定与哪个特定的子元素进行了交互。
4. 根据目标执行操作：根据目标元素，您可以执行所需的操作或执行特定于该元素的代码。这允许您使用单个事件监听器处理多个子元素的事件。

事件委托的优点

1. 效率：事件委托减少了事件监听器的数量，从而提高了内存使用率和性能，尤其是在处理大量元素时。
2. 动态元素：它可以与动态添加或删除的子元素无缝协作，因为公共祖先会继续侦听它们的事件。

例子

这是一个简单的例子：

// HTML:
// <ul id="item-list">
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
// </ul>

const itemList = document.getElementById('item-list');

itemList.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log(`Clicked on ${event.target.textContent}`);
  }
});

在此示例中，单个 click 事件监听器附加到 <ul> 元素。当 <li> 元素上发生 click 事件时，该事件会冒泡到 <ul> 元素，事件监听器会检查目标元素的标签名称以确定是否单击了列表项。检查 event.target 的身份至关重要，因为 DOM 树中可能存在其他类型的元素。

用例

事件委托通常用于以下场景：

处理单页应用程序中的动态内容

// HTML:
// <div id="button-container">
//   <button>Button 1</button>
//   <button>Button 2</button>
// </div>
// <button id="add-button">Add Button</button>

const buttonContainer = document.getElementById('button-container');
const addButton = document.getElementById('add-button');

buttonContainer.addEventListener('click', (event) => {
  if (event.target.tagName === 'BUTTON') {
    console.log(`Clicked on ${event.target.textContent}`);
  }
});

addButton.addEventListener('click', () => {
  const newButton = document.createElement('button');
  newButton.textContent = `Button ${buttonContainer.children.length + 1}`;
  buttonContainer.appendChild(newButton);
});

在此示例中，click 事件侦听器附加到 <div> 容器。 当动态添加并单击一个新按钮时，容器上的事件侦听器会处理 click 事件。

通过避免为更改的元素附加和删除事件侦听器来简化代码

// HTML:
// <form id="user-form">
//   <input type="text" name="username" placeholder="Username">
//   <input type="email" name="email" placeholder="Email">
//   <input type="password" name="password" placeholder="Password">
// </form>

const userForm = document.getElementById('user-form');

userForm.addEventListener('input', (event) => {
  const { name, value } = event.target;
  console.log(`Changed ${name}: ${value}`);
});

在这个例子中，单个输入事件监听器附加到表单元素。它可以响应所有子输入元素的输入更改，通过消除对每个<input>元素上单独监听器的需求来简化代码。

陷阱

请注意，事件委托会带来某些陷阱：

• 目标处理不正确： 确保正确识别事件目标，以避免意外操作。
• 并非所有事件都可以委托/冒泡：并非所有事件都可以委托，因为它们不会冒泡。 不冒泡的事件包括：focus、blur、scroll、mouseenter、mouseleave、resize 等。
• 事件开销： 虽然事件委托通常更有效，但需要在根事件侦听器中编写复杂的逻辑来识别触发元素并做出适当的响应。 如果管理不当，这可能会引入开销，并且可能更复杂。

JavaScript 框架中的事件委托

在 React 中，事件处理程序附加到 React 根的 DOM 容器中，React 树被渲染到该容器中。 即使将 onClick 添加到子元素，实际的事件侦听器也会附加到根 DOM 节点，利用事件委托来优化事件处理并提高性能。

当事件发生时，React 的事件侦听器会捕获它，并根据其内部簿记确定哪个 React 组件呈现了目标元素。 然后，React 通过使用合成事件对象调用处理程序函数，将事件分派给相应的组件的事件处理程序。 此合成事件对象包装了本机浏览器事件，提供了跨不同浏览器的一致接口，并捕获了有关事件的信息。

通过使用事件委托，React 避免将单个事件处理程序附加到每个组件实例，这将产生巨大的开销，尤其对于大型组件树。 相反，React 利用浏览器的本机事件冒泡机制来捕获根处的事件并将它们分发到相应的组件。

延伸阅读

• MDN Web Docs on Event Delegation
• JavaScript.info - Event Delegation

TL;DR

this 没有简单的解释；它是 JavaScript 中最令人困惑的概念之一，因为它的行为与其他许多编程语言不同。this 关键字的单行解释是，它是一个对函数执行上下文的动态引用。

更长的解释是，this 遵循以下规则：

1. 如果在调用函数时使用了 new 关键字，这意味着该函数被用作函数构造函数，则函数内部的 this 是新创建的对象实例。
2. 如果在 class constructor 中使用了 this，则 constructor 内部的 this 是新创建的对象实例。
3. 如果使用 apply()、call() 或 bind() 调用/创建函数，则函数内部的 this 是作为参数传入的对象。
4. 如果一个函数被调用为一个方法（例如 obj.method()）——this 是该函数所属的对象。
5. 如果一个函数被调用为自由函数调用，这意味着它是在没有任何上述条件的情况下被调用的，this 是全局对象。在浏览器中，全局对象是 window 对象。如果在严格模式 ('use strict';) 中，this 将是 undefined 而不是全局对象。
6. 如果应用了多个上述规则，则优先级较高的规则将获胜并设置 this 的值。
7. 如果该函数是 ES2015 箭头函数，它会忽略上述所有规则，并在创建时接收其周围作用域的 this 值。

如需深入解释，请查看 Arnav Aggrawal 在 Medium 上的文章。

this 关键字

在 JavaScript 中，this 是一个关键字，它引用函数或脚本的当前执行上下文。这是 JavaScript 中的一个基本概念，理解 this 的工作原理对于构建健壮且可维护的应用程序至关重要。

全局使用

在全局范围内，this 引用全局对象，在 Web 浏览器中是 window 对象，在 Node.js 环境中是 global 对象。

console.log(this); // 在浏览器中，这将记录 window 对象（对于非严格模式）。

在常规函数调用中

当一个函数在全局上下文中或作为独立函数被调用时，this 引用全局对象（在非严格模式下）或 undefined（在严格模式下）。

function showThis() {
  console.log(this);
}

showThis(); // 在非严格模式下：Window（全局对象）。在严格模式下：undefined。

在方法调用中

当一个函数作为对象的方法被调用时，this 引用该方法被调用的对象。

const obj = {
  name: 'John',
  showThis: function () {
    console.log(this);
  },
};

obj.showThis(); // { name: 'John', showThis: ƒ }

请注意，如果你这样做，它就和常规函数调用一样，而不是方法调用。this 已经失去了它的上下文，不再指向 obj。

const obj = {
  name: 'John',
  showThis: function () {
    console.log(this);
  },
};

const showThisStandalone = obj.showThis;
showThisStandalone(); // 在非严格模式下：Window（全局对象）。在严格模式下：undefined。

在函数构造器中

当一个函数被用作构造器（使用 new 关键字调用）时，this 指的是新创建的实例。在下面的例子中，this 指的是正在创建的 Person 对象，并且 name 属性是在该对象上设置的。

function Person(name) {
  this.name = name;
}

const person = new Person('John');
console.log(person.name); // "John"

在类构造函数和方法中

在 ES2015 类中，this 的行为与在对象方法中一样。它指的是类的实例。

class Person {
  constructor(name) {
    this.name = name;
  }

  showThis() {
    console.log(this);
  }
}

const person = new Person('John');
person.showThis(); // Person {name: 'John'}

const showThisStandalone = person.showThis;
showThisStandalone(); // `undefined` because in JavaScript class bodies, all methods are strict mode by default, even if you don't add 'use strict'

显式绑定 this

你可以使用 bind()、call() 或 apply() 来显式设置函数的 this 的值。

使用 call() 和 apply() 方法允许您在调用函数时显式设置 this 的值。

function showThis() {
  console.log(this);
}
const obj = { name: 'John' };

showThis.call(obj); // { name: 'John' }
showThis.apply(obj); // { name: 'John' }

bind() 方法创建一个新函数，并将 this 绑定到指定的值。

function showThis() {
  console.log(this);
}
const obj = { name: 'John' };

const boundFunc = showThis.bind(obj);
boundFunc(); // { name: 'John' }

在箭头函数中

箭头函数没有自己的 this 上下文。相反，this 是词法作用域的，这意味着它继承了定义时周围作用域的 this 值。

在这个例子中，this 指的是全局对象（window 或 global），因为箭头函数没有绑定到 person 对象。

const person = {
  firstName: 'John',
  sayHello: () => {
    console.log(`Hello, my name is ${this.firstName}!`);
  },
};

person.sayHello(); // "Hello, my name is undefined!"

在下面的例子中，箭头函数中的 this 将是其封闭上下文的 this 值，因此它取决于 showThis() 的调用方式。

const obj = {
  name: 'John',
  showThis: function () {
    const arrowFunc = () => {
      console.log(this);
    };
    arrowFunc();
  },
};

obj.showThis(); // { name: 'John', showThis: ƒ }

const showThisStandalone = obj.showThis;
showThisStandalone(); // 在非严格模式下：Window（全局对象）。在严格模式下：undefined。

因此，箭头函数中的 this 值不能通过 bind()、apply() 或 call() 方法设置，它也不会指向对象方法中的当前对象。

const obj = {
  name: 'Alice',
  regularFunction: function () {
    console.log('Regular function:', this.name);
  },
  arrowFunction: () => {
    console.log('Arrow function:', this.name);
  },
};

const anotherObj = {
  name: 'Bob',
};

// 使用 call/apply/bind 和常规函数
obj.regularFunction.call(anotherObj); // Regular function: Bob
obj.regularFunction.apply(anotherObj); // Regular function: Bob
const boundRegularFunction = obj.regularFunction.bind(anotherObj);
boundRegularFunction(); // Regular function: Bob

// 使用 call/apply/bind 和箭头函数，`this` 指的是全局作用域，并且不能被修改。
obj.arrowFunction.call(anotherObj); // Arrow function: window/undefined (depending if strict mode)
obj.arrowFunction.apply(anotherObj); // Arrow function: window/undefined (depending if strict mode)
const boundArrowFunction = obj.arrowFunction.bind(anotherObj);
boundArrowFunction(); // Arrow function: window/undefined (depending if strict mode)

在事件处理程序中

当一个函数被调用为 DOM 事件处理程序时，this 指的是触发该事件的元素。在这个例子中，this 指的是被点击的 <button> 元素。

<button id="my-button" onclick="console.log(this)">Click me</button>
<!-- Logs the button element -->

使用 JavaScript 设置事件处理程序时，this 也指的是接收事件的元素。

document.getElementById('my-button').addEventListener('click', function () {
  console.log(this); // Logs the button element
});

如上所述，ES2015 引入了 箭头函数，它使用 封闭的词法范围。这通常很方便，但确实阻止了调用者通过 .call/.apply/.bind 定义 this 上下文。其中一个后果是，如果您使用箭头函数定义 .addEventListener() 的回调参数，DOM 事件处理程序将无法在您的事件处理程序函数中正确绑定 this。

document.getElementById('my-button').addEventListener('click', () => {
  console.log(this); // Window / undefined (depending on whether strict mode) instead of the button element.
});

总而言之，JavaScript 中的 this 指的是函数或脚本的当前执行上下文，其值可以根据使用它的上下文而改变。理解 this 的工作方式对于构建健壮且可维护的 JavaScript 应用程序至关重要。

延伸阅读

• this - JavaScript | MDN
• The Simple Rules to this in Javascript

总结

以下都是在客户端（本例中为用户的浏览器）上存储数据的机制。localStorage 和 sessionStorage 都实现了 Web Storage API 接口。

• Cookies：适用于服务器-客户端通信，存储容量小，可以是持久性的或基于会话的，特定于域。在每次请求时发送到服务器。
• localStorage：适用于长期存储，即使在浏览器关闭后数据仍然存在，可在同一来源的所有选项卡和窗口中访问，在三者中存储容量最高。
• sessionStorage：适用于单个页面会话中的临时数据，当选项卡或窗口关闭时数据将被清除，与 cookies 相比具有更高的存储容量。

以下表格总结了 3 种客户端存储机制。

Web 上的存储

Cookies、localStorage 和 sessionStorage 都是客户端（Web 浏览器）上的存储机制。在客户端存储数据对于仅客户端的状态很有用，例如访问令牌、主题、个性化布局，以便用户可以在跨选项卡和使用会话的网站上获得一致的体验。

这些客户端存储机制具有以下常见属性：

• 这意味着客户端可以读取和修改值（HttpOnly cookies 除外）。
• 基于键值对的存储。
• 它们只能将值存储为字符串。非字符串必须被序列化为字符串（例如 JSON.stringify()）才能被存储。

每种存储机制的用例

由于 cookies 的最大大小相对较小，因此不建议将所有客户端数据存储在 cookies 中。关于 cookies 的显著特性是 cookies 会在每个 HTTP 请求中发送到服务器，因此较小的最大大小是一个特性，可以防止您的 HTTP 请求由于 cookies 而变得过大。cookies 的自动过期也是一个有用的特性。

考虑到这一点，最适合存储在 cookies 中的数据是需要传输到服务器的小块数据，例如身份验证令牌、会话 ID、分析跟踪 ID、GDPR cookie 同意、对身份验证、授权和在服务器上呈现很重要的语言偏好。这些值有时很敏感，并且可以从 cookies 提供的 HttpOnly、Secure 和 Expires/Max-Age 功能中受益。

localStorage 和 sessionStorage 都实现了 Web Storage API 接口。Web Storages 具有 5MB 的总容量，因此存储大小通常不是问题。关键的区别在于，存储在 Web Storage 中的值不会自动随 HTTP 请求一起发送。

虽然您可以在发出 AJAX/fetch() 请求时手动包含来自 Web Storage 的值，但浏览器不会在页面的初始请求/首次加载中包含它们。因此，如果使用服务器端渲染（通常是与身份验证/授权相关的信息），则不应使用 Web Storage 来存储服务器用于页面初始渲染所依赖的数据。localStorage 最适合不失效的用户偏好数据，例如主题和布局（如果服务器渲染最终布局并不重要）。sessionStorage 最适合只需要在当前浏览会话中访问的临时数据，例如表单数据（用于在意外重新加载期间保留数据）。

以下部分深入探讨了每种客户端存储机制。

Cookies

Cookies 用于在客户端存储小块数据，这些数据可以通过每个 HTTP 请求发送回服务器。

• 存储容量：所有 cookies 限制在 4KB 左右。
• 寿命：Cookies 可以使用 Expires 或 Max-Age 属性设置特定的过期日期。如果未设置过期日期，则在浏览器关闭时删除 cookie（会话 cookie）。
• 访问：Cookies 是特定于域的，可以在同一域内的不同页面和子域之间共享。
• 安全性：Cookies 可以标记为 HttpOnly 以防止从 JavaScript 访问，从而降低 XSS 攻击的风险。它们也可以使用 Secure 标志进行保护，以确保仅在使用 HTTPS 时发送它们。

// Set a cookie for the name/key `auth_token` with an expiry.
document.cookie =
  'auth_token=abc123def; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/';

// Read all cookies. There's no way to read specific cookies using `document.cookie`.
// You have to parse the string yourself.
console.log(document.cookie); // auth_token=abc123def

// Delete the cookie with the name/key `auth_token` by setting an
// expiry date in the past. The value doesn't matter.
document.cookie = 'auth_token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

读取/写入 Cookie 是一件很痛苦的事情。document.cookie 返回一个包含所有由 ; 分隔的键/值对的字符串，您必须自己解析该字符串。js-cookie npm 库提供了一个简单轻量级的 API，用于在 JavaScript 中读写 Cookie。

访问 Cookie 的现代原生方式是通过 Cookie Store API，该 API 仅在 HTTPS 页面上可用。

// Set a cookie. More options are available too.
cookieStore.set('auth_token', 'abc123def');

// Async method to access a single cookie and do something with it.
cookieStore.get('auth_token').then(...);

// Async method to get all cookies.
cookieStore.getAll().then(...);

// Async method to delete a single cookie.
cookieStore.delete('auth_token').then(() =>
  console.log('Cookie deleted')
);

CookieStore API 相对较新，可能并非所有浏览器都支持（截至 2024 年 6 月，在最新的 Chrome 和 Edge 中受支持）。请参阅 caniuse.com 以获取最新的兼容性信息。

localStorage

localStorage 用于存储即使在浏览器关闭并重新打开后仍保留的数据。它专为长期存储数据而设计。

• 存储容量：通常每个来源约 5MB（因浏览器而异）。
• 生命周期：localStorage 中的数据会一直存在，直到用户或应用程序显式删除。
• 访问：数据可在同一来源的所有选项卡和窗口中访问。
• 安全性：页面上的所有 JavaScript 都可以访问 localStorage 中的值。

// Set a value in localStorage.
localStorage.setItem('key', 'value');

// Get a value from localStorage.
console.log(localStorage.getItem('key'));

// Remove a value from localStorage.
localStorage.removeItem('key');

// Clear all data in localStorage.
localStorage.clear();

sessionStorage

sessionStorage 用于存储页面会话期间的数据。它专为临时存储数据而设计。

• 存储容量: 通常每个来源约 5MB（取决于浏览器）。
• 生命周期: sessionStorage 中的数据在页面会话结束时清除（即，当浏览器或选项卡关闭时）。重新加载页面不会销毁 sessionStorage 中的数据。
• 访问: 数据仅在当前选项卡（或浏览上下文）中可访问。不同的选项卡共享不同的 sessionStorage 对象，即使它们属于同一个浏览器窗口。在这种情况下，窗口指的是可以包含多个选项卡的浏览器窗口。
• 安全性: 同一页面上的所有 JavaScript 都可以访问该页面 sessionStorage 中的值。

// Set a value in sessionStorage.
sessionStorage.setItem('key', 'value');

// Get a value from sessionStorage.
console.log(sessionStorage.getItem('key'));

// Remove a value from sessionStorage.
sessionStorage.removeItem('key');

// Clear all data in sessionStorage.
sessionStorage.clear();

注意事项

还有其他客户端存储机制，例如 IndexedDB，它比上述技术更强大，但使用起来更复杂。

参考

• localStorage、sessionStorage、session 和 cookie 之间有什么区别？

TL;DR

所有这些方式（<script>、<script async> 和 <script defer>）都用于在 HTML 文档中加载和执行 JavaScript 文件，但它们在浏览器处理脚本的加载和执行方式上有所不同：

• <script> 是包含 JavaScript 的默认方式。浏览器在下载和执行脚本时会阻止 HTML 解析。在脚本执行完毕之前，浏览器不会继续渲染页面。
• <script async> 异步下载脚本，与解析 HTML 并行。在脚本可用后立即执行脚本，可能会中断 HTML 解析。<script async> 之间不会互相等待，并且以不特定的顺序执行。
• <script defer> 异步下载脚本，与解析 HTML 并行。但是，脚本的执行被推迟到 HTML 解析完成后，按照它们在 HTML 中出现的顺序。

这是一个表格，总结了在 HTML 文档中加载 <script> 的 3 种方式。

<script> 标签的用途

<script> 标签用于在网页中包含 JavaScript。async 和 defer 属性用于更改脚本的加载和执行方式/时间。

<script>

对于没有任何 async 或 defer 的普通 <script> 标签，当遇到它们时，HTML 解析会被阻止，脚本会被立即获取和执行。HTML 解析在脚本执行完毕后恢复。如果脚本很大，这可能会阻止页面的渲染。

将 <script> 用于页面依赖于正确渲染的关键脚本。

<!doctype html>
<html>
  <head>
    <title>Regular Script</title>
  </head>
  <body>
    <!-- Content before the script -->
    <h1>Regular Script Example</h1>
    <p>This content will be rendered before the script executes.</p>

    <!-- Regular script -->
    <script src="regular.js"></script>

    <!-- Content after the script -->
    <p>This content will be rendered after the script executes.</p>
  </body>
</html>

<script async>

在 <script async> 中，浏览器异步下载脚本文件（与 HTML 解析并行），并在脚本可用后立即执行（可能在 HTML 解析完成之前）。执行不一定按照它在 HTML 文档中出现的顺序执行。这可以提高感知的性能，因为浏览器在继续渲染页面之前不必等待脚本下载。

当脚本独立于页面上的任何其他脚本时，使用 <script async>，例如分析和广告脚本。

<!doctype html>
<html>
  <head>
    <title>Async Script</title>
  </head>
  <body>
    <!-- Content before the script -->
    <h1>Async Script Example</h1>
    <p>This content will be rendered before the async script executes.</p>

    <!-- Async script -->
    <script async src="async.js"></script>

    <!-- Content after the script -->
    <p>
      This content may be rendered before or after the async script executes.
    </p>
  </body>
</html>

<script defer>

与 <script async> 类似，<script defer> 也会与 HTML 解析并行下载脚本，但脚本仅在文档被完全解析并且在触发 DOMContentLoaded 之前执行。如果有多个，则每个延迟脚本按照它们在 HTML 文档中出现的顺序执行。

如果脚本依赖于完全解析的 DOM，则 defer 属性将有助于确保在执行之前完全解析 HTML。

<!doctype html>
<html>
  <head>
    <title>Deferred Script</title>
  </head>
  <body>
    <!-- Content before the script -->
    <h1>Deferred Script Example</h1>
    <p>This content will be rendered before the deferred script executes.</p>

    <!-- Deferred script -->
    <script defer src="deferred.js"></script>

    <!-- Content after the script -->
    <p>This content will be rendered before the deferred script executes.</p>
  </body>
</html>

注意事项

• async 属性应用于对页面初始渲染不关键且彼此不依赖的脚本，而 defer 属性应用于依赖于/被另一个脚本依赖的脚本。
• 对于没有 src 属性的脚本，将忽略 async 和 defer 属性。
• 包含 document.write() 的带有 defer 或 async 的 <script> 将被忽略，并显示类似“从异步加载的外部脚本对 document.write() 的调用被忽略”的消息。
• 即使 async 和 defer 有助于使脚本下载异步，但脚本最终仍在主线程上执行。如果这些脚本是计算密集型的，则可能导致 UI 滞后/冻结。Partytown 是一个库，它有助于将脚本执行重新定位到 web worker 并从 主线程 中移出，这对于您无法控制代码的第三方脚本非常有用。

延伸阅读

• <script>: The Script element | MDN
• async vs defer attributes

TL;DR

未声明

未声明 变量是在您将值分配给先前未使用 var、let 或 const 创建的标识符时创建的。未声明的变量将在全局范围内定义，在当前范围之外。在严格模式下，当您尝试分配给未声明的变量时，将抛出 ReferenceError。未声明的变量和全局变量一样糟糕。不惜一切代价避免它们！要检查它们，请将其用法包装在 try/catch 块中。

function foo() {
  x = 1; // 在严格模式下抛出 ReferenceError
}

foo();
console.log(x); // 1 (如果不在严格模式下)

对未声明的变量使用 typeof 运算符将给出 'undefined'。

console.log(typeof y === 'undefined'); // true

undefined

一个undefined的变量是已声明但未赋值的变量。它的类型是undefined。如果一个函数没有返回值，并且它的结果被分配给一个变量，那么该变量也将具有undefined值。要检查它，请使用严格相等运算符（===）或typeof进行比较，这将给出'undefined'字符串。请注意，您不应该使用宽松相等运算符（==）进行检查，因为它在值为null时也会返回true。

let foo;
console.log(foo); // undefined
console.log(foo === undefined); // true
console.log(typeof foo === 'undefined'); // true

console.log(foo == null); // true. 错误，不要使用它来检查一个值是否为 undefined!

function bar() {} // 如果没有任何返回，则返回 undefined。
let baz = bar();
console.log(baz); // undefined

null

一个 null 的变量将被显式地赋值为 null 值。它表示没有值，并且与 undefined 的不同之处在于它已被显式赋值。要检查 null，只需使用严格相等运算符进行比较。请注意，与上述类似，您不应该使用松散相等运算符 (==) 进行检查，因为它在值为 undefined 时也会返回 true。

const foo = null;
console.log(foo === null); // true
console.log(typeof foo === 'object'); // true

console.log(foo == undefined); // true. 错误，不要使用它来检查一个值是否为 null!

注意事项

• 养成一个好习惯，永远不要让你的变量未声明或未赋值。如果您不打算使用它们，在声明后显式地将 null 赋值给它们。
• 始终在变量使用前显式声明它们以防止错误。
• 在您的工作流程中使用一些静态分析工具（例如 ESLint、TypeScript 编译器），将启用您未引用未声明变量的检查。

实践

在 GreatFrontEnd 上练习实现 检查 null 和 undefined 的类型实用程序。

延伸阅读

• MDN Web 文档：null
• MDN Web 文档：undefined
• MDN Web 文档：ReferenceError

TL;DR

.call 和 .apply 都用于使用特定的 this 上下文和参数来调用函数。主要区别在于它们接受参数的方式：

• .call(thisArg, arg1, arg2, ...)：单独获取参数。
• .apply(thisArg, [argsArray])：将参数作为数组获取。

假设我们有一个函数 add，可以使用以下方式使用 .call 和 .apply 调用该函数：

function add(a, b) {
  return a + b;
}

console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3

Call vs Apply

.call 和 .apply 都用于调用函数，第一个参数将用作函数中 this 的值。但是，.call 将逗号分隔的参数作为下一个参数，而 .apply 将参数数组作为下一个参数。

记住这一点的一个简单方法是 C 代表 call 和逗号分隔，A 代表 apply 和参数数组。

function add(a, b) {
  return a + b;
}

console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3

使用 ES6 语法，我们可以使用数组以及用于参数的扩展运算符来调用 call。

function add(a, b) {
  return a + b;
}

console.log(add.call(null, ...[1, 2])); // 3

用例

上下文管理

.call 和 .apply 可以在调用不同对象上的方法时显式设置 this 上下文。

const person = {
  name: 'John',
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

const anotherPerson = { name: 'Alice' };

person.greet.call(anotherPerson); // Hello, my name is Alice
person.greet.apply(anotherPerson); // Hello, my name is Alice

函数借用

.call 和 .apply 都允许从一个对象借用方法并在另一个对象的上下文中使它们。当将函数作为参数（回调）传递并且原始 this 上下文丢失时，这很有用。.call 和 .apply 允许使用预期的 this 值调用该函数。

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

const person1 = { name: 'John' };
const person2 = { name: 'Alice' };

greet.call(person1); // Hello, my name is John
greet.apply(person2); // Hello, my name is Alice

调用对象方法的替代语法

.apply 可以通过将对象作为第一个参数传递，然后传递通常的参数来与对象方法一起使用。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

Array.prototype.push.apply(arr1, arr2); // Same as arr1.push(4, 5, 6)

console.log(arr1); // [1, 2, 3, 4, 5, 6]

分解上述内容：

1. 第一个对象 arr1 将用作 this 值。
2. 在 arr1 上调用 .push()，使用 arr2 作为参数数组，因为它使用 .apply()。
3. Array.prototype.push.apply(arr1, arr2) 等同于 arr1.push(...arr2)。

可能并不明显，但 Array.prototype.push.apply(arr1, arr2) 会导致修改 arr1。如果可能，使用面向 OOP 的方式调用方法会更清晰。

后续问题

• .call 和 .apply 与 Function.prototype.bind 有什么不同？

实践

在 GreatFrontEnd 上实践实现你自己的 Function.prototype.call 方法 和 Function.prototype.apply 方法。

延伸阅读

• Function.prototype.call | MDN
• Function.prototype.apply | MDN

TL;DR

Function.prototype.bind 是 JavaScript 中的一个方法，它允许你创建一个新函数，该函数具有特定的 this 值和可选的初始参数。它的主要目的是：

• 绑定 this 值以保留上下文：bind 的主要目的是将函数的 this 值绑定到特定的对象。当你调用 func.bind(thisArg) 时，它会创建一个与 func 具有相同主体的的新函数，但 this 永久绑定到 thisArg。
• 部分应用参数：bind 还允许你为新函数预先指定参数。传递给 bind 的任何参数（在 thisArg 之后）都将在调用新函数时添加到参数列表的前面。
• 方法借用：bind 允许你从一个对象借用方法并将其应用于另一个对象，即使它们最初并非设计为与该对象一起使用。

bind 方法在需要确保使用特定的 this 上下文调用函数的情况下特别有用，例如在事件处理程序、回调或方法借用中。

Function.prototype.bind

Function.prototype.bind 允许你创建一个具有特定 this 上下文的新函数，以及可选的预设参数。bind() 对于在要传递给其他函数的类方法中保留 this 的值非常有用。

bind 经常用于旧版 React 类组件方法，这些方法不是使用箭头函数定义的。

const john = {
  age: 42,
  getAge: function () {
    return this.age;
  },
};

console.log(john.getAge()); // 42

const unboundGetAge = john.getAge;
console.log(unboundGetAge()); // undefined

const boundGetAge = john.getAge.bind(john);
console.log(boundGetAge()); // 42

const mary = { age: 21 };
const boundGetAgeMary = john.getAge.bind(mary);
console.log(boundGetAgeMary()); // 21

在上面的例子中，当 getAge 方法在没有调用对象（作为 unboundGetAge）的情况下被调用时，该值为 undefined，因为 getAge() 中的 this 的值变为全局对象。boundGetAge() 的 this 绑定到 john，因此它能够获取 john 的 age。

我们甚至可以在另一个不是 john 的对象上使用 getAge！boundGetAgeMary 返回 mary 的 age。

用例

以下是经常使用 bind 的一些常见场景：

在回调中保留上下文并修复 this 值

当你将一个函数作为回调传递时，函数内部的 this 值可能无法预测，因为它由执行上下文决定。使用 bind() 有助于确保维护正确的 this 值。

class Person {
  constructor(firstName) {
    this.firstName = firstName;
  }
  greet() {
    console.log(`Hello, my name is ${this.firstName}`);
  }
}

const john = new Person('John');

// Without bind(), `this` inside the callback will be the global object
setTimeout(john.greet, 1000); // Output: "Hello, my name is undefined"

// Using bind() to fix the `this` value
setTimeout(john.greet.bind(john), 2000); // Output: "Hello, my name is John"

你也可以使用 箭头函数 来定义类方法，而不是使用 bind。箭头函数将 this 值绑定到其词法上下文。

class Person {
  constructor(name) {
    this.name = name;
  }
  greet = () => {
    console.log(`Hello, my name is ${this.name}`);
  };
}

const john = new Person('John Doe');
setTimeout(john.greet, 1000); // Output: "Hello, my name is John Doe"

函数的部分应用（柯里化）

bind 可以用来创建一个新函数，其中预先设置了一些参数。这被称为部分应用或柯里化。

function multiply(a, b) {
  return a * b;
}

// 使用 bind() 创建一个新函数，其中预先设置了一些参数
const multiplyBy5 = multiply.bind(null, 5);
console.log(multiplyBy5(3)); // Output: 15

方法借用

bind 允许你从一个对象借用方法并将它们应用于另一个对象，即使它们最初不是为该对象设计的。当你需要在不同对象之间重用功能时，这会很有用

const person = {
  name: 'John',
  greet: function () {
    console.log(`Hello, ${this.name}!`);
  },
};

const greetPerson = person.greet.bind({ name: 'Alice' });
greetPerson(); // Output: Hello, Alice!

练习

尝试在 GreatFrontEnd 上实现你自己的 Function.prototype.bind() 方法。

延伸阅读

• Function.prototype.bind() - JavaScript | MDN
• Function Binding | javascript.info

TL;DR

在构造函数中使用箭头函数作为方法的主要优点是 this 的值在函数创建时设置，之后无法更改。当构造函数用于创建新对象时，this 将始终引用该对象。

例如，假设我们有一个 Person 构造函数，它接受一个名字作为参数，并有两个方法来 console.log() 该名称，一个作为常规函数，一个作为箭头函数：

const Person = function (name) {
  this.firstName = name;
  this.sayName1 = function () {
    console.log(this.firstName);
  };
  this.sayName2 = () => {
    console.log(this.firstName);
  };
};

const john = new Person('John');
const dave = new Person('Dave');

john.sayName1(); // John
john.sayName2(); // John

// 常规函数可以更改其 `this` 值，但箭头函数不能
john.sayName1.call(dave); // Dave (因为 `this` 现在是 dave 对象)
john.sayName2.call(dave); // John

john.sayName1.apply(dave); // Dave (因为 `this` 现在是 dave 对象)
john.sayName2.apply(dave); // John

john.sayName1.bind(dave)(); // Dave (因为 `this` 现在是 dave 对象)
john.sayName2.bind(dave)(); // John

const sayNameFromWindow1 = john.sayName1;
sayNameFromWindow1(); // undefined (因为 `this` 现在是 window 对象)

const sayNameFromWindow2 = john.sayName2;
sayNameFromWindow2(); // John

这里的主要结论是，this 可以为普通函数更改，但 this 对于箭头函数始终保持不变。因此，即使您将箭头函数传递到应用程序的不同部分，您也不必担心 this 的值发生变化。

箭头函数

箭头函数是在 ES2015 中引入的，它提供了一种用 Javascript 编写函数的简洁方式。箭头函数的一个关键特性是它在词法上绑定了 this 值，这意味着它从封闭范围获取 this 值。

语法

箭头函数使用 => 语法代替 function 关键字。基本语法是：

const myFunction = (arg1, arg2, ...argN) => {
  // function body
};

如果函数体只有一个表达式，则可以省略大括号和 return 关键字：

const myFunction = (arg1, arg2, ...argN) => expression;

例子

// 带有参数的箭头函数
const multiply = (x, y) => x * y;
console.log(multiply(2, 3)); // 输出：6

// 没有参数的箭头函数
const sayHello = () => 'Hello, World!';
console.log(sayHello()); // 输出：'Hello, World!'

优点

• 简洁: 箭头函数提供更简洁的语法，尤其适用于短函数。
• 隐式返回: 它们对单行函数具有隐式返回。
• this 的值是可预测的: 箭头函数在词法上绑定 this 值，从封闭范围继承它。

局限性

箭头函数不能用作构造函数，并且与 new 关键字一起使用时会抛出错误。

const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor

它们也没有 arguments 关键字；参数必须通过在参数中使用 rest 运算符 (...) 来获取。

const arrowFunction = (...args) => {
  console.log(arguments); // Throws a ReferenceError
  console.log(args); // [1, 2, 3]
};

arrowFunction(1, 2, 3);

由于箭头函数没有自己的 this，因此它们不适合在对象中定义方法。 应该使用传统的函数表达式或函数声明。

const obj = {
  value: 42,
  getValue: () => this.value, // `this` does not refer to `obj`
};

console.log(obj.getValue()); // undefined

为什么箭头函数有用

箭头函数最显著的特征之一是它们与 this 的行为。与常规函数不同，箭头函数没有自己的 this。相反，它们在定义时从父作用域继承 this。这使得箭头函数特别适用于事件处理程序、回调和类中的方法等场景。

函数构造函数中的箭头函数

const Person = function (name) {
  this.firstName = name;
  this.sayName1 = function () {
    console.log(this.firstName);
  };
  this.sayName2 = () => {
    console.log(this.firstName);
  };
};

const john = new Person('John');
const dave = new Person('Dave');

john.sayName1(); // John
john.sayName2(); // John

// 常规函数可以更改其 `this` 值，但箭头函数不能
john.sayName1.call(dave); // Dave (因为 `this` 现在是 dave 对象)
john.sayName2.call(dave); // John

john.sayName1.apply(dave); // Dave (因为 `this` 现在是 dave 对象)
john.sayName2.apply(dave); // John

john.sayName1.bind(dave)(); // Dave (因为 `this` 现在是 dave 对象)
john.sayName2.bind(dave)(); // John

const sayNameFromWindow1 = john.sayName1;
sayNameFromWindow1(); // undefined (因为 `this` 现在是 window 对象)

const sayNameFromWindow2 = john.sayName2;
sayNameFromWindow2(); // John

箭头函数在事件处理程序中

const button = document.getElementById('myButton');

button.addEventListener('click', function () {
  console.log(this); // Output: Button
  console.log(this === button); // Output: true
});

button.addEventListener('click', () => {
  console.log(this); // Output: Window
  console.log(this === window); // Output: true
});

这在 React 类组件中特别有用。 如果您使用普通函数定义一个类方法，例如单击处理程序，然后将该单击处理程序作为 prop 传递到子组件中，则还需要在父组件的构造函数中绑定 this。 如果您改为使用箭头函数，则无需绑定 this，因为该方法将自动从其封闭的词法上下文中获取其 this 值。 请参阅此 文章 以获得出色的演示和示例代码。

延伸阅读

• 箭头函数表达式 - MDN
• 如何详细使用 JavaScript 箭头函数

TL;DR

JavaScript 中的原型继承是对象从其他对象继承属性和方法的一种方式。每个 JavaScript 对象都有一个名为 [[Prototype]] 的特殊隐藏属性（通常通过 __proto__ 或使用 Object.getPrototypeOf() 访问），它引用另一个对象，该对象被称为对象的“原型”。

当访问对象的属性，并且在该对象上找不到该属性时，JavaScript 引擎会查看对象的 __proto__，以及 __proto__ 的 __proto__，依此类推，直到它在其中一个 __proto__ 上找到定义的属性，或者直到它到达原型链的末尾。

这种行为模拟了经典继承，但实际上它更像是委托而不是继承。

以下是原型继承的示例：

// Parent object constructor.
function Animal(name) {
  this.name = name;
}

// Add a method to the parent object's prototype.
Animal.prototype.makeSound = function () {
  console.log('The ' + this.constructor.name + ' makes a sound.');
};

// Child object constructor.
function Dog(name) {
  Animal.call(this, name); // Call the parent constructor.
}

// Set the child object's prototype to be the parent's prototype.
Object.setPrototypeOf(Dog.prototype, Animal.prototype);

// Add a method to the child object's prototype.
Dog.prototype.bark = function () {
  console.log('Woof!');
};

// Create a new instance of Dog.
const bolt = new Dog('Bolt');

// Call methods on the child object.
console.log(bolt.name); // "Bolt"
bolt.makeSound(); // "The Dog makes a sound."
bolt.bark(); // "Woof!"