JavaScript面向对象编程指南（第2版）》读书笔记

一、对象

1.1 获取属性值的方式

water = {
  down: false
}
console.log(water.down) // false
console.log(water['down']) // false

1.2 获取动态生成的属性的值

var type = 'down'
console.log(water[type]) // false

二、数组

2.1 检测是否为数组

typeof([1,2])  // object
Array.isArray([1,2])  // true
Object.prototype.toString.call([1,2])  // [object Array]
Array.isArray(Array.prototype)  // true
Object.prototype.toString.call(Array.prototype)  // [object Array]

2.2 增加数组长度导致未赋值的位置为undefined

减少数组长度则会裁去多余的值。

var x = [1,2];
x.length = 7;
console.log(x);  // [1, 2, undefined × 5]
x.length = 1;
console.log(x);  // [1]

2.3 用闭包实现简易迭代器

var next = setup([3,3,9]);
function setup(x){
  var i = 0;
  return function(){
    console.log(x[i++]);
  }
}
next();  // 3
next();  // 3
next();  // 9
next();  // undefined

三、作用域

3.1 函数作用域（局部变量）

不能在函数体外直接访问函数内变量。

function water() {
 var direction = 'down'
}
console.log(direction)  // Uncaught ReferenceError: direction is not defined

3.2 不存在块级作用域

for、if等代码块中的变量不是局部变量。

if(water){
  var down = true
}
console.log(down)  // true

3.3 变量泄露

函数体内的变量未声明，会在函数第一次执行的时候泄露成全局变量。

function water() {
  direction = 'down'
}
water()  // 执行函数
console.log(direction)  // down

3.4 变量提升

已声明的变量名会提升至顶部，值不会提升。

var down = true
function water() {
  // 变量提升覆盖了外部down，由于值没有提升，所以为undefined
  console.log(down)  // undefined
  var down = false  // false
  console.log(down)
}
water()

3.5 临时作用域

call和apply借用另一个对象的方法，提高代码复用
第一个参数为this的指向，第二个参数为传入的参数，apply传入数组
构造函数不使用new this的值会指向window

四、闭包

4.1 操作闭包中的值

var nature = (function() {
  var water = {}
  water.down = false
  water.get = function(type) {
    return water[type]
  }
  water.set = function(type,val) {
    water[type] = val
    return typeof(val) === 'boolean' ? true : false
  }
  return {
    getWater: water.get,
    setWater: water.set
  }
})()
console.log(nature.getWater('down'))  // false
console.log(nature.setWater('down',true))  // true

五、事件监听

var event = {
  add: function ( dom,type,func ) {
    if(window.addEventListener){
      dom.addEventListener( type,func,false )
    }
    // 兼容IE9以下
    else if(document.attachEvent) {
      dom.attachEvent('on' + type,func)
    }
    else {
      dom['on' + type] = func
    }
  },
  del: function ( dom,type,func ) {
    if(window.addEventListener){
      dom.removeEventListener( type,func,false )
    }
    else if(document.attachEvent) {
      dom.detachEvent('on' + type,func)
    }
    else {
      dom['on' + type] = null
    }
  }
}
var f = function(){
  console.log('event received')
}
event.add(document.body,'click',f)
event.del(document.body,'click',f)

六、类型检测

6.1 常用类型

typeof(1)  // "number"

number/boolean/string/undefined/object/function

6.2 继承检测

function Water (name,status) {
  this.name = name
  this.status = status
}
var seaWater = new Water('sea','warm')
seaWater instanceof Water  // true

6.3 NaN和isFinite检测

NaN不等于NaN，检测需要使用isNaN函数。

NaN === NaN  // false
isNaN(NaN)  // true

七、类型转换

7.1 转为整形

parseInt和parseFloat碰到第一个异常字符就会终止。

console.log(parseInt(66.5t))  // 66.5
console.log(parseInt(t66.5t))  // NaN

7.2 null和undefined

数值超出范围则显示Infinity。

console.log(1*undefined)  // NaN
console.log(1*null)  // 0

八、URL编码

8.1 编码

var src = "http://www.cnblogs.com/bergwhite/p/6657943.html"
var srcURI = encodeURI(src)  // "http://www.cnblogs.com/bergwhite/p/6657943.html"
var srcURICom = encodeURIComponent(src)  // "http%3A%2F%2Fwww.cnblogs.com%2Fbergwhite%2Fp%2F6657943.html" 

8.2 解码

decodeURI(srcURI)  // "http://www.cnblogs.com/bergwhite/p/6657943.html"
decodeURIComponent(srcURI)  // "http://www.cnblogs.com/bergwhite/p/6657943.html"

九、JSON格式

9.1 转为JSON格式

var water = {
  down: false
}
var waterJSON = JSON.stringify(water)  // "{"down":false}"

9.2 转为对象

JSON.parse(waterJSON)  // Object {down: false}

十、兼容性问题

parseInt(09) // ES5中默认不转换八进制，ES3会默认作为八进制
parseInt(09,10)  // 当值为日期的时候，作为十进制处理

感谢大家的阅读。

一、基本类型

1.1 字符串

判断是否包含某个字符串

indexOf方法中，找到相关字符串会返回第一次出现的下标。没有找到就会返回-1，利用这个特性可以判断字符串是否存在。

console.log('Fine'.indexOf('in') !== -1)  // true

把字符串按照一定规则分离成数组

下面是以空格为分割标志。

console.log('I seek you'.split(' '))  // ["I", "seek", "you"]

复制指定位置的字符串

传入的两个参数分别是开始的位置和结束的标记。看清楚，第二个参数本身的小标所表示的内容不会被复制，第二个参数是用来标记，这里是结束位置。

console.log('I seek you'.slice(2,6))  // seek
console.log('I seek you'.substring(2,6))  // seek

拼接字符串

console.log('I seek you'.concat(' too.'))  // I seek you too.

查看字符串中的字符

console.log('I seek you'[0])  // I
console.log('I seek you'.charAt(0))  // I

1.2 对象

判断属性是自己的还是继承来的

使用in不能判断属性是自己的还是继承来的，使用hasOwnProperty可以。

var xiaoming = {
  name: 'xiaoming'
}
使用in不能判断属性是自己的还是继承来的
---------------------------------
'name' in xiaoming  // true
'toString' in xiaoming  // true
---------------------------------
xiaoming.hasOwnProperty('name')  // true
xiaoming.hasOwnProperty('toString')  // false

判断对象是否可枚举

xiaoming.propertyIsEnumerable()  // false

判断对象是另一个对象的原型

var People = function (name) {
    this.name = name
}
var xiaoming = new People('xiaoming')


Human.prototype = monkey
monkey.isPrototypeOf(man)

1.3 原型

• __proto__是实例对象的属性
• prototype是构造函数的属性
• constructor指向构造函数

IE中不存在__proto__，推荐使用ES5的Object.getPropertyOf()访问。

typeof [].__proto__  // "object"
Object.getPrototypeOf([])  // [constructor: function, toString: function, toLocaleString: function, join: function, pop: function…]
[].constructor.prototype

原型继承

var People = function (name,age) {
  this.name = name
  this.age = age
}
xiaoming = People.prototype
xiaoming.constructor = xiaoming

1.4 常用数学方法

Math.PI  // 3.141592653589793
Math.SQRT2  // 1.4142135623730951
Math.sqrt(2)  // 1.4142135623730951
Math.E  // 2.718281828459045
Math.pow(2,3)  // 8
Math.random() * (10-2)+2  // 7.564475903879611 | 2-8之间的平均数
Math.LN2  // 0.6931471805599453
Math.floor(2.6)  // 2 | 指定值的最小整数
Math.ceil(2.6)  // 3 | 指定值最大整数
Math.round(2.6)  // 3 | 去最靠近指定值的整数
Math.max()  // 3
Math.min()  // 2
Math.sin(90)  // 0.8939966636005579
Math.cos(90)  // -0.4480736161291702

二、DOM操作

2.1 节点编号、名称以及值

nodeType有12种，具体请见MDN

<div class="you">HELLO YOU</div>

var you = document.getElementsByClassName('you')[0]
you.nodeType  // 1
you.nodeName  // BIV
you.nodeValue  // null
you.textContent  // HELLO YOU
you.innerText  // "HELLO YOU"

2.2 父节点、子节点和相邻节点

检查是否具有某个子节点

document.documentElement.hasChildNodes('body')  // true

查看所有子节点

document.documentElement.childNodes  // [head, text, body]

查看第一个子节点

document.documentElement.firstChild  // <head>...</head>

访问父节点

document.documentElement.childNodes[0].parentNode

访问相邻节点

document.documentElement.children[0].previousSibling  // null
document.documentElement.children[0].nextSibling  // #text

2.3 添加和删除节点

<div class="you">HELLO YOU</div>

var you = document.getElementsByClassName('you')[0]

新建节点

var pTag = document.createElement('p')
var pVal = document.createTextNode('HELLO YOU')
pTag.appendChild(pVal)  // <p>HELLO YOU</p>

添加节点

document.body.insertBefore(pTag,you)
document.body.replaceChild(you,pTag)

删除节点

document.body.removeChild(you)

克隆节点

true为深拷贝，会拷贝节点的内容。flase只拷贝空标签。

var newNodeFalse = document.body.cloneNode(true)
var newNodeFalse = document.body.cloneNode(false)
console.log(newNodeFalse)  // <body>...</body>
console.log(newNodeFalse)  // <body></body>

2.4 属性相关

<div class="you">HELLO YOU</div>

var you = document.getElementsByClassName('you')[0]

检查是否具有某个属性

you.hasAttributes('class')  // true

获取具体属性

you.getAttribute('class')  // "you"
you.attributes[0].nodeValue  // "you"
you.attributes['class'].nodeValue  // "you"

选择器

querySelector使用的是CSS选择器，返回单个节点。返回所有匹配的结果用querySelectorAll。

document.querySelector('.you')
document.querySelectorAll('.you')  // [div.you]

批量添加样式

you.style.cssText = "color:red;font-size:200px;"

2.5 DOM合集

document.images
document.applets
document.links
document.anchors
document.forms
document.cookie
document.title
document.referrer
document.domain

2.6 DOM遍历

function walkDOM(n){
  do {
    console.log(n)
    if(n.hasChildNodes()){
      walkDOM(n.firstChild)
    }
  }
  while (n=n.nextSibling)
}
walkDOM(document.body)

三、其他

3.1 事件

阻止冒泡

event.stopPropagation()
window.event.cancelBubble = true  //IE

阻止默认事件

event.preventDefault()
return false  // IE

拖动事件

MDN在线示例

触屏事件

这里有一个用canva实现的画图页面，触屏画图，实现过程可以直接看源码。。另外触屏事件的分析，请见伯乐在线。

touchstart
touchmove
touchend
touchleave
touchcancel

3.2 浏览器检测

用户代理可以被模拟，所以根据浏览器的不同特征来检测当前浏览器类型更加可靠。

if(window.addEventlistener) {
    // code...
}
else if(){
    // code...
}

3.3 三种弹窗方式

三种弹窗分别是提示框（alert），确认框（confirm）和交互框（prompt）。可以把确认和交互赋值给变量，变量会存储相应结果。

alert('Welcome To JS!')
var isLike = confirm('Do you like JS?')
var whyLike = prompt('Why do you like it.')
console.log(isLike)  // true
console.log(whyLike)  // Maybe...

3.4 根据浏览器历史控制前进后退

根据缓存的浏览器历史，可以控制前进、后退和跳转到指定历史记录。

window.history.forward()  // 前进
window.history.back()  // 后退
window.history.go(1)  // 跳转

3.5 重载页面的六种方式

location.reload()
location.assign('/')
location.replace('/')
window.location.href = '/'
location = location
window.location.reload()

3.6 修改当前页面URL但是不刷新页面

history.pushState({a:1},'','hello')

3.7 URI编码

function decodeURI(url,params){
  var url = url || 'http://www.cnblogs.com/bergwhite/'
  var params = params || {name: 'berg', age: 22}
  var query = []
  for (param in params) {
    query.push(param+'='+params[param])
  }
  return url+=query.join('&')
}
decodeURI() // "http://www.cnblogs.com/bergwhite/name=berg&age=22"
decodeURI('http://www.you.com/',{a:1,b:2})  //  "http://www.you.com/a=1&b=2"

3.8 窗口相关

新窗口打开内容

window.open('http://www.baidu.com','zzzzzzzzzzzz','width=800px,height=300px,resizable=yes')

判断是否是高分辨率屏幕

window.devicePixelRatio  // 1

感谢您的阅读。