進(jìn)階3 函數(shù)與作用域無(wú)標(biāo)題文章

1. 函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別
  • 函數(shù)聲明:不必放在調(diào)用的前面
//函數(shù)調(diào)用
sum();
//函數(shù)聲明
function sum(){
    var a=1;
    var b=1;
    c=a+b;
    return c;
}
  • 函數(shù)表達(dá)式:必須放在調(diào)用的前面
var sum=function(){
    var a=1;
    var b=1;
    c=a+b;
    return c;
}
sum();
2. 變量的聲明前置和函數(shù)的聲明前置
  • 變量的聲明前置:當(dāng)一個(gè)變量被定義時(shí),在代碼執(zhí)行前會(huì)先將變量進(jìn)行初始化再執(zhí)行語(yǔ)句蝴猪。
console.log(a);         聲明前置后  var a;
var a =1;                         console.log(a);   // undefined
console.log(a);                    a =1 ;                                   
                                   console.log(a);  // 1     

  • 函數(shù)的聲明前置:當(dāng)函數(shù)以函數(shù)聲明的方式聲明時(shí),代碼執(zhí)行前會(huì)首先生成該函數(shù)蚯撩,然后再執(zhí)行語(yǔ)句
sayHello();                     聲明前置后  function sayHello(){
function sayHello(){                           console.log('hello');
    console.log('hello');                  }
}                                          sayHello();  //'hello'
3. arguments

arguments是一個(gè)類(lèi)數(shù)組對(duì)象内狸,可以傳入function內(nèi)部所有的參數(shù)(本地變量)咆霜,但不是函數(shù)的屬性,只在函數(shù)內(nèi)部有效鼓寺,寫(xiě)法是arguments[i]依次對(duì)參數(shù)進(jìn)行訪問(wèn)和修改挑秉。

function printPersonInfo(name, age, sex){
    console.log(name);
    console.log(age);
    console.log(sex);
    console.log(arguments);
 }
4. 實(shí)現(xiàn)函數(shù)的"重載"

在js中沒(méi)有函數(shù)的重載法梯,函數(shù)通過(guò)名字確定唯一性,參數(shù)不同也被認(rèn)為是相同的函數(shù)犀概,后出現(xiàn)的會(huì)覆蓋先出現(xiàn)的立哑,但可以在函數(shù)體針對(duì)不同的參數(shù)調(diào)用執(zhí)行相應(yīng)的邏輯,或通過(guò)arguments實(shí)現(xiàn)重載姻灶。

  • 通過(guò)傳入?yún)?shù)實(shí)現(xiàn)重載
function userInfo(name,age,sex){ 
    if(name){ 
        console.log(name); 
    } 
    if(age){ 
        console.log(age); 
    } 
    if(sex){
         console.log(sex);
     } 
} 
userInfo("andy",22); //參數(shù)依次傳遞值铛绰,缺少的參數(shù)返回的是
undefined userInfo("andrea",20,"female");
  • 通過(guò)arguments來(lái)實(shí)現(xiàn)重載
function sum(){
    var  sum =0;
    for (var i =0; i<arguments.length; i++){
        sum += arguments[i];
    }
    return sum;
}
console.log(sum(1,2,3,4)); //輸出結(jié)果為10
5. 立即執(zhí)行函數(shù)表達(dá)式概念和作用
(function(){
  var a  = 1;
  console.log(a); //1
})()
console.log(a); //報(bào)錯(cuò):Uncaught ReferenceError: a is not defined

其他寫(xiě)法

(function fn1() {
    var a  = 1;
    console.log(a); //1
})();
console.log(a); //報(bào)錯(cuò):Uncaught ReferenceError: a is not defined
// 逗號(hào)也只能操作表達(dá)式
1, function fn3(){
      var a  = 1;
      console.log(a); //1
}();
console.log(a); //報(bào)錯(cuò):Uncaught ReferenceError: a is not defined
!function(){
  var a  = 1;
  console.log(a); //1
}();
console.log(a); //報(bào)錯(cuò):Uncaught ReferenceError: a is not defined
立即執(zhí)行函數(shù).jpg

作用:隔離作用域产喉,防止了變量的命名沖突至耻,形成獨(dú)立的空間若皱;可以讓函數(shù)在定義后直接調(diào)用镊叁,在固有的作用域內(nèi)使用尘颓,不會(huì)污染全局變量

6. 遞歸實(shí)現(xiàn)n!
function factor(n){
    if(n===1||n===0){
        return 1;
    }
    return n*factor(n-1);
}
7. 代碼練習(xí)
以上代碼輸出什么?
getInfo('饑人谷',2,'男')輸出結(jié)果:
name:饑人谷
age:2
sex:男
["饑人谷",2,"男"]
name valley
getInfo('小谷', 3)輸出結(jié)果:
name:小谷
age:3
sex:undefined
["小谷",3]
name valley
getInfo('男')輸出結(jié)果:
name:男
age:undefined
sex:undefined
["男"]
name valley
8. 寫(xiě)一個(gè)函數(shù)晦譬,返回參數(shù)的平方和
 function sumOfSquares(){
     var result=0;
     for(var i=0; i<arguments.length; i++){
         result+=arguments[i]*arguments[i];
     }
     return result;
 }
 var result = sumOfSquares(2,3,4)
 var result2 = sumOfSquares(1,3)
 console.log(result)  //29
 console.log(result2)  //10
9. 代碼練習(xí)
以上代碼輸出什么疤苹?
變量聲明前置:
var a;
console.log(a); //underfined敛腌,變量聲明前置卧土,初始值undefined 
a = 1; 
console.log(b); //報(bào)錯(cuò):Uncaught ReferenceError:b is not defined,因?yàn)閎沒(méi)有聲明
10. 代碼練習(xí)
以上代碼輸出什么像樊?
sayName('world')輸出結(jié)果:
hello world
//函數(shù)聲明不必放在調(diào)用的前面
sayAge(10)輸出結(jié)果:
報(bào)錯(cuò):Uncaught TypeError: sayAge is not a function
//函數(shù)表達(dá)式必須放在調(diào)用的前面
11. 代碼練習(xí)

寫(xiě)出以下代碼的輸出結(jié)果和作用域鏈查找過(guò)程偽代碼

11.png

輸出結(jié)果:10
作用域鏈查找過(guò)程偽代碼:
1.globalContext={
      AO:{
          x:10
          foo:function
          bar:function
      },
      Scope:null
  }
  foo.[[scope]]=globalContext.AO
  bar.[[scope]]=globalContext.AO

2.barContext={
      AO:{
          x:30
      },
      Scope:bar.[[scope]]
  }
  
3.fooContext={
      AO:{},
      Scope:foo.[[scope]]
  }
12. 代碼練習(xí)

寫(xiě)出以下代碼的輸出結(jié)果和作用域鏈查找過(guò)程偽代碼

12.png

輸出結(jié)果:30
作用域鏈查找過(guò)程偽代碼:
1. globalContext={
       AO:{
           x:10
           bar:function
       },
       Scope:null
   }
   bar.[[scope]]=globalContext.AO
2. barContext={
       AO:{
           x:30
           foo:function
       },
       Scope:bar.[[scope]]
   }
   foo.[[scope]]=barContext.AO
3. fooContext={
       AO:{},
       Scope:foo.[[scope]]
   }
13. 代碼練習(xí)

寫(xiě)出以下代碼的輸出結(jié)果和作用域鏈查找過(guò)程偽代碼

13.png

輸出結(jié)果:30
作用域鏈查找過(guò)程偽代碼:
1. globalContext={
       AO:{
           x:10
           bar:function
       },
       Scope:null
   }
   bar.[[scope]]=globalContext.OA
2. barContext={
       AO:{
           x:30
           function:function
       },
       Scope:bar.[[scope]]
   }
   function.[[scope]]=barContext.OA
3. functionContext={
       AO:{},
       Scope:function.[[scope]]
   }
14. 代碼練習(xí)

寫(xiě)出以下代碼的輸出結(jié)果和作用域鏈查找過(guò)程偽代碼

14.png
輸出結(jié)果:undefined 5 1 6 20 200
作用域鏈查找過(guò)程偽代碼:
1. globalContext = { 
        AO:{ 
            a:1 //200
            fn:function 
            fn3:function 
    }, 
   Scope:null 
   } 
   fn.[[scope]] = globalContext.AO 
   fn3.[[scope]] = globalContext.AO

 2.調(diào)用fn() 
    fnContext = { 
        AO:{ 
            a:undefined //5,6,20
            fn2:function
        }, 
        Scope:fn.[[scope]] //globalContext.AO 
    }
    fn2.[[scope]] = fnContext.AO 

3. fn3Context = { 
       AO:{ 
           a:200 
       }, 
       Scope:fn3Context.[[scope]] //globalContext.AO 
   } 

4. fn2ConText = { 
       AO:{ 
          a:20
       }, 
      Scope:fn2ConText.[[scope]] //fnContext.AO 
   }

注釋
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末尤莺,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子生棍,更是在濱河造成了極大的恐慌颤霎,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,941評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件涂滴,死亡現(xiàn)場(chǎng)離奇詭異友酱,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)柔纵,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)缔杉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人搁料,你說(shuō)我怎么就攤上這事或详。” “怎么了郭计?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,345評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵霸琴,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我拣宏,道長(zhǎng)沈贝,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,851評(píng)論 1 295
  • 正文 為了忘掉前任勋乾,我火速辦了婚禮宋下,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘辑莫。我一直安慰自己学歧,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布各吨。 她就那樣靜靜地躺著枝笨,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上横浑,一...
    開(kāi)封第一講書(shū)人閱讀 51,688評(píng)論 1 305
  • 那天剔桨,我揣著相機(jī)與錄音,去河邊找鬼徙融。 笑死洒缀,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的欺冀。 我是一名探鬼主播树绩,決...
    沈念sama閱讀 40,414評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼隐轩!你這毒婦竟也來(lái)了饺饭?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,319評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤职车,失蹤者是張志新(化名)和其女友劉穎瘫俊,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體提鸟,經(jīng)...
    沈念sama閱讀 45,775評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡军援,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了称勋。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片胸哥。...
    茶點(diǎn)故事閱讀 40,096評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖赡鲜,靈堂內(nèi)的尸體忽然破棺而出空厌,到底是詐尸還是另有隱情,我是刑警寧澤银酬,帶...
    沈念sama閱讀 35,789評(píng)論 5 346
  • 正文 年R本政府宣布嘲更,位于F島的核電站,受9級(jí)特大地震影響揩瞪,放射性物質(zhì)發(fā)生泄漏赋朦。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評(píng)論 3 331
  • 文/蒙蒙 一李破、第九天 我趴在偏房一處隱蔽的房頂上張望宠哄。 院中可真熱鬧,春花似錦嗤攻、人聲如沸毛嫉。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,993評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)承粤。三九已至暴区,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間辛臊,已是汗流浹背仙粱。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,107評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留浪讳,地道東北人缰盏。 一個(gè)月前我還...
    沈念sama閱讀 48,308評(píng)論 3 372
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像淹遵,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子负溪,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 1.函數(shù)聲明和函數(shù)表達(dá)式有什么區(qū)別 函數(shù)就是一段可以反復(fù)調(diào)用的代碼塊透揣。函數(shù)還能接受輸入的參數(shù),不同的參數(shù)會(huì)返回不同...
    徐國(guó)軍_plus閱讀 475評(píng)論 0 0
  • 第5章 引用類(lèi)型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類(lèi)型 使用基本類(lèi)型...
    大學(xué)一百閱讀 3,237評(píng)論 0 4
  • 函數(shù)聲明和函數(shù)表達(dá)式有什么區(qū)別 函數(shù)聲明語(yǔ)法:function functionName(arg0,arg1,ar...
    _Dot912閱讀 571評(píng)論 0 3
  • 1.函數(shù)聲明和函數(shù)表達(dá)式有什么區(qū)別 函數(shù)聲明 代碼執(zhí)行時(shí)函數(shù)聲明會(huì)被提升到最前執(zhí)行川抡,所以函數(shù)的調(diào)用與函數(shù)聲明的順序...
    Feiyu_有貓病閱讀 379評(píng)論 0 0
  • 曾經(jīng)好奇的貓兒 即便厭倦了鐘愛(ài)的毛線(xiàn)球 也絕不會(huì)對(duì)木偶劇的鬼臉心存忌憚 但凡是可愛(ài)的家伙 常常會(huì)把警惕的心兒丟在路...
    彌九的詩(shī)閱讀 399評(píng)論 5 7