javascript 原生 API 总结归纳

Javascript notes

第一部分 EcmaScript5 的坑

类型之间的转换

转换之前=>转换之后	null	undefined	string	number	boolean	object
null			'null'	0	false
undefined			'undefined'	NaN	false
string				NaN or legal number	""=false	String()
number			number literal		0=false	Number()
boolean			true->'true'	true->1		Boolean()
object			toString>valueOf	valueOf>toString	true

• object to primitive 如果这个 object 是 Date 转 primitive, toString > valueOf。如果这个 object 不是 Date，那么 valueOf > toString

• primitive 转 object，自动包装，'x'.toUpperCase(), (123).toString(16)

• - * / & | ~ ^ ++ -- << >> object 转 primitive，强制 numberic 运算

• < > object 转 primitive，Numeric 优先 有 Number 全转 Number, 没有 全转 String 证据 "x" > 1 返回 false，"x" < 1 也返回 false

• + object 转 primitive，String concat 优先 首先 object 会转成 primitive 有 String 全转 String, 没有 转 Number

• if ? 会隐式的作一个临时 boolean 转换

• a && b 等价于 a?b:a

• a || b 等价于 a?a:b

• == 的坑

  • 只有包含 null 或 undefined， 则两边都不会发生任何类型转换，类型不一样就是 false 但是 null == undefined 返回 true
  • 两边都是 primitive 但不包含 null 和 undefined：
    • true 和 false 转成了 1 和 0
    • 有一个是 number 都转成 number，再比较
  • 只包含一个 object
    • object 转成 primitive 递归的再按照上述规则比较一次
  • 都是 object
    • 比较指针指向的内存段位置是否相同

• null 是 keyword，而 undefined 是一个只读的 value, 没有返回值的函数返回 undefined，call 一个 函数，如果不给参数，那么 name 参数就是 undefined

Scope

JavaScript’s function scope means that all variables declared within a function are visible throughout the body of the function.
The variable declaration is “hoisted” to the top.
If you use var to declare the variable in global scope, the property that is created is nonconfigurable, which means that it cannot be deleted with the delete operator.
变量解析，作用域链

操作符

• instanceof 操作符涉及到原型链

var b = 1;
(a = b) == 1;

会返回 true

• delete
  delete 删除不掉 built-in core properties 和用 var 声明的 global properties

delete operator only deletes own properties, not inherited ones. delete does not remove properties that have a configurable attribute of false

• switch
  switch 匹配采取的策略是 ===

• in 判断一个 property 是不是 ownproperty

Object

• 一个 object 的任何一个 property 都具有 value writable configurable enumerable 四个元属性 Object.getOwnPropertyDescriptor Object.defineProperty
• Object.prototype 没有 prototype （最上层对象）
• Object.create Object.hasownproperty Object.propertyIsEnumerable
• Object.keys 返回 enumerable 且 own property
• for in 会 loop enumerable 的 property 无论是 inherits 还是 own 的
• 设置 getter 和 setter 利用 get 和 set 关键字

Function

• 任何时候都要避免使用 eval
• function funcname 式定义会被提升到外层function内的头部, 而 var funcname = function(){} 只有 funcname 这个 variable 被提升到头部
• 不要改变 arguments 这个 array-like 对象内的值

const assert = require('assert');
assert(f1 == undefined);
assert(f2 instanceof Function);

var f1 = function(){
    console.log('f1 executed');
};

function f2(){
    console.log('f2 executed');
}

"use strict"

• with 不可以出现
• 变量必须被声明才可以使用
• 没有上下文的 function 函数体内的 this 是 undefined 而不是 global
• 只读 property，例如 undefined，如果被赋值会抛出异常
• arguments.callee 和 arguments.caller 都不可以调用

第二部分 Dom 和 Bom Api

Bom

• window.location 常用于跳转 window.location.search window.location.assign window.location.replace
  • 返回顶部的小技巧: window.location = '#top'
• window.history 历史纪录，用于前进或者后退 history.back history.forward history.go
• window.navigator navigator.userAgent navigator.platform ... 用于查询客户端信息
• window.setTimeout 异步执行 api
• window.setInterval 以一定间隔异步执行 同时返回一个 ID 用于 clearInterval
• window.clearInverval 清除 clearInterval
• window.open 打开新窗口
• window.getSelection().toString()
• 窗口位置
  • window.pageXOffset window.pageYOffset ( 滚动）
  • window.innerWidth window.innerHeight
  • window.scrollIntoView()
• 滚动
  • 绝对坐标 window.scrollTo(x,y)
  • 相对坐标 window.scrollBy(x,y)

Dom

<a href="javascript:void"></a>

• 防范 xss 攻击，后端存储用户名、个人介绍等展示在前台的内容时要做文本校验。前端渲染来自后端的数据时要做 html 转义

可以避免超链接弹出窗口

• Dom 继承链
  Node > HTMLDocument, Text, Comment, HTMLElement
• Dom Query
  • getElements* querySelectorAll 返回 NodeList 类型，可以被索引，array-like，可以用 Array.prototype.call 方法
  • getElementById, querySelector 返回 HTMLElement
• 遍历 parentNode childNodes firstChild lastChild nextSibling previousSibling nodeType nodeValue(用于 Text 或者 comment), nodeName (大写)
• Dom operations
  • HTMLElement.prototype.setAttribute
  • HTMLElement.prototype.getAttribute
  • HTMLElement.hasAttribute
  • HTMLElement.removeAttribute
  • HTMLElement.prototype.classList 提供了便捷的 class 设定
  • HTMLElement.prototype.innerHTML 直接操作 document 无转义操作
  • HTMLElement.prototype.textContent 写入转义特殊字符，读取也会解析 html 转义符
  • HTMLDocument.prototype.createElement
  • HTMLDocument.prototype.createComment
  • HTMLDocument.prototype.createText
  • Node.prototype.appendChild
  • Node.prototype.insertBefore
  • Node.prototype.removeChild
  • Node.prototype.replaceChild
  • Node.prototype.cloneNode
• 位置和宽度 会随着窗口滚动变化
  • HTMLElement.prototype.getBoundingClientRect().left
  • HTMLElement.prototype.getBoundingClientRect().right
  • HTMLElement.prototype.getBoundingClientRect().top
  • HTMLElement.prototype.getBoundingClientRect().bottom
  • HTMLElement.prototype.offsetLeft
  • HTMLElement.prototype.offsetRight
  • HTMLElement.prototype.offsetHeight
  • HTMLElement.prototype.offsetWidth
• document.cookie

event

• event handler
  • 事件先后顺序 document.onready > 图片和 async script 的下载 >window.onload
  • 事件是向上冒泡返回的 stopPropagation 可以停止冒泡
  • element.addEventListener 以 append 的方式添加 事件 handler
  • element.onclick 以覆盖的方式添加 handler，但是覆盖不了 addEventListener 添加的 handler
• event object
  • event.target
  • event.stopPropagation()
  • event.preventDefault()
• 和设备有关的输入事件
  • mousedown mousemove mouseup
  • keyup keydown keypress
  • touchmove gesturechange
• 和设备无关的事件
  • click, textinput, change
• UI 事件
  • focus, submit,
• 状态改变事件
  • load,
• form 事件
• window 事件
  • window.onload
  • window.onscroll
  • window.onresize
• 鼠标事件
  • mouseover mouseup mousedown click dblclick mousewheel
  • event.clientX, eventclientY
  • event.altKey ...
• 键盘事件
  • event.keyCode, event.altKey event.key event.char
  • keydown keyup keypress
• dom 事件
  • textinput
• html5 event
  • canplay, ended ...
• text
  • textInput
• addEventListener 第三个参数为 true 时，会 capture 事件，而不是 bubble