《JavaScript高级程序设计》读书笔记

[CruxF]

前言

《JavaScript高级程序设计》是一直被推崇的前端开发经典书目，在网上也被成为“红宝书”或“红皮书”。而我在断断续续中把这本书过了一遍，然而却发现好像根本就学到多少！从那时我就开始想问题到底出现在哪，后来才发现其中存在的两个问题：1、妄图记住书中的全部信息，搞得自己身心俱疲；2、不加思考的摘抄和记录，稍过几天，马上忘得一干二净。

根据发现的问题，重新用一种偷懒的方式来整理一遍这本书的知识点，同时还关注了《喜马拉雅》同款说书节目，希望能带来一丝好效果，让自己成为一个更加专业的前端工程师，Let's Go！^_^

第 1 章 JavaScript简介

要想全面理解和掌握JavaScript，关键在于弄清楚它的本质、历史和局限性。

JavaScript实现

一个完整的JavaScript实现应该由以下三部分组成：

• 核心（ECMAScript）：这是由欧洲计算机制造商协会制定的JavaScript实现的基础与标准，目的是统一规范JavaScript程序的开发以及这门编程语言的发展。
• 文档对象模型（DOM）
• 浏览器对象模型（BOM）

文档对象模型

概念
文档对象模型是针对XML但经过扩展用于HTML的应用程序编程接口。DOM把整个页面映射为一个多层节点结构，HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。根据我的理解DOM就是：浏览器渲染HTML后出现的一种结构。

作用
通过DOM创建的这个表示文档的树形图，开发人员获得了控制页面内容和结构的主动权。借助DOM提供的API，开发人员可以轻松自如地删除、添加、替换或修改任何节点。

DOM级别

• 1级：由两个模块组成组成，DOM核心规定如何映射XML文档结构，为了简化对文档中任意部分的访问和操作；DOM HTML模块则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。
• 2级：增加了更多的事件与模块，也给出了众多新类型和新街口的定义。
• 3级：进一步扩展了DOM，引入了以统一方式加载保存文档的方法。

浏览器对象模型

开发人员使用BOM可以控制浏览器显示的页面以外的部分，从根本上讲，BOM只处理浏览器窗口和框架，但人们习惯上也把所有针对浏览器的JavaScript扩展算作BOM的一部分，下面就是一些这样的扩展

• 弹出新浏览器窗口的功能
• 移动、缩放和关闭浏览器窗口的功能
• 提供浏览器详细信息的navigator对象
• 提供浏览器所加载页面的详细信息的location对象
• 提供用户显示器分辨率详细信息的screen对象
• 对cookies的支持
• 像XMLHttpRequest和IE的ActiveXObject这样的自定义对象
  
  

第 2 章 在HTML中使用JavaScript

在如今移动互联网当道，以及Vue、React和Angular横行的时代，这个章节中的内容变得并不是那么的重要，下面简单说一下稍微要留意的三个点。

延迟脚本

在script元素中设置defer属性，相当于告诉浏览器立即下载，但是延迟执行。意思就是表明脚本在执行时不会影响页面的构造。

异步脚本

在script元素中设置async属性，目的是不让页面等待脚本下载和执行，从而异步加载页面其他内容。

同步调用和异步调用的区别

1、同步调用时一种阻塞式调用，一段代码调用另一段代码时，必须等待这段代码执行结束并返回结果后，代码才能继续执行下去。例如下面的代码

let n1 = 1
let n2 = 2
let n3 = 3
alert(n1)
alert(n2)
alert(n3)

// 运行结果： 1  2  3

2、异步调用是一种非阻塞式调用，一段异步代码还未执行完，可以继续执行下一段代码逻辑，当其他同步代码执行完之后，通过回调返回继续执行相应的逻辑，而不耽误其他代码的执行。例如下面的代码

let n1 = 1
let n2 = 2
let n3 = 3
alert(n1)
setTimeout(function() {
  alert(n2)
}, 2000)
alert(n3)

// 运行结果：1  3  2

当然，关于异步还有另外一个例子，这个栗子也引出了异步调用和回调这两个东东的概念，下面请看代码

function Person() {
  this.think = function(callback) {
    setTimeout(function() {
      console.log('想出来了！')
      callback()
    }, 5000)
  }
  this.answer = function() {
    console.log('我正在思考一个问题^_^')
  }
}
var person = new Person()
person.think(function() {
  console.log('花费5s，得到一个正确的思考')
})
person.answer()

// 我正在思考一个问题^_^
// 想出来了！
// 花费5s，得到一个正确的思考

第 3 章 基本概念

这章的内容表面看挺浅显的，但是一旦要深挖的话却是能挖掘出很多充满奥妙的东西，例如两个值在比较过程中所发生的类型转换，有兴趣的可以来看看这篇文章

也是从该章的内容才意识到：《JavaScript高级程序设计》这本书其实本质上是一本非常好的工具书，在JavaScript这块遇到不太明白的问题，拿出翻一番就好，要是想要一点不漏的把书中全部的知识在段时间内吸收的话，那简直是不可能的事情，因此接下来的笔记我不会像记录流水账一样把书中大部分内容摘抄下来，而是选择一些有代表性的东西说一说，同时也将网上一些比较好的解读分享出来

第 4 章 变量、作用域和内存问题

这一章对我而言，说简单也算是简单，也难也有难的一方面。简单的是对变量以及作用域的理解，难的是内存那一块看得十分的懵逼，接着就上网翻了一番，发现以下几篇认为比较好的文章，自己比较认同，所以我就不做重复的总结工作了，看看别人的就行，留点时间与精力去做更多的事情
1、javascript中创建变量时作用域和内存详解！
2、JavaScript--变量、作用域及内存
3、JavaScript 内存泄漏教程

第 5 章 引用类型

篇幅十分长的一章，里面涉及到的也是一些重要且基础的知识，有好多学习者们都对这章进行了总结与摘抄，我就不做重复劳动了，下面请看一些总结
1、JavaScript引用类型
2、JavaScript之引用类型

第 6 章 面向对象的程序设计

毫无疑问，这章节是一道坎，一道区分自身是初级程序员还是高级程序员的坎。这个章节的知识太重要了，唯一不足的地方是要掌握这章的知识实在是有难度，我们需要多维度的去学习该章节，比如其他人的总结：
javascript面向对象程序设计系列(一)---创建对象
JS面向对象的程序设计

第 7 章 函数表达式

在网上找了几篇总结，发现都是没办法很好的将该章节的重要内容以及精华全部覆盖和解析，所以呢，看书才是最重要的，网上的文章只能作为一种辅助工具：
JavaScript函数表达式1
JavaScript函数表达式2

第 8 章 BOM对象

这章没啥好说，基础知识，知道有那个对象，知道该对象之下有什么方法即可，最重要的是要脑海里时刻有它们的影子，这样才有灵活去运用它们的基础：
JavaScript中的BOM对象1
JavaScript中的BOM对象2，这篇总结挺好的。