首页 > web前端 > js教程 > 正文

揭秘 JavaScript:了解执行上下文、提升和类型转换

DDD
发布: 2024-10-11 20:58:02
原创
860 人浏览过

JavaScript 表面上看起来很简单,但在幕后,发生了很多事情。今天,我们将探讨一些基本概念,例如执行上下文、提升、原始数据类型与非原始数据类型以及类型转换。如果您想编写更好、无错误的代码,这些对于理解它们至关重要。

Demystifying JavaScript: Understanding Execution Contexts, Hoisting, and Type Conversion

全局执行上下文和词法环境
当您在浏览器中运行 JavaScript 文件时,代码会在调用堆栈中逐行执行。但是,在运行任何代码之前,都会创建一个全局执行上下文。该上下文设置了 this 和 window 对象。在 Node.js 中,window 相当于 global,比较两者,你会发现 window === global 返回 true。

每当你调用一个函数时,都会创建一个新的词法环境。全局执行上下文是第一个被创建的,其中定义的所有函数都可以访问其变量。这就是 JavaScript 作用域链的工作原理——您可以从函数内部访问外部(全局)作用域中的变量。

提升:变量和函数
JavaScript 有一种称为提升的机制,其中变量和函数在编译期间被“移动”到其作用域的顶部。其工作原理如下:

变量:用 var 声明的变量会被部分提升,这意味着您可以在初始化它们之前引用它们,但在到达它们初始化的行之前,它们的值将是未定义的。
函数:使用函数声明语法声明的函数是完全提升的,这意味着您甚至可以在代码中声明该函数之前调用该函数。
示例:

console.log(a); // undefined
var a = 5;

console.log(b); // Error: b is not defined
let b = 10;

hoistedFunction(); // Works!
function hoistedFunction() {
  console.log('This function is hoisted!');
}

notHoistedFunction(); // Error: notHoistedFunction is not a function
var notHoistedFunction = function() {
  console.log('This function is not hoisted!');
}
登录后复制

如您所见,let 和 const 不像 var 那样被提升,并且函数表达式(如 notHoistedFunction)仅在运行时定义。

原始类型与非原始类型
JavaScript 有两种类型的数据:原始数据和非原始数据。

原始类型包括字符串、数字、布尔值、未定义、空、符号和bigint。它们是不可变的,这意味着它们的值不能改变。例如:

let x = 'hello';
x[0] = 'H'; // This won’t change the string, it stays 'hello'
登录后复制

非原始类型是对象、数组和函数。它们是可变的,并且它们的值可以更改,因为它们是通过引用传递的。例如:

let obj1 = { name: 'John' };
let obj2 = obj1; // Both obj1 and obj2 now reference the same object
obj2.name = 'Doe';
console.log(obj1.name); // Outputs: Doe
登录后复制

为了避免修改原始对象,您可以使用 Object.assign() 或扩展运算符 (...) 创建浅表副本。对于复制嵌套对象的深层复制,请使用 JSON.parse() 和 JSON.stringify()。

示例代码片段:浅复制与深复制

// Shallow copy example
let obj1 = { name: 'John', details: { age: 30 } };
let obj2 = { ...obj1 }; // Shallow copy
obj2.details.age = 40;
console.log(obj1.details.age); // Output: 40 (Shallow copy affects the original)

// Deep copy example
let obj3 = JSON.parse(JSON.stringify(obj1)); // Deep copy
obj3.details.age = 50;
console.log(obj1.details.age); // Output: 40 (Deep copy doesn’t affect the original)
登录后复制

类型转换与比较
JavaScript 是一种动态类型语言,这意味着您不必显式指定变量类型。然而,这有时会导致意外的行为,特别是在使用比较运算符时。

始终更喜欢使用三重等于 (===) 而不是双重等于 (==) 以避免类型强制。例如:

console.log(0 == '0'); // true (type coercion happens)
console.log(0 === '0'); // false (no type coercion)
登录后复制

对于特殊情况,例如比较 NaN,请使用 Object.is(),因为 NaN === NaN 返回 false。

console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true
登录后复制

JavaScript 的运行时和 Node.js
JavaScript 在单线程、同步运行时运行,这意味着它一次只能执行一项任务。这似乎是有限制的,但 JavaScript 通过使用 Web API 和回调队列来有效地处理异步任务。其工作原理如下:

当 JavaScript 遇到异步任务(如 setTimeout 或 HTTP 请求)时,它会将任务发送到 Web API。
调用堆栈继续执行剩余的代码。
异步任务完成后,会被添加到回调队列中,并在调用堆栈为空时执行。
Node.js 使用 V8 引擎和由 libuv 提供支持的非阻塞 I/O 系统,将此运行时扩展到服务器端。 Node.js 引入了单线程事件循环的思想,可以处理多个请求而不阻塞其他操作。

通过了解 JavaScript 如何处理执行上下文、提升、类型转换和异步任务,您将能够编写更清晰、更高效的代码。凭借 JavaScript 的动态特性,TypeScript 等工具可以通过提供静态类型检查来帮助您避免常见的陷阱,使您的代码做好生产准备。

以上是揭秘 JavaScript:了解执行上下文、提升和类型转换的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!