highlight: a11y-dark

theme: channing-cyan

《JavaScript权威指南》第六版通读笔记

第一部分 javascript 核心

  1. var 声明的全局变量是全局对象(window)的属性，这是es规范中强制规定的。function同是，let、const则不是。

var a = "全局A" console.log(a) // 全局A console.log(window.a) // 全局A

  1. 函数内部的声明提前，是声明提前到函数顶部，但初始化赋值代码仍在原来的位置。
  2. javascript 中所有数字都是浮点型的，除法运算的结果也是浮点型的。
  3. 基本数据类型比较的时候会先转换为数字再进行比较，基本数据类型的比较是值的比较，对象的比较都是引用的比较。例如：

“1” == true // 结果为 true ，比较过程是 true 会转换为数字 1，“1”也会转换为数字 1，然后再比较。

  1. instanceof 运算符通过原型链 prototype 执行类型判断。所有对象都是 object 的示例，所有数组都是对象。
  2. var 在顶层代码中声明的变量是全局变量，无法通过 delete 删除，其作用域在整个 javascript 程序中；在函数体内使用 var 声明的变量则是局部变量，其作用域仅在该函数体内。
  3. Switch case 中的表达式和期望值是否相等的判断，是使用恒等“===”运算比较的。
  4. 当 Switch 在函数体内时可以使用 return 代替 break。
  5. 对象的序列化，是指将对象的状态转为字符串，也可将字符串还原为对象。es5提供了内置函数JSON.stingfy() 序列化对象，JSON.parse() 还原(反序列化)对象。
  6. 稀疏数组就是包含从0开始的不连续索引的数组。
  7. 闭包。函数对象可以通过作用域相互关联起来，函数体内部变量都可以保存在函数作用域内，这种特性在计算机科学文献中被称为闭包。

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。

直观的说就是形成一个不销毁的栈环境。

阮一峰的理解：闭包就是能够读取其他函数内部变量的函数。因此可以把闭包简单理解成"定义在一个函数内部的函数"。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

```js var add = (function () {

var counter = 0; return function () {return counter += 1;} })();

add();

add(); add();

// 计数器为 3 // 实例解析 // 变量 add 指定了函数自我调用的返回字值。 // 自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。 // add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。 // 这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。 // 计数器受匿名函数的作用域保护，只能通过 add 方法修改。 ```

  1. 闭包的性能考量。如果不是某些特定任务需要使用闭包，在其它函数中创建函数是不明智的，因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响。
  2. 闭包的用途。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
  3. 正则表达式的匹配，选择|、分组()、引用，非贪婪的匹配
  4. var 会产生“声明提前”现象，而 let 和 const 也会提升。但在变量声明之前引用这个变量， 将抛出引用错误(ReferenceError)。这个变量将从代码块一开始的时候就处在一个“暂时性死区”，直到这个变量被声明为止。。
  5. 适当的使用解构赋值，可以提高代码的可读性，尤其是返回结果为一组数据时，但也可能使代码变得晦涩难懂。

第二部分 服务端 javascript

  1. javascript 在web浏览器之外运行的两个代表，Rhino 和 Node。Rhino 是基于 Java 的 JavaScript 解释器，实现了通过JavaScript程序访问整个Java API。Node 是Google的 V8 JavaScript 解释器的一个特别版本，它在底层绑定 POSIX(Unix)API，包括文件、进程、套接字等，并侧重于异步I/O、网络和http。
  2. “服务端”JavaScript，意味着“web浏览器之外的任何事情”。

第三部分 客户端 javascript

  1. 当浏览器解析器遇到script元素时，它默认必须先执行脚本，然后再恢复文档的解析和渲染。这对于内联脚本没什么问题，但如果脚本源码是src属性指定的一个外部文件，这意味着脚本后面的文档部分在下载和执行脚本之前，都不会“出现在浏览器”中。

ps：不会出现在浏览器中：这指的是文档的文本内容已载入，但并未被浏览器引擎解析为DOM树。DOM树的生成是受JavaScript代码执行影响的，JavaScript代码会“阻塞”页面UI的渲染。

  1. script 脚本的执行只在默认的情况下是同步和阻塞的。script标签可以有defer和asyn属性(延迟和异步)，这可以改变脚本的执行方式(在支持他们的浏览器)。

延迟：这是指defer属性使得浏览器延迟脚本的执行，直到文档的载入和解析完成，并可以操作。

异步：async属性使得浏览器可以尽快地执行脚本，而不用在下载脚本时阻塞文档解析。

ps：defer和async属性像是在告诉浏览器，链接进来的脚本不会使用document.write()，也不会生成文档内容，因此浏览器在下载脚本时继续解析和渲染文档。

注意，延迟的脚本会按照他们在文档里的出现顺序执行。而异步脚本会在载入完成后执行，这意味着它们的执行顺序可能是无序的。

  1. 关于async和defer。

async属性是 HTML5 中的新属性。

async 属性规定一旦脚本可用，则会异步执行。

注释：async 属性仅适用于外部脚本(只有在使用 src 属性时)。

注释：有多种执行外部脚本的方法：

  • 如果 async="async"：脚本相对于页面的其余部分异步地执行(当页面继续进行解析时，脚本将被执行)
  • 如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
  • 如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本
  • 如果两者都在，则执行async，忽略defer。

只有 Internet Explorer 支持 defer 属性。async则被ie10+和其他现代浏览器支持。

  1. DocumentContentLoaded和onload的区别

DocumentContentLoaded在onload事件之前触发。DocumentContentLoaded在DOM树加载完之后立刻触发，DOM树加载完成之后，继续加载图片等外部文件，加载完成之后，onload事件触发。

5.客户端JavaScript时间线(执行顺序时间线)

document.readyState：loading=》interactive=》complete

①document.readyState=loading，浏览器创建dom对象，开始解析web页面。

②遇到没有defer和async属性的script元素，同步阻塞加载执行script指向的代码

③遇到有defer或async的script时，继续解析后面的文档内容，同时执行asyn的脚本或等待dom解析完生成可操作的dom树时执行defer指向的脚本。

④当文档解析完成，document.readystate=interactive。

⑤defer的脚本会按照出现顺序执行，可访问操作完整的dom树。asyn的脚本则是依据加载完成的先后来执行，这意味着它们是无序的。

⑥浏览器在dom树上触发DocumentContentLoaded事件，这意味着程序执行从同步脚本执行阶段转换到了异步事件驱动阶段。但要注意，这时可能还有异步脚本未执行完。

⑦这时文档已经完全解析完成，但浏览器可能还在等待其他内容的载入，如图片或异步脚本。当所有这些内容完全载入，且异步脚本完成载入和执行，document.readystate的值会变为“complete”，web浏览器触发window对象的onload事件。

⑧从此刻起，会调用异步事件，以异步响应用户输入事件、网络事件、计时器过期等。

  1. 判断网络状态：window.navigator.onLine，true为联网false为未联网。

onLine表示当前浏览器是否连接到网络。navigator.connection可以判断出网络具体状态，例如4g/3g，但无法监听到网络是在线还是离线。

```js const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

connection.addEventListener('change', () => { // connection.effectiveType返回的是具体的网络状态：4g/3g/2g console.log(connection.effectiveType); }); ```

  1. window.screen 提供窗口显示大小信息和可用的颜色数量信息。

availHeight 属性声明了显示浏览器的屏幕的可用高度，以像素计。

在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏) 的垂直空间。

availWidth 属性声明了显示浏览器的屏幕的可用宽度，以像素计。

bufferDepth 属性设置或返回在 off-screen bitmap buffer 中调色板的比特深度。

colorDepth 属性返回目标设备或缓冲器上的调色板的比特深度。

height 属性声明了显示浏览器的屏幕的高度，以像素计。

width 属性声明了显示浏览器的屏幕的宽度，以像素计。

deviceXDPI 属性返回显示屏幕的每英寸水平点数。

deviceYDPI 属性返回显示屏幕的每英寸垂直点数。

logicalXDPI 属性可返回显示屏幕每英寸的水平方向的常规点数。

logicalYDPI 属性可返回显示屏幕每英寸的垂直方向的常规点数。

8.confirm、prompt会产生阻塞，在大多数的浏览器里alert也会产生阻塞。showModalDialog模态对话框。

9.html 数据集属性，给html元素增加非标准的属性，绑定额外的信息，可以通过setAttribute()和getAttribute() 来实现。但这付出的代价是文档将不是合法有效的html。一个更好的选择是使用html5规范提供的data-格式来写html元素的非标准属性。例如：

```js

```

10.文档坐标和视口坐标(也称窗口坐标)，元素文档坐标相对于元素在文档的位置，元素视口坐标则是相对窗口的，当滚动滚动条时，视口坐标会跟着变化。

11.window.getSelection()：获取文档中选中的内容，这在一些选中翻译和查询场景中会非常有用。

```js


Title

文本1111标题1

文本22标题1

文本333标题1

```

12.html可编辑的内容

实现可编辑的html的两个方法：

① contenteditable：true/false 设置元素是否可编辑

② designMode：on/off 设置文档对象是否(例如iframe)可编辑

```js


可编辑的内容

这是另一段内容



这是另一段内容



这是另一段内容



不可编辑



```

13...document.write 只有在解析文档时才能使用 write()方法生成输出html到当前文档中，理解这点非常重要。如果在文档解析渲染已经完成之后调用，可能导致自动调用window.open(),这会清空当前文档。

14.动态html(DHTML)：给页面创造动画等视觉动态效果的JavaScript和CSS统称为动态html(DHTML)。现在这个术语已经不流行了，首次推出类似的脚本化视觉效果是革命性的。

15.层叠样式表(Cascading Style Sheet，CSS)，是一种指定html文档视觉表现的标准。

16.CSS非标准属性。厂商在实现非标准的CSS属性时，通常会加上前缀，甚至在将来会实现的标准也加，当标准被发布后，厂商会将前缀移除。Firefox：-moz-，Chrome和Safari：-webkit-，IE：-ms-，Opera：-o-。书写建议私有属性(非标准)放在前面，标准属性写在后面，例如：

js -webkit-transform:rotate(-3deg); /* Chrome/Safari */ -moz-transform:rotate(-3deg); /* Firefox */ -ms-transform:rotate(-3deg); /* IE */ -o-transform:rotate(-3deg); /* Opera */ transform:rotate(-3deg); /* 标准属性写在后面 */

17.CSS 盒模型(框模型)，是指包围一个html元素的盒子，它包括外边距、边框(图边框)、内边距和实际内容区。

  1. CSS裁剪属性clip，需要结合绝对定位或固定定位使用。例如

js clip: rect(0 20px 20px 10px); position: absolute; /* fixed */

  1. 建议在使用location、open()等window的属性的时候前面加上window.，因为Document和Window对象 会有一些相同的引用，比如location属性，在这两个对象中都有，这可能会造成一些“误会”。
  2. 事件冒泡是事件传播的第三个阶段。发生在文档元素上的事件大多数都会冒泡，值得注意的例外是focus、blur和。文档元素上的事件会冒泡。
  3. HTTP：Hypertext Transfer Protocol 超文本传输协议。
  4. http进度事件Progress。上传进度事件：onProgress，onUploadProgress。
  5. abort()。中止http请求事件：XMLHttpRequest的abort()。这在有时候会有用。
  6. comet。基于服务端推送事件的技术。
  7. web存储。web存储最初作为html5的一部分被定义成API的形式。但是后来被剥离出来作为一份独立的标准了。web存储所描述的localStorage和sessionStorage，这两个对象实际上是持久化关联数组，是名值对的映射表，名和值都是字符串。Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间(各家浏览器不同)。

localStorage和sessionStorage，这两个属性都带代表同一个storage对象，区别在于存储的有效期和作用域不同：数据可以存储多长时间，以及谁拥有数据的访问权。

  1. 离线web应用

那么在开发支持离线的 Web 应用时，就不能仅仅满足于静态页面的展现，还必需考虑如何让用户在离线状态下也可以操作数据。离线状态时，把数据存储在本地；在线以后，再把数据同步到服务器上。

涉及三个方面：①离线资源缓存、②在线状态检测、③本地数据存储

  1. web数据库：IndexedDB ，非关系型数据库，更接近NoSQL。
  2. html5 引入video、audio、canvas。canvas是一种图编辑技术，这是革命性的。
  3. WebGL是一个三维的绘图标准。WebGL也是HTML5规范的一部分，本质上是一个增强型的图形绘制库，与HTML5的2D Canvas类似，都使用了canvas元素。
  4. 跨域消息传递：postMessage()

使用场景：webview(嵌套在原生app中的网页与原生app的通信)，跨iframe、跨页面、跨域。

  1. 客户端JavaScript的一个基本特性就是单线程。
  2. web worker，ie10等大多数现代浏览器都支持。 worker可以解决客户端JavaScript单线程的问题。
  3. blob(Binary Large Object)，表示“二进制大对象”。在JavaScript中通常表示二进制数据。
  4. html5的draggable属性。元素设置draggable=“true”后，可拖动。例如图片拖动到左面可达到复制的效果。
  5. 文件系统api，html5文件系统API。火狐文档：https://developer.mozilla.org/zh-CN/docs/Web/API/FileSystem

HTML5的文件操作Api中

1.FileAPI，用于基础的客户端本地文件读取，目前大多数接口已经被主流浏览器支持，点击查看更多参考

2.FileSystemAPI，网络应用可以创建、读取、导航用户本地文件系统中的沙盒部分以及向其中写入数据。

  1. 客户端数据库。

Web SQL：关系型数据库。兼容性上Firefox和ie未实现，似乎也不打算实现，另外官方标准也停止了，他们更关注IndexedDB。

IndexedDB：一种对象数据库，而非关系型数据库。IndexedDB，他比支持SQL查询的数据库更简单，作用域也是限制在包含他们的文档源中，非同源页面不可访问，同源页面可以相互访问对方的数据库。在IndexedDB API中，一个数据库其实就是一个命名对象存储区(object store)的集合。

阮一峰老师关于indexedDB的介绍：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

javascript权威指南 中文 pdf javascript权威指南电子书_javascript

  1. web套接字，websocket。

WebSocket 是一种网络通信协议，支持双向通信。

WebSocket 协议在2008年诞生，2011年成为国际标准。

WebSocket支持双向通信，服务器能主动向客户端推送信息，客户端也可以主动向服务器发送信息，属于服务器推送技术的一种。