javascript高级程序设计pdf_《javascript高级程序设计》核心知识总结

此文是对js高级程序设计一书难点的总结，也是笔者在看了3遍之后的一些梳理和感想，希望能借此巩固js的基础和对一些核心概念有更深入的了解。

摘要

• js基本的数据类型和关键点
• 变量，作用域和内存问题
• 垃圾回收机制
• 面向对象的程序设计
• 实现类与继承的经典方式
• BOM和DOM对象
• DOM扩展与高级API介绍
• 高级编程技巧
• 跨文档消息传递和ajax封装
• web worker基本实现与demo

一. Number类型关键点讲解

1.进制问题

1. 八进制字面量在严格模式下无效，会导致支持该模式的js引擎抛出异常
2. 十六进制字面量的前两位必须是0x，后根任何十六进制数字（0-9及A-F）
3. 在进行算术计算时，所有以八进制和十六进制表示的数值最终将被转换成十进制数值

2.浮点数注意点

浮点数值的最高精度是17位小数，但在进行算术计算时精度远远不如整数。例如 0.1 + 0.2 === 0.300000000000004(大致这个意思，具体多少个零请实际计算) 所以永远不要测试某个特定的浮点数值

3.数值

1. 使用isFinite(num)来确定一个数字是否有穷
2. ECMAScript能够表示的最小值保存在变量 Number.MIN_VALUE 中，最大值保存在 Number.MAX_VALUE 中。
3. NaN表示非数值。在ECMAScript中，任何数值除以非数值会返回NaN,因此不会影响其他代码的执行。
4. isNaN()用来确定传入的参数是否为"非数值"。会对参数进行转化，不能被转化为数值的则返回true。

4.数值转换

parseFloat主要用于解析有效的浮点数字，始终会忽略前导的零，可识别所有的浮点数格式，但是十六进制格式的字符串始终会被转换成零。

二. 字符串

1. toString() 转换为字符串

let 

三.循环

1. break和continue

• break语句会立即退出循环，强制执行循环后面的语句
• continue语句是退出当前循环，继续执行下一循环

// 结合label,更精确的控制循环

2. switch语句在比较值时使用的是全等操作符，所以不会发生类型转换

3. 函数参数arguments和命名参数

function 

此时读取n2和arguments[1]并不会访问相同的内存空间，他们的内存空间是独立的，但他们的值保持同步

四.变量，作用域和内存问题

1.传递参数

1.所有的参数都是按值传递的。在向参数传递引用类型的值时，会把这个值在内存中的地址复制给一个局部变量，因此这个局部变量的变化会反应在函数外部

2.当在函数内部重写obj时，这个变量引用的就是一个局部对象。而这个局部对象会在函数执行完毕后立即被销毁。

2.垃圾收集

1. js最常用的垃圾收集机制为“标记清除”，另一种不常用的是“引用计数”。
2. 原理：找出不再继续使用的变量，然后释放其内存空间。垃圾收集器会在固定的时间间隔周期性的执行这一操作。

3.管理内存

解除引用：数据不再有用，将其值设置为null

五.引用类型

1.数组总结

// 检测数值ES5方法

2.Date对象

1. new Date(str | year,month,day,...) 可以接收日期格式的字符串，也可以是year, month, day参数的数字
2. Date.now() 返回调用这个方法的日期时间的毫秒数，使用 +new Date()也可以得到相同的效果

3.RegExp对象

1. 由于RegExp构造函数的模式参数是字符串，所以在某些情况下要进行双重转义，对于n双重转义为n
2. 使用正则字面量时会共享一个RegExp实例，而正则构造函数会为每次调用创建一个新的regExp实例
3. RegExp实例属性
4. global / ignoreCase(忽略大小写)
5. lastIndex(表示开始搜索下一个匹配项的字符位置，从零开始)
6. source(正则表达式的字符串表示)
7. 实例方法
8. .exec(text) text为要应用模式的字符串，返回包含第一个匹配项信息的数组。 返回值分析: 返回值是数组的实例，但包含两个额外的属性：index(表示匹配项在字符串中的位置)，input表示应用正则表达式的字符串

let 

1. test(text) 接收一个字符串参数，在模式与该参数匹配是返回true

// RegExp构造函数属性

4.函数

1. 函数内部属性 arguments对象有一个名叫callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数 arguments.callee(arg) //调用函数自身，在严格模式下运行时会导致错误
2. 函数属性 length 表示函数希望接收的命名参数的个数 prototype 保存所有实例方法
3. 函数方法

apply

5.基本包装类型

1. Number

toFixed

1. String

charAt

1. 单体内置对象

Global对象

六.面向对象的程序设计

1.属性类型

// 1.数据属性

2.创建对象

1.

3.继承（原型链是实现继承的主要方式）

1.

七.函数表达式

闭包与变量

1. 闭包只能取得包含函数中任何变量的最后一个值

解决方案
    

this对象

1. 在全局函数中，this等于window,而当函数被当作某个对象的方法调用时，this等于那个对象。不过，匿名函数的执行环境具有全局性，因此其this对象通常指向window
2. (object.say = object.say)() 此时函数内部this指向window,因为该赋值表达式的值是函数本身，所以this的值不能得到维持

内存泄漏

• 1.如果闭包的作用域链中保存着一个html元素，那就意味着该元素永远无法销毁。
• 2.闭包会引用包含函数的整个活动对象，而其中包含着html,因此有必要把其设置为null

function 

八.BOM对象

1.window

• BOM的核心对象是window,他表示浏览器的一个实例。
• 全局变量不能通过delete操作符删除,而直接定义在window对象上的属性可以删除

2.窗口位相关属性

窗口位置(不同浏览器实现不一样，所以位置获取的不精确和统一)

let 

3.系统对话框

// 显示打印对话框

4.location对象

// location即是window对象的属性也是document对象的属性

5.navigator对象

navigator

6.history对象

1. 

九.客户端检查

1.检查用户代理

let 

十. DOM

1.将NodeList对象转换为数组

let 

2.hasChildNodes() ---在节点包含一或多个子节点的情况下返回true

3.操作节点

1.

4.访问节点

Node

5.Document类型

1. 

6.Element类型

1.

7.DocumentFragment类型

1.

十一.DOM扩展

1.选择符

• querySelector() // 参数为css选择符，返回与该模式匹配的第一个元素，没有找到返回null
• querySelectorAll() // 返回所有匹配的元素，底层实现类似于一组元素的快照

2.元素遍历(不包含文本节点和注释)

// ie9+支持

3.与类相关的扩充

classList
    

4.焦点管理

元素获得焦点的方式有： 页面加载，用户输入，在代码中调用focus

1.

5.HTMLDocument的变化

readyState属性
    

6.插入标记

insertAdjacentHTML

7.children

// 获取元素集合，只包含元素节点

8.contains() 判断某个节点是否是另一个节点的后代

// 例子

十二.DOM2和DOM3

1.框架的变化

// 访问内联框架的文档对象,如果内联框架来自不同域或者不同协议，访问该文档时会报错

2.元素大小

1.

十三.事件

1.事件对象(event)

1. 

2.事件类型

1.

3.性能与内存

如果在页面写在之前没有清理干净事件处理程序，那他们就会滞留在内存中，每次加载完页面再卸载时，内存中滞留的对象就会增加，因为事件处理程序占用的内存并没有被释放。 【解决方案】再页面卸载之前，先通过onunload事件处理程序移除所有事件处理程序。但是使用onunload时页面不会被缓存bfcache（即往返缓存）中。

十四.表单脚本

1.选择文本inputEl.select() [用于选择文本框中的所有文本，不接受参数，可以在任何时候调用]

2.选择事件（select） //ie9+ 用户选择了文本并释放鼠标时触发

3.取得选择的文本

// ie9+ 为被选择的元素添加了两个属性，selectionStart和selectionEnd,保存的是基于零的数值，表示所选的文本范围

4.选择部分文本

// 所有文本框都有一个setSelectionRange(startIndex, endIndex)

5.过滤输入

1.

6.富文本编辑

1.使用contenteditable属性 1.有三个属性: true,false,inherit 2.例子：

2.操作富文本document.execCommand()

三个参数： 要执行的命令的名称，表示浏览器是否为当前命令提供用户界面的一个布尔值，执行命令必须的一个值（如果不需要值，则为null）

3.表单与富文本 *** 要想将富文本中的值传递给表单，则可在表单内创建一个隐藏的表单字段，将富文本的值赋给该表单字段的值

十四.HTML5脚本编程

1.跨文档消息传递

主要指来源于不同域的页面间的消息传递，主要利用iframe

// 源页面

2.原生拖放

3.自定义媒体播放

// 使用video,audio元素的play()和pause()方法，可以手工控制媒体的播放

十五.ajax和comet

// ajax

十六.高级技巧

1.高级函数

//安全类型检测

2.防篡改对象

// 不可扩展对象,使用该方法可以让传入的对象禁止添加属性和方法

3.高级定时器

// 函数节流

4.自定义事件

function 

十七.离线应用与客户端存储

1.离线检测

// 离线检测属性

2.应用缓存

// 描述文件： offline.manifest，列出要下载和缓存的资源

3.web存储机制（cookie,localStorage,sessionStorage,indexedDB）

十八.新兴API

1.requestAnimationFrame()

(

2.File API

//通过监听change事件并读取files集合，就可以知道每个文件信息

3.web workers-- 主要针对复杂的计算，不会影响用户体验

// 页面worker

最后

明天将推出CMS全栈的Node部分的实现。包括： 如何使用babel7让node支持更多es6+语法以及nodemon实现项目文件热更新和自动重启 node项目的目录结构设计和思想 如何基于ioredis和json-schema自己实现一个类schema的基础库 基于koa-session封装一个sessionStore库 基于koa/multer封装文件处理的工具类 实现自定义的koa中间键和restful API * 模版引擎pug的基本使用及技巧

后期将更详细的介绍系统的具体实现过程和细节以及服务器相关的配置，包括项目的开源地址我会在十一之前告诉大家，欢迎在公众号《趣谈前端》加入我们一起讨论。

更多推荐

• 基于nodeJS从0到1实现一个CMS全栈项目（上）
• 用css3实现惊艳面试官的背景即背景动画（高级附源码）
• 记一次老项目中的跨页面通信问题和前端实现文件下载功能
• 5分钟教你用nodeJS手写一个mock数据服务器
• JavaScript 中的二叉树以及二叉搜索树的实现及应用
• 用 JavaScript 和 C3 实现一个转盘小游戏
• 教你用200行代码写一个爱豆拼拼乐H5小游戏（附源码）
• 基于react/vue生态的前端集成解决方案探索与总结
• 如何用不到200行代码写一款属于自己的js类库)
• 一张图教你快速玩转vue-cli3
• 3分钟教你用原生js实现具有进度监听的文件上传预览组件
• 使用Angular8和百度地图api开发《旅游清单》
• js基本搜索算法实现与170万条数据下的性能测试
• 《前端算法系列》如何让前端代码速度提高60倍
• vue高级进阶系列——用typescript玩转vue和vuex