此文是对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封装文件处理的工具类