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

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

目录

一、对象
  1.1 获取属性值的方式
  1.2 获取动态生成的属性的值
二、数组
  2.1 检测是否为数组
  2.2 增加数组长度导致未赋值的位置为undefined
  2.3 用闭包实现简易迭代器
三、作用域
  3.1 函数作用域（局部变量）
  3.2 不存在块级作用域
  3.3 变量泄露
  3.4 变量提升
  3.5 临时作用域
四、闭包
  4.1 操作闭包中的值
五、事件监听
六、类型检测
七、类型转换
八、URL编码
  8.1 编码
  8.2 解码
九、JSON格式
  9.1 转为JSON格式
  9.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)  // 当值为日期的时候，作为十进制处理

感谢大家的阅读。