1. 程式人生 > >JavaScript高階技巧(高階函式,高階定時器,自定義事件,拖放)

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() 接收兩個引數,要執行的函式以及在那個作用域執行