JavaScript高階技巧(高階函式,高階定時器,自定義事件,拖放)
高階函式
安全型別檢查
Web開發中能夠區分原生與非原生JavaScript物件非常重要,只有這樣才能確切的知道物件到底有哪些功能原生的
檢查是不是原生的陣列/函式/正則
function isArray(value){
return Object.prototype.toString.call(value) == "[object Array]";
// "[object Function/RegExp]"
}
作用域安全的建構函式
建構函式就是一個使用new操作符呼叫的函式,當使用new
時,建構函式內的this
物件會指向新建立的物件例項
問題出在當沒有使用new
時,呼叫建構函式,由於this
this
物件就會對映到全域性物件window
上,導致錯誤物件屬性的增加,建立一個作用域安全的建構函式
function Person(name,age){
if(this instanceOf Person){
this.name = name;
this.age = age;
}else {
return new Person(name,age);
}
}
惰性載入函式: 函式執行的分支僅會發生一次
- 在函式被呼叫時再處理函式
- 函式宣告的時候就指定適當的函式
函式繫結
在特定的this環境中以指定引數呼叫另一個函式
ECMAScript 5為所有的函式定義了一個原生的bind()
this
值的物件
函式柯里化:用於建立已經設定好一個或者多個引數的函式
防篡改物件
不能新增
JavaScript共享的本質,ECMAScript 5 增加了幾個方法來把物件定義為防篡改,一旦定義就無法撤銷
Object.preventExtension(obj);
Object.isExtensible(obj);// 是否可擴充套件
密封的物件
Object.seal(obj)
密封物件不可擴充套件,屬性和方法不能刪除
,屬性值可以修改
凍結的物件
Object.freeze(obj)
不可擴充套件,又是密封的
高階定時器
setTimeout()/setInterval()
setTimeout(function(){
setTimeout(arguments.callee,interval)
},interval);
上面的程式碼在前一個定時器程式碼執行完之前,不會向佇列插入新的定時器程式碼,確保了不會有任何缺失的間隔,確保了下一次程式碼執行時至少等待指定的事件間隔,避免了連續執行
拖放: 為了元素能被拖放,它必須是絕對定位的
函式節流 進行過多的DOM操作的時候瀏覽器可能掛起,IE onresize
很容易發生,為了防止這個問題,可以使用定時器對該函式節流
throttle()
接收兩個引數,要執行的函式以及在那個作用域執行