在JavaScript中，函數(shù)的功能十分強(qiáng)大。它們是第一類(lèi)對(duì)象，也可以作為另一個(gè)對(duì)象的方法，還可以作為參數(shù)傳入另一個(gè)函數(shù)，不僅如此，還能被一個(gè)函數(shù)返回！可以說(shuō)，在JS中，函數(shù)無(wú)處不在，無(wú)所不能，堪比孫猴子呀！當(dāng)你運(yùn)用好函數(shù)時(shí)，它能助你取西經(jīng)，讓代碼變得優(yōu)雅簡(jiǎn)潔，運(yùn)用不好時(shí)，那就遭殃了，要大鬧天宮咯~

除了函數(shù)相關(guān)的基礎(chǔ)知識(shí)外，掌握一些高級(jí)函數(shù)并應(yīng)用起來(lái)，不僅能讓JS代碼看起來(lái)更為精簡(jiǎn)，還可以提升性能。以下是小編總結(jié)的一些常用的、重要的高級(jí)函數(shù)，加上了一些個(gè)人見(jiàn)解，特此記錄下來(lái)。如果您是JS初學(xué)者，也不要被“高級(jí)”兩個(gè)字嚇到，因?yàn)槲闹写┎逯v解了一些原型、this等基礎(chǔ)知識(shí)，相信并不難理解。如果您是JS大牛，也可以把本文用來(lái)查漏補(bǔ)缺。

正文

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

function Person(name,age){
 this.name = name;
 this.age = age;
}
var p1 = new Person("Claiyre",80);

相信您對(duì)上面的構(gòu)造函數(shù)一定不陌生，但是，，如果某個(gè)粗心的程序猿調(diào)用這個(gè)構(gòu)造函數(shù)時(shí)忘記加 new 了會(huì)發(fā)生什么？

var p3 = Person("Tom",30);
console.log(p3);    //undefined
console.log(window.name);  //Tom

由于使用了不安全的構(gòu)造函數(shù)，上面的代碼意外的改變了window的name，因?yàn)?this 對(duì)象是在運(yùn)行時(shí)綁定的，使用new調(diào)用構(gòu)造函數(shù)時(shí) this 是指向新創(chuàng)建的對(duì)象的，不使用 new 時(shí)， this 是指向window的。

由于window的name屬性是用來(lái)識(shí)別鏈接目標(biāo)和frame的，所在這里對(duì)該屬性的偶然覆蓋可能導(dǎo)致其他錯(cuò)誤。

作用域安全的構(gòu)造函數(shù)會(huì)首先確認(rèn) this 對(duì)象是正確類(lèi)型的實(shí)例，然后再進(jìn)行更改，如下：

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

這樣就避免了在全局對(duì)象上意外更改或設(shè)置屬性。

實(shí)現(xiàn)這個(gè)安全模式，相當(dāng)于鎖定了調(diào)用構(gòu)造函數(shù)的環(huán)境，因此借用構(gòu)造函數(shù)繼承模式可能會(huì)出現(xiàn)問(wèn)題，解決方法是組合使用原型鏈和構(gòu)造函數(shù)模式，即組合繼承。

如果您是一個(gè)JS庫(kù)或框架的開(kāi)發(fā)者，相信作用域安全的構(gòu)造函數(shù)一定對(duì)您非常有用。在多人協(xié)作的項(xiàng)目中，為了避免他們誤改了全局對(duì)象，也應(yīng)使用作用域安全的構(gòu)造函數(shù)。

惰性載入函數(shù)

由于瀏覽器間的行為差異，代碼中可能會(huì)有許多檢測(cè)瀏覽器行為的if語(yǔ)句。但用戶(hù)的瀏覽器若支持某一特性，便會(huì)一直支持，所以這些if語(yǔ)句，只用被執(zhí)行一次，即便只有一個(gè)if語(yǔ)句的代碼，也比沒(méi)有要快。

惰性載入表示函數(shù)執(zhí)行的分支僅會(huì)執(zhí)行一次，有兩種實(shí)現(xiàn)惰性載入的方式，第一種就是在函數(shù)第一次被調(diào)用時(shí)再處理函數(shù)，用檢測(cè)到的結(jié)果重寫(xiě)原函數(shù)。

function detection(){
 if(//支持某特性){
 detection = function(){
 //直接用支持的特性
 }
 } else if(//支持第二種特性){
 detection = function(){
 //用第二種特性
 }
 } else {
 detection = function(){
 //用其他解決方案
 }
 }
}

第二種實(shí)現(xiàn)惰性載入的方式是在聲明函數(shù)時(shí)就指定適當(dāng)?shù)暮瘮?shù)

var detection = (function(){
 if(//支持某特性){
 return function(){
 //直接用支持的特性
 }
 } else if(//支持第二種特性){
 return function(){
 //用第二種特性
 }
 } else {
 return function(){
 //用其他解決方案
 }
 } 
})();

惰性載入函數(shù)的有點(diǎn)是在只初次執(zhí)行時(shí)犧牲一點(diǎn)性能，之后便不會(huì)再有多余的消耗性能。

函數(shù)綁定作用域

在JS中，函數(shù)的作用域是在函數(shù)被調(diào)用時(shí)動(dòng)態(tài)綁定的，也就是說(shuō)函數(shù)的this對(duì)象的指向是不定的，但在一些情況下，我們需要讓某一函數(shù)的執(zhí)行作用域固定，總是指向某一對(duì)象。這時(shí)怎么辦呢？

當(dāng)當(dāng)當(dāng)~~可以用函數(shù)綁定作用域函數(shù)呀

function bind(fn,context){
 return function(){
 return fn.apply(context,arguments);
 }
}

用法：

var person1 = {
 name: "claiyre",
 sayName: function(){
 alert(this.name);
 }
}
var sayPerson1Name = bind(person1.sayName,person1);
sayPerson1Name(); //claiyre

call 函數(shù)和 apply 函數(shù)可以臨時(shí)改變函數(shù)的作用域，使用bind函數(shù)可以得到一個(gè)綁定了作用域的函數(shù)

函數(shù)柯里化(curry)

curry的概念很簡(jiǎn)單：只傳遞部分參數(shù)來(lái)調(diào)用函數(shù)，然后讓函數(shù)返回另一個(gè)函數(shù)去處理剩下的參數(shù)?？梢岳斫鉃橘x予了函數(shù)“加載”的能力。

許多js庫(kù)中都封裝了curry函數(shù)，具體使用可以這樣。

var match = curry(function(what,str){
 return str.match(what)
}); 
var hasNumber = match(/[0-9]+/g);
var hasSpace = match(/\s+/g)
hasNumber("123asd");  //['123']
hasNumber("hello world!"); //null
hasSpace("hello world!"); //[' '];
hasSpace("hello");   //null
console.log(match(/\s+/g,'i am Claiyre')); //直接全部傳參也可： [' ',' ']

一旦函數(shù)經(jīng)過(guò)柯里化，我們就可以先傳遞部分參數(shù)調(diào)用它，然后得到一個(gè)更具體的函數(shù)。這個(gè)更具體的函數(shù)通過(guò)閉包幫我們記住了第一次傳遞的參數(shù)，最后我們就可以用這個(gè)更具體的函數(shù)為所欲為啦~

一個(gè)較為簡(jiǎn)單的實(shí)現(xiàn)curry的方式：

function curry(fn){
 var i = 0;
 var outer = Array.prototype.slice.call(arguments,1);
 var len = fn.length;
 return function(){
 var inner = outer.concat(Array.prototype.slice.call(arguments));
 return inner.length === len?fn.apply(null,inner):function (){
 var finalArgs = inner.concat(Array.prototype.slice.call(arguments));
 return fn.apply(null,finalArgs);
 }
 }
}

debounce函數(shù)

debounce函數(shù)，又稱(chēng)“去抖函數(shù)”。它的功能也很簡(jiǎn)單直接，就是防止某一函數(shù)被連續(xù)調(diào)用，從而導(dǎo)致瀏覽器卡死或崩潰。用法如下：

var myFunc = debounce(function(){
 //繁重、耗性能的操作
}，250);
window.addEventListener('resize',myFunc);

像窗口的resize，這類(lèi)可以以較高的速率觸發(fā)的事件，非常適合用去抖函數(shù)，這時(shí)也可稱(chēng)作“函數(shù)節(jié)流”，避免給瀏覽器帶來(lái)過(guò)大的性能負(fù)擔(dān)。

具體的實(shí)現(xiàn)時(shí)，當(dāng)函數(shù)被調(diào)用時(shí)，不立即執(zhí)行相應(yīng)的語(yǔ)句，而是等待固定的時(shí)間w,若在w時(shí)間內(nèi)，即等待還未結(jié)束時(shí)，函數(shù)又被調(diào)用了一次，則再等待w時(shí)間，重復(fù)上述過(guò)程，直到最后一次被調(diào)用后的w時(shí)間內(nèi)該函數(shù)都沒(méi)有被再調(diào)用，則執(zhí)行相應(yīng)的代碼。

實(shí)現(xiàn)代碼如下：

function debounce(fn,wait){
 var td;
 return function(){
 clearTimeout(td);
 td= setTimeout(fn,wait);
 }
}

once函數(shù)

顧名思義，once函數(shù)是僅僅會(huì)被執(zhí)行一次的函數(shù)。具體實(shí)現(xiàn)如下：

function once(fn){
 var result;
 return function(){
 if(fn){
 result = fn(arguments);
 fn = null;
 }
 return result;
 }
}
var init = once(function(){
 //初始化操作
})

在被執(zhí)行過(guò)一次后,參數(shù)fn就被賦值null了，那么在接下來(lái)被調(diào)用時(shí)，便再也不會(huì)進(jìn)入到if語(yǔ)句中了，也就是第一次被調(diào)用后，該函數(shù)永遠(yuǎn)不會(huì)被執(zhí)行了。

還可以對(duì)上述once函數(shù)進(jìn)行改進(jìn)，不僅可以傳入函數(shù)，同時(shí)還可以給傳入的函數(shù)綁定作用域u，同時(shí)實(shí)現(xiàn)了bind和once。

function once(fn,context){
 var result;
 return function(){
 if(fn){
 result = fn.apply(context,arguments);
 fn = null;
 }
 return result;
 }
}

結(jié)語(yǔ)

通過(guò)以上的閱讀，不難發(fā)現(xiàn)很多“高級(jí)函數(shù)”的實(shí)現(xiàn)其實(shí)并不復(fù)雜，數(shù)十行代碼便可搞定，但重要的是能真正理解它們的原理，在實(shí)際中適時(shí)地應(yīng)用，以此性能提升，讓代碼簡(jiǎn)潔，邏輯清晰

最新評(píng)論