- 相關(guān)推薦
Javascript高級技巧匯總
Javascript高級技巧匯總
1、類(lèi)型檢測
使用Object.prototype.toString.call(obj)的方式。
因為無(wú)論typeof還是instanceof都無(wú)法做到精確判斷變量類(lèi)型。
2、安全的構造函數
通常我們定義構造函數的時(shí)候，會(huì )使用類(lèi)似
復制代碼 代碼如下:
function Person(name){
this.name = name;
}
然而之后如果不是去 var person = new Person("cnblogs")。
而是 var person = Person("cnblogs")。那么this就會(huì )指向別處，導致污染其余對象。
解決方法就是在設置this.property的時(shí)候判斷
this instanceof Person
如果不是，則new Person(x,x,x);
復制代碼 代碼如下:
function Person(name){
if(this instanceof Person){
this.name = name;
}else{
return new Person(name);
}
}
但是要注意一點(diǎn)，如果其余構造函數試圖通過(guò)Person.call(this,x)這種方式實(shí)現繼承的時(shí)候。
需要注意，在實(shí)例化之前把那個(gè)函數的原型指向到Person去。
3、惰性載入函數
在調用函數時(shí)，經(jīng)常會(huì )存在一種情況，就是函數中需要對瀏覽器功能進(jìn)行判斷。
例如
復制代碼 代碼如下:
function createSomething(){
if(supportH5){
//do something
}else{
//do otherthing
}
}
但是，如果一個(gè)瀏覽器支持一個(gè)功能，那么必然是一直都支持，所以這里面每次執行代碼時(shí)都去判斷是不必要的，因為判斷一次就夠了。
所以可以改寫(xiě)成
復制代碼 代碼如下:
function createSomething(){
if(supportH5){
createSomething = function(){ //重寫(xiě)了createSomething 函數
//do something
}
}else{
//同上
}
}
這樣，第一次調用時(shí)會(huì )做判斷，之后重寫(xiě)了這個(gè)函數，也就自然不會(huì )判斷了。
4、函數綁定
在js中，最搞混的應該就是 this 指向誰(shuí)的問(wèn)題。
其實(shí)，在我學(xué)習js這么久的時(shí)間里，發(fā)現一個(gè)結論
在函數中的this會(huì )指向最終調用這個(gè)函數的對象，換句話(huà)說(shuō)就是，哪個(gè)對象調用了這個(gè)函數，this就指向那個(gè)對象。
搞清楚了這個(gè)，函數綁定就不是問(wèn)題了。
改變函數里面this指向的方法就是 call 和 apply，不過(guò)用這兩個(gè)方法都會(huì )執行函數。
如果不想執行函數，而是把函數當參數傳給某個(gè)函數，還想改變this，那么就用最新的bind。
5、定時(shí)器
setTimeou、setInterval或者Ajax等雖然是異步，像多線(xiàn)程一樣，但是js是單線(xiàn)程的。
其實(shí)這些方法并沒(méi)有增加一個(gè)線(xiàn)程。
setTimeout(fn,300)代表的意思是300毫秒后把fn放入js的執行隊列里面。
如果這是隊列里面沒(méi)有事務(wù)要執行（也就是說(shuō)js解釋器處于空閑狀態(tài)），那么便會(huì )立刻執行。否則，便會(huì )等隊列的'事務(wù)處理完再執行這個(gè)函數。
所以，用setTimeout或者setInterval都不是準確的控制時(shí)間。
還有一點(diǎn)要注意的就是，使用setTimeout模擬setInterval可以準確控制最小執行時(shí)間間隔。
6、使用定時(shí)器固定時(shí)間執行方法。
如果一個(gè)方法要執行很久，也許造成瀏覽器短時(shí)間沒(méi)響應，那么可以用定時(shí)器固定每段時(shí)間執行一部分。這樣可以不至于讓js一直處于忙碌狀態(tài)（瀏覽器無(wú)響應），有空閑的時(shí)間處理其余事務(wù)。比如有一個(gè)1000長(cháng)度數組循環(huán)，那么可以100每次的執行，中間隔點(diǎn)時(shí)間讓js處于空閑去做別的操作。
7、函數節流。
函數節流是一種提高性能很好的方式，在某些場(chǎng)合可以提高幾倍效率。
比如在做拖動(dòng)或者是一些發(fā)生在onresize事件中的操作時(shí)。
你每操作一下，其實(shí)執行了很多遍了。例如：
復制代碼 代碼如下:
var i = 0;
window.onresize = function(){
console.log(i++);
}
嘗試著(zhù)去拉伸瀏覽器，就會(huì )發(fā)現控制臺瞬間顯示i都超過(guò)100多了。
改變一下寫(xiě)法，例如：
復制代碼 代碼如下:
var i = 0, j = 1;
window.onresize = function(){
if(j % 2 == 0){
console.log(i++);
}
j++;
}
創(chuàng )建一個(gè)變量j，讓j每次只有偶數的時(shí)候才執行，也就是少了一半的實(shí)行次數。
像這樣處理下，可以減少50%的執行次數，但是對用戶(hù)來(lái)說(shuō)，并感受不到區別。
還有一種使用定時(shí)器實(shí)現的函數節流。
核心代碼如下：
復制代碼 代碼如下:
function throttle(method , context){
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
},100);
}
這里傳入執行函數和函數的執行環(huán)境（也就是執行函數中的this的指向對象），然后先清除動(dòng)作隊列，接著(zhù)執行動(dòng)作。
這種形式可以對動(dòng)作頻率做更好的控制。
假設是一個(gè)瀏覽器拉伸動(dòng)作，那么只要你拉伸的速度夠快，每次觸發(fā)的時(shí)間間隔在100ms之內，那么就只會(huì )執行最后一下的結果。
8、自定義事件
本質(zhì)是觀(guān)察者模式�；灸Ｊ绞切枰�3個(gè)函數，
一個(gè)函數是綁定事件，一個(gè)函數是觸發(fā)事件，一個(gè)是移除綁定。
這種模式可以很大程度降低代碼耦合性。
【Javascript高級技巧】相關(guān)文章：
javascript中for/in循環(huán)以及常見(jiàn)的使用技巧06-24
JavaScript高級程序設計：本地對象Array10-22
掌握高級的英語(yǔ)表達技巧10-31
Word使用高級技巧大全07-19
高級英語(yǔ)寫(xiě)作技巧01-05
高級文秘的實(shí)用技巧08-07
韓語(yǔ)高級備考規劃及技巧07-20
羽毛球高級技巧09-22
國際象棋高級技巧08-31