乾貨滿滿，你值得擁有。這是《JavaScript面向對象編程指南（第2版）》的讀書筆記，總結了很多JS鮮為人知的知識。 ...
目錄
一、對象
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) // 當值為日期的時候，作為十進位處理
感謝大家的閱讀。
