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í)行語句。

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í)行語句

sayHello();                     聲明前置后  function sayHello(){
function sayHello(){                           console.log('hello');
    console.log('hello');                  }
}                                          sayHello();  //'hello'

3. arguments

arguments是一個(gè)類數(shù)組對(duì)象，可以傳入function內(nèi)部所有的參數(shù)（本地變量），但不是函數(shù)的屬性，只在函數(shù)內(nèi)部有效，寫法是arguments[i]依次對(duì)參數(shù)進(jìn)行訪問和修改。

function printPersonInfo(name, age, sex){
    console.log(name);
    console.log(age);
    console.log(sex);
    console.log(arguments);
 }

4. 實(shí)現(xiàn)函數(shù)的"重載"

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

• 通過傳入?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");

• 通過arguments來實(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

其他寫法

(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. 寫一個(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)閎沒有聲明

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í)

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

11.png

輸出結(jié)果:10
作用域鏈查找過程偽代碼:
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í)

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

12.png

輸出結(jié)果:30
作用域鏈查找過程偽代碼:
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í)

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

13.png

輸出結(jié)果:30
作用域鏈查找過程偽代碼:
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í)

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

14.png

輸出結(jié)果:undefined 5 1 6 20 200
作用域鏈查找過程偽代碼:
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 
   }

注釋