JavaScript高级程序设计 | Ch1-Ch3读书笔记_动态加载的脚本,也可以在一个相对封闭的局部作用域中-CSDN博客

本文链接：https://blog.csdn.net/qq_42376600/article/details/127202286

本文是《JavaScript高级程序设计（第4版）》前3章的读书笔记，涵盖JavaScript历史、实现（ECMAScript、DOM、BOM）、HTML中JavaScript的script元素特性（如defer、async）以及语言基础（包括变量声明、作用域、数据类型和操作符）。重点讨论了JavaScript在HTML中的应用，DOM与BOM的交互，以及let、const与var的差异和最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来自《JavaScript高级程序设计（第4版）》

Ch1-Ch3

1 什么是JavaScript

1.1 简短的历史回顾

1.2 JavaScript实现

JavaScript 是一门用来与网页交互的脚本语言，包含以下三个组成部分。

ECMAScript：由 ECMA-262 定义并提供核心功能
文档对象模型（DOM）：提供与网页内容交互的方法和接口
浏览器对象模型（BOM）：提供与浏览器交互的方法和接口

1.2.1 ECMAScript

ECMAScript，即 ECMA-262 定义的语言，并不局限于 Web 浏览器。ECMA-262 将这门语言作为一个基准来定义，以便在它之上再构建更稳健的脚本语言。Web 浏览器只是 ECMAScript 实现可能存在的一种宿主环境（host environment）。

1.2.1 DOM

文档对象模型（Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的XML。
DOM将整个页面抽象为一组分层节点。HTML或XML页面的每个组成部分都是一种节点，包含不同的数据。
DOM通过创建表示文档的树，让开发者可以随心所欲地控制网页的内容和结构。使用DOM API，可以轻松地删除、添加、替换、修改节点。

1.2.2 BOM

浏览器对象模型（Browser Object Model）主要针对浏览器窗口和子窗口（frame），不过人们通常会把任何特定于浏览器的扩展都归在BOM的范畴内。

1.3 JavaScript新版本

2 HTML中的JavaScript

2.1 script元素

<script src="http://www.somewhere.com/afile.js"></script>

浏览器在解析这个资源时，会向src属性指定的路径发送一个get请求，以取得相应资源。
来自外部域的代码会被当作加载它的页面的一部分来加载和解释，这样可以让我们通过不同域分发JavaScript。

2.1.1 标签位置

现代 Web 应用程序通常将所有 JavaScript 引用放在body元素中的页面内容后面。
如果把所有 JavaScript文件都放在head里，也就意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到body的起始标签时开始渲染），容易导致页面渲染明显延迟，在此期间浏览器窗口完全空白。

2.1.2 推迟执行脚本

在script元素上设置 defer 属性，相当于告诉浏览器立即下载，但延迟执行。

defer只适用于外部脚本。
HTML5 规范要求脚本应该按照它们出现的顺序执行，因此第一个推迟的脚本会在第二个推迟的脚本之前执行，而且两者都会在 DOMContentLoaded 事件之前执行

<!DOCTYPE html> 
<html> 
  <head> 
  <title>Example HTML Page</title> 
  <script defer src="example1.js"></script> 
  <script defer src="example2.js"></script> 
  </head> 
  <body> 
  <!-- 这里是页面内容 --> 
  </body> 
</html>

虽然这个例子中的script元素包含在页面的head中，但它们会在浏览器解析到结束的html标签后才会执行。

2.1.3 异步执行脚本

async和defer的异同：

同：
->都只适用于外部脚本
->都会告诉浏览器立即开始下载
异：
->标记为 async 的脚本并不保证能按照它们出现的次序执行。例子中，第二个脚本可能先于第一个脚本执行。

<html> 
  <head> 
  <title>Example HTML Page</title> 
  <script async src="example1.js"></script> 
  <script async src="example2.js"></script> 
  </head> 
  <body> 
  <!-- 这里是页面内容 --> 
  </body> 
</html>

2.1.4 动态加载脚本

除script标签之外的加载脚本的其他方式：
向DOM中动态添加script元素（创建一个script元素并将其添加到DOM中）

let script = document.createElement('script'); 
script.src = 'gibberish.js'; 
script.async = false; 
document.head.appendChild(script);

在把 HTMLElement 元素添加到 DOM 且执行到这段代码之前不会发送请求。
默认情况下，以这种方式创建的script元素是以异步方式加载的，相当于添加了 async 属性。不过这样做可能会有问题，因为所有浏览器都支持createElement()方法，但不是所有浏览器都支持 async 属性。
因此，如果要统一动态脚本的加载行为，可以明确将其设置为同步加载：

let script = document.createElement('script'); 
script.src = 'gibberish.js'; 
script.async = false; 
document.head.appendChild(script);

以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级。根据应用程序的工作方式以及怎么使用，这种方式可能会严重影响性能。要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：

<link rel="preload" href="gibberish.js">

2.1.5 XHTML中的变化

XHTML 虽然已经退出历史舞台，但实践中偶尔可能也会遇到遗留代码。

2.1.6 废弃的语法

2.2 行内代码与外部文件

推荐将JavaScript代码放在外部文件的原因：

可维护性
缓存
浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件，这意味着如果两个页面都用到同一个文件，则该文件只需下载一次，这最终意味着页面加载更快。
适应未来
包含外部 JavaScript 文件的语法在 HTML 和 XHTML 中是一样的。

在配置浏览器请求外部文件时，要重点考虑的一点是它们会占用多少带宽。

2.3 文档模式

2.4 noscript元素

3 语言基础

ECMAScript 的语法

3.1 语法

3.1.1 区分大小写

3.1.2 标识符

标识符，就是变量、函数、属性或函数参数的名称。

标识符的组成
->第一个字符必须是一个字母、下划线（_）或美元符号（$）
->剩下的其他字符可以是字母、下划线、美元符号或数字
驼峰大小写形式
关键字、保留字、true、false 和 null 不能作为标识符。

3.1.3 注释

//单行注释
/*多行
注释*/

3.1.4 严格模式

3.1.5 语句

分号;结尾
{ }代码块

3.2 关键字与保留字

关键字
《JavaScript高级程序设计（第4版）》未来的保留字

3.3 变量

var 在ECMAScript 的所有版本中都可以使用，而 const 和 let 只能在 ECMAScript 6 及更晚的版本中使用。

3.3.1 var关键字

（1）var声明作用域
->使用 var 操作符定义的变量会成为包含它的函数的局部变量。
例如，使用 var在一个函数内部定义一个变量，就意味着该变量将在函数退出时被销毁：

function test() { 
  var message = "hi"; // 局部变量
} 
test(); 
console.log(message); // 出错！

->在函数内定义变量时省略 var 操作符，可以创建一个全局变量：

function test() { 
  message = "hi"; // 全局变量
} 
test(); 
console.log(message); // "hi"

（2）var声明提升
使用 var 时，下面的代码不会报错。这是因为使用这个关键字声明的变量会自动提升到函数作用域顶部：

function foo() { 
  console.log(age); 
  var age = 26; 
} 
foo(); // undefined

之所以不会报错，是因为 ECMAScript 运行时把它看成等价于如下代码：

function foo() { 
  var age; 
  console.log(age); 
  age = 26; 
} 
foo(); // undefined

这就是所谓的“提升”（hoist），也就是把所有变量声明都拉到函数作用域的顶部。此外，反复多次使用 var 声明同一个变量也没有问题：

function foo() { 
  var age = 16; 
  var age = 26; 
  var age = 36; 
  console.log(age); 
} 
foo(); // 36

3.3.2 let声明

let与var的区别：

let 声明的范围是块作用域，var 声明的范围是函数作用域
let不允许同一个块作用域出现冗余声明，否则会报错
暂时性死区：let 声明的变量不会在作用域中被提升
全局声明：与 var 关键字不同，使用 let 在全局作用域中声明的变量不会成为 window 对象的属性（var 声明的变量则会）。
条件声明：与var不同，let不能使用条件声明模式（因为let声明的范围是块作用域）
for循环中的let声明

例子1：

if (true) { 
  var name = 'Matt'; 
  console.log(name); // Matt 
} 
console.log(name); // Matt 


if (true) { 
  let age = 26; 
  console.log(age); // 26 
} 
console.log(age); // ReferenceError: age 没有定义

例子2：

var name; 
var name; 
let age; 
let age; // SyntaxError；标识符 age 已经声明过了

例子3：
在 let 声明之前的执行瞬间被称为“暂时性死区”（temporal dead zone），在此阶段引用任何后面才声明的变量都会抛出 ReferenceError。

// name 会被提升
console.log(name); // undefined 
var name = 'Matt'; 

// age 不会被提升
console.log(age); // ReferenceError：age 没有定义
let age = 26;

例子4：
使用 let 在全局作用域中声明的变量不会成为 window 对象的属性。
但是，let 声明仍然是在全局作用域中发生的，相应变量会在页面的生命周期内存续。因此，为了
避免 SyntaxError，必须确保页面不会重复声明同一个变量。

var name = 'Matt'; 
console.log(window.name); // 'Matt' 

let age = 26; 
console.log(window.age); // undefined

例子5：
在使用 var 声明变量时，由于声明会被提升，JavaScript 引擎会自动将多余的声明在作用域顶部合并为一个声明。因为 let 的作用域是块，所以不可能检查前面是否已经使用 let 声明过同名变量，同时也就不可能在没有声明的情况下声明它。

 var name = 'Nicholas'; 
 let age = 26; 
</script> 
<script> 
 // 假设脚本不确定页面中是否已经声明了同名变量
 // 那它可以假设还没有声明过
 var name = 'Matt'; 
 // 这里没问题，因为可以被作为一个提升声明来处理
 // 不需要检查之前是否声明过同名变量
 let age = 36; 
 // 如果 age 之前声明过，这里会报错
</script>

例子6：
在使用 var 的时候，最常见的问题就是对迭代变量的奇特声明和修改，for 循环定义的迭代变量会渗透到循环体外部：
因为在退出循环时，迭代变量保存的是导致循环退出的值：5。在之后执行超时逻辑时，所有的 i 都是同一个变量，因而输出的都是同一个最终值。

for (var i = 0; i < 5; ++i) { 
 // 循环逻辑 
} 
console.log(i); // 5

for (var i = 0; i < 5; ++i) { 
    setTimeout(() => console.log(i), 0) 
} 
// 你可能以为会输出 0、1、2、3、4 
// 实际上会输出 5、5、5、5、5

改成使用 let 之后，这个问题就消失了，因为迭代变量的作用域仅限于 for 循环块内部：
而在使用 let 声明迭代变量时，JavaScript 引擎在后台会为每个迭代循环声明一个新的迭代变量，每个 setTimeout 引用的都是不同的变量实例。
所以 console.log 输出的是我们期望的值，也就是循环执行过程中每个迭代变量的值。

for (let i = 0; i < 5; ++i) { 
 // 循环逻辑
} 
console.log(i); // ReferenceError: i 没有定义

for (let i = 0; i < 5; ++i) { 
    setTimeout(() => console.log(i), 0) 
} 
// 会输出 0、1、2、3、4

3.3.3 const声明

const与let的区别：

const声明变量时必须同时初始化变量
尝试修改const声明的变量会导致运行时错误

例子：

const age = 26; 
age = 36; // TypeError: 给常量赋值

// const 也不允许重复声明
const name = 'Matt'; 
const name = 'Nicholas'; // SyntaxError
 
// const 声明的作用域也是块
const name = 'Matt'; 
if (true) { 
  const name = 'Nicholas'; 
} 
console.log(name); // Matt