安全的類型檢測

JS內(nèi)置的類型檢測機制并不是完全可靠的

typeof

操作符返回一個字符串，表示未經(jīng)計算的操作數(shù)的類型，在大多數(shù)情況下很靠譜，但是當(dāng)然還有例外

正則表達式

typeof /s/ === 'function'; // Chrome 1-12 , 不符合 ECMAScript 5.1
typeof /s/ === 'object'; // Firefox 5+ , 符合 ECMAScript 5.1

NULL

typeof null === 'object'; // 從一開始出現(xiàn)JavaScript就是這樣的

在 JavaScript 最初的實現(xiàn)中，JavaScript 中的值是由一個表示類型的標(biāo)簽和實際數(shù)據(jù)值表示的。對象的類型標(biāo)簽是 0。由于 null 代表的是空指針（大多數(shù)平臺下值為 0x00），因此，null的類型標(biāo)簽也成為了 0，typeof null就錯誤的返回了object

instanceof

運算符用來測試一個對象在其原型鏈中是否存在一個構(gòu)造函數(shù)的 prototype 屬性

語法

object instanceof constructor(要檢測的對象 instanceof 構(gòu)造函數(shù))

但是在瀏覽器中，我們的腳本可能需要在多個窗口之間進行交互。多個窗口意味著多個全局環(huán)境，不同的全局環(huán)境擁有不同的全局對象，從而擁有不同的內(nèi)置類型構(gòu)造函數(shù)。這可能會引發(fā)一些問題。

[] instanceof window.frames[0].Array    //false

因為 Array.prototype !== window.frames[0].Array.prototype，因此你必須使用 Array.isArray(myObj) 或者 Object.prototype.toString.call(myObj) === "[object Array]"來判斷myObj是否是數(shù)組
解決以上兩個問題的方案就是Object.prototype.toString

Object.prototype.toString

方法返回一個表示該對象的字符串
可以通過toString() 來獲取每個對象的類型。為了每個對象都能通過 Object.prototype.toString() 來檢測，需要以 Function.prototype.call() 或者 Function.prototype.apply()的形式來調(diào)用，傳遞要檢查的對象作為第一個參數(shù)，稱為thisArg

var toString = Object.prototype.toString;

toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math]
toString.call(/s/); // [object RegExp]
toString.call([]); // [object Array]

//Since JavaScript 1.8.5
toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]

作用域安全的構(gòu)造函數(shù)

構(gòu)造函數(shù)其實就是一個使用new操作符調(diào)用的函數(shù)。當(dāng)使用new調(diào)用時，構(gòu)造函數(shù)內(nèi)用到的this對象會指向新創(chuàng)建的對象實例

function Person(name, age){
  this.name = name;
  this.age = age;
}

let person = new Person("addone", 20);

person.name // addone

當(dāng)你使用new操作符的時候，就會創(chuàng)建一個新的Person對象，同時分配這些屬性，但是如果你沒有使用new

let person = Person("addone", 20);

person1.name // Cannot read property 'name' of undefined
window.name // addone

這是因為this是在執(zhí)行時確認的，當(dāng)你沒有使用new，那么this在當(dāng)前情況下就被解析成了window，屬性就被分配到window上了

作用域安全的構(gòu)造函數(shù)在進行更改前，首先確認this對象是正確類型的實例，如果不是，就創(chuàng)建新的對象并且返回

function Person(name, age){
  if(this instanceof Person){
    this.name = name;
    this.age = age;   
  }else{
    return new Person(name, age);
  }
}

let person1 = new Person("addone", 20);
person1.name // addone

let person2 = Person("addone", 20);
person2.name // addone

this instanceof Person檢查了this對象是不是Person的實例，如果是則繼續(xù)，不是則調(diào)用new

惰性載入函數(shù)

假如你要寫一個函數(shù)，里面有一些判斷語句

function foo(){
  if(a != b){
    console.log('aaa')
  }else{
    console.log('bbb')
  }
}

如果你的a和b是不變的，那么這個函數(shù)不論執(zhí)行多少次，結(jié)果都是不變的，但是每次執(zhí)行還要進行if判斷，這就造成了不必要的浪費。

惰性載入表示函數(shù)執(zhí)行的分支只會發(fā)生一次，這里有兩種解決方式。

在函數(shù)被調(diào)用時再處理函數(shù)

function foo(){
  if(a != b){
    foo = function(){
      console.log('aaa')
    }
  }else{
    foo = function(){
      console.log('bbb')
    }
  }
  return foo();
}

這樣進入每個分支后都會對foo進行賦值，覆蓋了之前的函數(shù)，之后每次調(diào)用foo就不會再執(zhí)行if判斷

在聲明函數(shù)時就指定適當(dāng)?shù)暮瘮?shù)

var foo = (function foo(){
  if(a != b){
    return function(){
      console.log('aaa')
    }
  }else{
    return function(){
      console.log('bbb')
    }
  }
})();

這里創(chuàng)建一個匿名，自執(zhí)行的函數(shù)，用來確定應(yīng)該使用哪一個函數(shù)來實現(xiàn)。

惰性函數(shù)的優(yōu)點就是只在第一次執(zhí)行分支時犧牲一點點性能

函數(shù)綁定

請使用fun.bind(thisArg[, arg1[, arg2[, ...]]])

thisArg

當(dāng)綁定函數(shù)被調(diào)用時，該參數(shù)會作為原函數(shù)運行時的 this 指向。當(dāng)使用new 操作符調(diào)用綁定函數(shù)時，該參數(shù)無效

arg1,arg2,...

當(dāng)綁定函數(shù)被調(diào)用時，這些參數(shù)將置于實參之前傳遞給被綁定的方法

返回

由指定的this值和初始化參數(shù)改造的原函數(shù)拷貝

一個例子

let person = {
  name: 'addone',
  click: function(e){
    console.log(this.name)
  }
}

let btn = document.getElementById('btn');
EventUtil.addHandle(btn, 'click', person.click);

這里創(chuàng)建了一個person對象，然后將person.click方法分配給DOM按鈕的事件處理程序，當(dāng)你點擊按按鈕時，會打印出undefiend，原因是執(zhí)行時this指向了DOM按鈕而不是person

解決方案： 將this強行指向person

EventUtil.addHandle(btn, 'click', person.click.bind(person));

函數(shù)柯里化

函數(shù)柯里化是把接受多個參數(shù)的函數(shù)轉(zhuǎn)變成接受單一參數(shù)的函數(shù)

function add(num1, num2){
  return num1 + num2;
}
function curryAdd(num2){
  return add(1, num2);
}
add(2, 3) // 5
curryAdd(2) // 3

這個例子用來方便理解柯里化的概念

下面是創(chuàng)建函數(shù)柯里化的通用方式

function curry(fn){
  var args = Array.prototype.slice.call(arguments, 1);
  return function(){
    let innerArgs = Array.prototype.slice.call(arguments);
    let finalArgs = args.concat(innerArgs);
    return fn.apply(null, finalArgs);
  }
}

第一個參數(shù)是要進行柯里化的函數(shù)，其他參數(shù)是要傳入的值。這里使用Array.prototype.slice.call(arguments, 1)來獲取第一個參數(shù)后的所有參數(shù)(外部)。在返回的函數(shù)中，同樣調(diào)用Array.prototype.slice.call(arguments)讓innerArgs來存放所有的參數(shù)(內(nèi)部)，然后用concat將內(nèi)部外部參數(shù)組合，用apply傳遞給函數(shù)

function add(num1, num2){
  return num1 + num2;
}
let curryAdd1 = curry(add, 1);
curryAdd1(2); // 3

let curryAdd2 = curry(add, 1, 2);
curryAdd2(); // 3

防篡改對象

Javascript中任何對象都可以被同一環(huán)境中運行的代碼修改，所以開發(fā)人員有時候需要定義防篡改對象（tamper-proof object) 來保護自己

不可擴展對象

默認情況下所有對象都是可以擴展的(添加屬性和方法)

let person = { name: 'addone' };
person.age = 20;

第二行為person對象擴展了age屬性，當(dāng)然你可以阻止這一行為，使用Object.preventExtensions()

let person = { name: 'addone' };
Object.preventExtensions(person);
person.age = 20;

person.age // undefined

你還可以用Object.isExtensible()來判斷對象是不是可擴展的

let person = { name: 'addone' };
Object.isExtensible(person); // true

Object.preventExtensions(person);
Object.isExtensible(person); // false

請記住這是不可擴展!!，即不能添加屬性或方法

密封的對象

密封對象不可擴展，且不能刪除屬性和方法

let person = { name: 'addone' };
Object.seal(person);

person.age = 20;
delete person.name;

person.age // undefined
person.name // addone

相對的也有Object.isSealed()來判斷是否密封

let person = { name: 'addone' };
Object.isExtensible(person); // true
Object.isSealed(person); // false

Object.seal(person);
Object.isExtensible(person); // false
Object.isSealed(person); // true

凍結(jié)的對象

這是最嚴格的防篡改級別，凍結(jié)的對象即不可擴展，又密封，且不能修改

let person = { name: 'addone' };
Object.freeze(person);

person.age = 20;
delete person.name;
person.name = 'addtwo'

person.age // undefined
person.name // addone

同樣也有Object.isFrozen來檢測

let person = { name: 'addone' };
Object.isExtensible(person); // true
Object.isSealed(person); // false
Object.isFrozen(person); // false

Object.freeze(person);
Object.isExtensible(person); // false
Object.isSealed(person); // true
Object.isFrozen(person); // true

以上三種方法在嚴格模式下進行錯誤操作均會導(dǎo)致拋出錯誤

高級定時器

閱讀前提

大概理解setTimeout的基本執(zhí)行機制和js事件機制

重復(fù)的定時器

當(dāng)你使用setInterval重復(fù)定義多個定時器的時候，可能會出現(xiàn)某個定時器代碼在代碼再次被添加到執(zhí)行隊列之前還沒有完成執(zhí)行，導(dǎo)致定時器代碼連續(xù)執(zhí)行多次。

機智Javascript引擎解決了這個問題，使用setInterval()的時候，僅當(dāng)沒有該定時器的其他代碼實例時，才會將定時器代碼添加到隊列中。但這還會導(dǎo)致一些問題:

• 某些間隔被跳過
• 間隔可能比預(yù)期的小

為了避免這個兩個問題，你可以使用鏈式setTimeout()調(diào)用

setTimeout(function(){
  TODO();
  
  setTimeout(arguments.callee, interval);
}, interval)

arguments.callee獲取了當(dāng)前執(zhí)行函數(shù)的引用，然后為其設(shè)置另外一個定時器，這樣就確保在下一次定時器代碼執(zhí)行前，必須等待指定的間隔。

Yielding Processes

瀏覽器對長時間運行的腳本進行了制約，如果代碼運行超過特定的時間或者特定語句數(shù)量就不會繼續(xù)執(zhí)行。

如果你發(fā)現(xiàn)某個循環(huán)占用了大量的時間，那么對于下面這兩個問題

• 該處理是否必須同步完成?
• 數(shù)據(jù)是否必須按順序完成?

如果你的兩個答案都是"否"，那么你可以使用一種叫做數(shù)組分塊(array chunking) 的技術(shù)?；舅悸肥菫橐幚淼捻椖縿?chuàng)建一個隊列，然后使用定時器取出下一個要出處理的項目進行處理，然后再設(shè)置另一個定時器。

function chunk(array, process, context){
  setTimeout(function(){
    // 取出下一個項目進行處理
    let item = array.shift();
    process.call(item);
    
    if(array.length > 0){
      setTimeout(arguments.callee, 100);
    }
  }, 100)
}

這里接受三個參數(shù)，要處理的數(shù)組，處理的函數(shù)，運行該函數(shù)的環(huán)境(可選)，這里設(shè)置間隔100ms是個效果不錯的選擇

如果你一個函數(shù)需要50ms以上時間完成，那么最好看看能否將任務(wù)分割成一系列可以使用定時器的小任務(wù)

函數(shù)節(jié)流(Throttle)

節(jié)流的目的是防止某些操作執(zhí)行的太快。比如在調(diào)整瀏覽器大小的時候會出發(fā)onresize事件，如果在其內(nèi)部進行一些DOM操作，這種高頻率的更愛可能會使瀏覽器崩潰。為了避免這種情況，可以采取函數(shù)節(jié)流的方式。

function throttle(method, context){
  clearTimeout(method.tId);
  method.tId = setTimeout(function(){
    method.call(context);
  }, 100)
}

這里接受兩個參數(shù)，要執(zhí)行的函數(shù)，執(zhí)行的環(huán)境。執(zhí)行時先清除之前的定時器，然后將當(dāng)前定時器賦值給方法的tId，之后調(diào)用call來確定函數(shù)的執(zhí)行環(huán)境。

一個應(yīng)用的例子

function resizeDiv(){
  let div = document.getElementById('div');
  div.style.height = div.offsetWidth + "px";
}

window.onresize = function(){
  throttle(resizeDiv);
}

這個就不用講了吧2333

文章參考于《JavaScript高級程序設(shè)計(第三版)》

如果你覺得我的理解有問題或者整理的太簡略，那么我強烈安利你自己去讀一下這本書~

最新評論