Review JavaScript

红宝书

综合

• script加载js会阻塞渲染，标签中 fefer 指异步加载js，在文档load之后按顺序执行。async指异步加载，加载完立即执行，不保证顺序
• 用来在不支持脚本的浏览器显示内容
• js 选中文字：
  • 1、document.createRange()
  • 2、range.selectNodeContents(element);
  • 3、window.getSelection() .removeAllRanges() .addRange(range)
• 数组队列与栈方法
  • .push(a, b, …) 在数组末尾推进数个值
  • .pop() 数组末尾删除一个值并返回这个值
  • .shift() 数组开头删除一个值并返回这个值
  • .unshift(a, b, …) 在数组开头推进数个值
• 数组的 sort 方法默认是把成员调用 .toString() 然后比较字符，会有bug，最好传一个比较函数
• 数组与字符串截取：
  • 1、slice(start, end),返回一个新的数组(字符串), 不会修改原来的 — 数组/字符串
  • 2、substring(start, end) 提取两个指定index之间的字符, 包括start不包括end, 不接受负的参数。 — 字符串
  • 3、splice(start, length, p1, …., pn)向/从数组中添加/删a除项目, 然后返回被删除的项目。会改变原来的数组。— 数组
  • 4、substr(start, length) — 字符串
• 函数没有重载，自己判断 arguments。arguments.callee指向函数自己，递归时用到。arguments.callee.caller指调用函数的函数
• 在读取基本类型时，相当于为基本类型创建了对应的基本包装类对象，方便数据操作，如：2.toString()。操作基本类型值的语句一旦完成就立刻销毁创建的包装对象
• 图片预加载可以new Image() = document.images[i].src
• 图片懒加载：
  • 1、取可视区域高度：document.documentElement.clientHeight
  • 2、取当前已经往下滚动了的距离：document.documentElement.scrollTop
  • 3、取当前元素距离顶部的距离：element.offsetTop
  • 4、当offsetTop < clientHeight + scrollTop 就证明当前元素在视窗底部以上(也可能已经是视窗订不上面看不到了)，设置当前元素的src进行加载

对象及原型

• 对象不再引用就设置为 null，解除引用，让垃圾回收
• Object.defineProperty, .defineProperties定义对象属性
  • 可配置，可遍历，(可写，值) 或者 (get，set)
• Object.getPrototypeOf 与 __proto__ 一样用于去对象的原型
• P.prototype.isPrototypeOf(obj)：用于测试 obj 是否存在于P的原型链上
• 构造函数做的事情：
  • 1、创建一个新对象
  • 2、将自己的作用域this赋给新对象
  • 3、执行代码（为这个新对象添加属性）
  • 4、返回新对象
• 继承最优解：
  • 1、在子类里执行父类.call(this)，为的是调用父类的构造方法并绑定到自己的this上
  • 2、子类的prototype继承父类的prototype，如果直接指向父类的prototype会导致子类修改自己的prototype会影响父类的实例
• 构造函数不加new当普通函数执行，就会将自己的this绑定所属上下，执行一波赋值操作
• hasOwnProperty：实例属性，in 不区分实例还是原型链上的属性，!hasOwnProperty && in 可以判定是原型链上的属性
• with与try对原型链影响：延长作用域链
  • 1、with 将接受的参数添加到作用域链最前端
  • 2、try 创建一个包含被抛出错误对象的声明的对象
  • 3、只要有finally就肯定执行，哪怕try或者catch里有 return
  • 4、window.onerror = function(msg, url, line){} return true 相当于对整个文档的catch
  • 5、assert 断言：一场处理高级方式，其实就是函数传bool和msg进，为false验证失败就抛错
• obj.hasOwnProperty(key)：实例属性，key in obj：不管是实例还是原型链上的属性。两者结合使用可以判断属性是对象的还是原型的。Object.getOwnPropertyNames(obj)：实例所有的属性，无论是否可枚举Object.keys(obj)：获取实例的可枚举的属性
• Object.create 第一个参数是要集成的对象，第二个与defineProperties参数一样，用来新增或覆盖父类属性
• 对象集成实践
  • 1、传统方式：A()，B()，B.prototype = new A() //注意这里子类的 prototype是父类的实例。缺点是给子类构造函数传参，父类构造函数，没办法执行
  • 2、强化模式：A(p)，B(p){A.call(this,p)}，B.prototype = new A() //会执行两次 A()
  • 3、牛逼模式：A(p)，B(p){A.call(this,p)}，B.prototype = Object.create(A.prototype) // 注意这里的prototype只能是集成，如果直接指向A.prototype就不是集成了，改子类会直接影响到父类

函数

• 每个函数都有自己的执行环境，执行环境有一个关联的变量对象，保存了环境中定义的所有变量和函数。浏览器里最外层的执行环境是window。
• 当执行流进入一个函数就会把函数的执行环境推进一个栈，函数执行后弹出
• 当代码在一个执行环境中执行时，会创建一个作用域链对象，如果执行环境是函数，作用域链最前端上就是函数的活动对象（一开始只包含arguments对象）。作用域链是为了执行环境有序访问变量和函数
• 内部函数在搜索this和arguments这两变量时只会搜到其活动对象为止
• 闭包：当外层函数执行后，返回的匿名函数的作用域链仍然在引用这个活动对象，导致外层没被销毁。要注意闭包不用的时候设为null，释放内存
• 匿名函数的执行具有全局性
• 函数内部定义了函数就是闭包
• 立即执行匿名函数可以减少闭包占用内存问题，因为没有指向匿名函数的引用，函数执行后就会释放
• 闭包和私有变量会导致在作用域链上多差几个层次，影响性能

正则

• regexp.exec(string) 返回一个匹配结果数组
• regexp.test(string) 返回一个是否匹配的BOOL值
• string.match(regexp) 同regexp.exec，返回一个匹配结果数组
• string.search(regexp) 返回字符串中第一个匹配项的索引
• string.replace(regexp, str/Fun)，第二个参数是字符串，如：xxx($1)用来取正则()匹配值并替换等等。第二个函数还可以是函数，经过更精细的操作return
• string.split(regexp) 将字符串切割成数组

BOM

• 全局对象不能通过 delete 操作删除，定义在window上的可以
• self始终指向window
• 窗口大小：
  • outerWidth, outerHeight：浏览器窗口大小
  • innerWidth, innerHeight：视口viewport大小
  • 在chrome中其实都是viewport大小
• document.documentElement.clientWidth, .clientHeight：页面可见区域大小
• location.assign(url)，调用 window.location = url和location.href = url相当于调用了assign
  • 每次修改location的属性(search,hostname,pathname,port)都会重新加载，hash属性除外但有历史记录
  • location.replace跳转页面，另history.replaceState是不刷新页面改url和历史记录且必须同源
• 客户端检测：能力检测，怪癖检测，用户代理检测

DOM

• childNodes 与 children不同，children没有文本和空白节点。firstChild, firstElementChild
• DocumentFragment文档片段，可以把node添加到这里面，再把这个片段插入文档
• Nodes包含很多类型常用的：Element, Text, Comment, DocumentFragment
• 创建