加勒比HEZYO黑人专区-久久精品国产99国产精品亚洲-精品国产18久久久久久-久久人妻少妇嫩草AV

歡迎光臨 織晶網(wǎng)絡(luò)官網(wǎng)！

  • 服務(wù)支持
  • 020-39182790
技術(shù)文檔您現(xiàn)在的位置：首頁 > 服務(wù)支持 > 技術(shù)文檔

學(xué)好js，這些js函數(shù)概念一定要知道

作者：織晶客服部   發(fā)布于：2016/10/21 9:30:48  點(diǎn)擊量：  來源：織晶網(wǎng)絡(luò)

函數(shù)創(chuàng)建方式


　　1.聲明方式　例如：function consoleTip (){ console.log("tip!"); }

　　2.表達(dá)式方式 例如：var consoleTip = function(){ console.log("tip!"); }


　　兩種方式的區(qū)別：

　　1.表達(dá)式方式適合用來定義只使用一次的函數(shù)，聲明方式定義的函數(shù)沒有這個(gè)限制，當(dāng)然也不是絕對的，這個(gè)區(qū)別只適用于編碼規(guī)范上;

　　2.聲明方式定義的函數(shù)可以在函數(shù)調(diào)用之前定義也可以在函數(shù)調(diào)用之后定義，而表達(dá)式方式定義的函數(shù)只能在函數(shù)調(diào)用之前定義;


　　函數(shù)參數(shù)

　　函數(shù)參數(shù)包括形參，實(shí)參，形參就是函數(shù)定義時(shí)的參數(shù);實(shí)參就是函數(shù)調(diào)用時(shí)傳入的參數(shù)。由于js是弱類型語言，所以js函數(shù)的形參不指定類型。

　　js函數(shù)的形參和實(shí)參個(gè)數(shù)可以不一致。形參個(gè)數(shù)小于實(shí)參時(shí)，未傳的形參值都是undefined,注意形參可以指定默認(rèn)值，但是只能在函數(shù)體內(nèi)部指定;形參個(gè)數(shù)小于實(shí)參時(shí)，在函數(shù)體內(nèi)引用多余實(shí)參，必須通過實(shí)參對象arguments來獲取實(shí)參，在函數(shù)體內(nèi)部arguments就是實(shí)參對象的引用，并且此時(shí)的實(shí)參對象是一個(gè)數(shù)組對象，數(shù)組對象每一項(xiàng)對應(yīng)著函數(shù)調(diào)用時(shí)傳入的參數(shù)。

　　PS：實(shí)參對象有兩個(gè)特殊屬性callee和caller，其中callee屬性代指當(dāng)前正在執(zhí)行的函數(shù)，caller屬性代指調(diào)用當(dāng)前正在執(zhí)行的函數(shù)的函數(shù)，caller屬性不是標(biāo)準(zhǔn)屬性，不是所有瀏覽器都支持。使用callee屬性的典型例子就是匿名函數(shù)的遞歸調(diào)用，例如定義一個(gè)階乘函數(shù)：

1 var fact = function(x){
2     if(x <= 1) {
3         return 1;
4     }else{
5         return arguments.callee(x-1)*x;
6     }
7 };

　　函數(shù)作用域


　　在函數(shù)中聲明的變量(包括函數(shù)形參)在整個(gè)函數(shù)體內(nèi)都是可見的，包括嵌套的函數(shù)中，在函數(shù)外部是不可見的;函數(shù)體內(nèi)部定義的變量會(huì)覆蓋同名的全局變量;

　　函數(shù)作用域中有個(gè)特性很重要，就是“聲明提前”，意思就是在函數(shù)內(nèi)部任意位置聲明的變量，在函數(shù)體內(nèi)部任意位置都是可見的，這是因?yàn)閖s引擎在預(yù)編譯js時(shí)會(huì)把函數(shù)中所有的變量聲明都提前至函數(shù)體頂部。

　　例如：

1 var scope = "outter";
2 !function(){
3     console.log(scope);  //undefined
4     var scope = "inner";
5     console.log(scope); //inner
6 }();
7 console.log(scope);     //outter

　　說明：

　　undefined　由于函數(shù)作用域的聲明提前特性，這里的scope已經(jīng)在函數(shù)頂部聲明，但是沒有被賦值，所以scope值為undefined

　　inner　scope在函數(shù)體內(nèi)部聲明，并且有賦值

　　outter 　函數(shù)體內(nèi)部定義的變量會(huì)覆蓋同名的全局變量，但是不影響全局變量的值


　　構(gòu)造函數(shù)


　　構(gòu)造函數(shù)的用處就是用來初始化新創(chuàng)建的對象，例子：var ary = new Array();

　　構(gòu)造函數(shù)與普通函數(shù)的區(qū)別：

　　1.函數(shù)命名上有區(qū)別，構(gòu)造函數(shù)命名時(shí)通常是首字符大寫，普通函數(shù)命名時(shí)首字符小寫;

　　2.調(diào)用方式的區(qū)別，構(gòu)造函數(shù)是通過new關(guān)鍵字調(diào)用，而普通函數(shù)直接調(diào)用。


　　立即執(zhí)行函數(shù)


　　把函數(shù)定義和函數(shù)執(zhí)行結(jié)合到一起就是立即執(zhí)行函數(shù)，也叫自執(zhí)行函數(shù)。

　　這里需要注意兩點(diǎn)：1.函數(shù)定義僅限于表達(dá)式方式定義的函數(shù);2.函數(shù)執(zhí)行實(shí)際上就是對函數(shù)表達(dá)式做一次運(yùn)算，所以一元運(yùn)算符都可以讓函數(shù)執(zhí)行。

　　這樣的話，立即執(zhí)行函數(shù)就會(huì)有多種寫法：

1 (function(){console.log("IIFE");}());
2 (function(){console.log("IIFE");})();
3 !function(){console.log("IIFE");}();
4 void function(){console.log("IIFE");}();
5 ~function(){console.log("IIFE");}();
6 ....

　　立即執(zhí)行函數(shù)可以接受參數(shù)，上面的寫法都是可以的，但是編碼規(guī)范推薦第一種寫法，jQuery庫使用的就是第一種寫法。

　　那么自執(zhí)行函數(shù)的用處有哪些呢?總結(jié)起來常用也就兩種：1.保存參數(shù)上下文環(huán)境;2.作為命名空間。

　　用處1的適用場景：循環(huán)中執(zhí)行異步函數(shù)，并且函數(shù)參數(shù)隨循環(huán)變化。

01 /**
02 * a target="_blank" class="relatedlink">實(shí)例
03 * 錯(cuò)誤寫法,因?yàn)閖Query的post方法是異步的，循環(huán)十次，post方法并行跑十次，
04 * 循環(huán)比post方法執(zhí)行要快，最終傳過去的i值都變成了10,即服務(wù)端收到index的都是10
05 */
06 for(var i=0; i<10; i++){
07     $.post(url,{index:i},function(){});
08 }
09 /**
10 * 正確寫法,這樣對于循環(huán)體中的立即執(zhí)行函數(shù)來說，每次循環(huán)得到的參數(shù)都不同。立即執(zhí)行函數(shù)
11 * 每執(zhí)行一次都會(huì)創(chuàng)建一個(gè)函數(shù)上下文環(huán)境，在這個(gè)上下文環(huán)境中的變量值不受外界影響，
12 * 循環(huán)十次就會(huì)創(chuàng)建十個(gè)上下文環(huán)境，并且每個(gè)上下文環(huán)境的i值都不一樣。這樣的話，
13 * 雖然post方法是異步方法，但是是在每一個(gè)上下文環(huán)境中執(zhí)行的，也就是說循環(huán)十次，
14 * post方法在十個(gè)上下文環(huán)境中分別執(zhí)行了一次，post方法中使用的index參數(shù)每次都不一樣，
15 * 最終服務(wù)端收到的index值就是從0到9十個(gè)數(shù)值
16 */
17 for(var i=0; i<10; i++){
18     (function(index){$.post(url,{index:index},function(){});}(i));
19 }
20  
21 /**
22 * 實(shí)例二   
23 * 錯(cuò)誤寫法，最終會(huì)輸出十個(gè)10，因?yàn)檠h(huán)體的語句會(huì)延時(shí)執(zhí)行
24 */
25 for(var i=0; i<10; i++){
26     setTimeout(function(){console.log(i);},100);
27 }
28  
29 //正確寫法，最終會(huì)輸出0到9十個(gè)數(shù)值，原理同上
30 for(var i=0; i<10; i++){
31     (function(x){setTimeout(function(){console.log(x);},100);}(i));
32 }

　　用處2的適用場景：你需要寫一個(gè)公共模塊，這個(gè)公共模塊在很多地方都會(huì)使用，但是要保證公共模塊中使用的變量和函數(shù)不會(huì)對其它模塊造成污染，這樣的話這個(gè)公共模塊就需要一個(gè)單獨(dú)的不同于其它模塊的命名空間。

　　案例1：創(chuàng)建jQuery插件，保證創(chuàng)建的jQuery插件在jQuery的命名空間內(nèi)都是有效的，這樣每個(gè)jQuery對象才可以使用。

1 (function($){
2     $.fn.changeStyle = function(colorStr){
3         this.css("color",colorStr);       
4         return this;
5     }
6 }(jQuery));

　　案例2：創(chuàng)建一個(gè)帶有私有變量和私有方法的對象。

01 var obj = (function(){
02     var privateAttr,
03         publicAttr;       
04     function _setPriAttr(){
05         privateAttr = "private";
06     }       
07     function getPriAttr(){
08         return privateAttr;
09     }       
10     return {
11         attr:publicAttr,           
12         getAttr:function(){
13             getPriAttr();
14         }
15     }
16 }());

　　通過這種方式創(chuàng)建的對象，利用立即執(zhí)行函數(shù)的return語句對外暴露屬性以及方法，并且可以保證沒有對外暴露對象的屬性和方法，在對象外邊是無法訪問到的。

　　總結(jié)：其實(shí)用處1和用處2的原理都是一樣的，都是利用了函數(shù)作用域的概念，請仔細(xì)體會(huì)。




上一篇：7 個(gè)令人驚訝的 JavaScript “特性”

下一篇：詳解CSS中nth-child的用法