函數(shù)聲明與函數(shù)表達式的區(qū)別

函數(shù)聲明使用function來進行，由于存在函數(shù)聲明提升，即可以在函數(shù)聲明之前調(diào)用該函數(shù)，所以不論執(zhí)行語句的位置在哪都可以調(diào)用該函數(shù)。

函數(shù)表達式通過賦值語句來聲明函數(shù)，聲明完畢后要加上分號表示該句結(jié)束，在表達式執(zhí)行完畢后，才生成函數(shù)并可被調(diào)用。函數(shù)表達式只會將變量先提升，此時變量的類型是undefined，所以不能在函數(shù)表達式前調(diào)用函數(shù)。

變量的聲明前置與函數(shù)的聲明前置

//變量的聲明前置
console.log(a) //undefined
var a = 1;
console.log(a); //1
//相當(dāng)于將var聲明的變量提升到作用域頂部
var a;
console.log(a);
a = 1;
console.log(a);

//函數(shù)的聲明前置
fn(); //3 因為function聲明的函數(shù)會提升到作用域頂部，所以不會報錯
function fn() {
    console.log(3);
}

arguments

argument是類數(shù)組對象，它包含了函數(shù)的所有實參,每個函數(shù)中都存在argument對象，argument并不是一個真正的數(shù)組，所以不具備除length屬性之外的屬性，這個對象維護這所有傳入該函數(shù)的參數(shù)列表。

function foo(a,b) {
 console.log(a);
console.log(b);
console.log(arguments);
}
foo(1,2);
//1
//2
//[1, 2]

通過以下語句可將arguments轉(zhuǎn)化為數(shù)組對象

var args=Array.prototype.slice.call(arguments)

函數(shù)重載

重載是函數(shù)具有相同的名字，但是由于傳入的參數(shù)不同，執(zhí)行不同操作。在js中沒有類似其他語言的重載，因為同名函數(shù)會被覆蓋。但是js可以通過在函數(shù)內(nèi)部對傳入?yún)?shù)進行判斷來達到重載的目的。

//通過對參數(shù)進行條件判斷進行函數(shù)重載
function fn(name,age,sex) {

if (name) {
 console.log(name);
}
if (age) {
 console.log(age);
}
if (sex){
 console.log(sex);
}
}
fn('a');
fn('a',18);
fn('a',18,'female');

//通過arguments進行函數(shù)重載
function fn(){
var sum=0;
for(var a=0;a<arguments.length;a++){
  sum=sum+[arguments[a];
}
return sum;
}
console.log(fn(1,2,3));

立即執(zhí)行函數(shù)表達式(IIFE)概念和作用

立即執(zhí)行函數(shù)表達式就是在函數(shù)聲明后立即執(zhí)行，這樣可以做到隔離作用域，避免變量污染全局。

(function(1,2,3){
var sum=0;
for(var a=0;a<arguments.length;a++){
sum=sum+arguments[a];
}
return sum;
})();
//也可以是這樣的
(function(){/*code*/}());
~function(){/*code*/}();
!function(){/*code*/}();
表達式前的計算符號皆可，來避免function被首先解析，導(dǎo)致語法錯誤，總體而言，使用括號更加安全。其實只要將函數(shù)變?yōu)楸磉_式就可以達到這樣的效果。

求n!，用遞歸來實現(xiàn)

function recursion(n) {
    if (n<0) {
        return console.log('非法數(shù)據(jù)！請正確填寫0或任意正整數(shù)！');
    }
      else if(n === 0 || n === 1){
       return 1;
  }
return n * recursion(n-1);  
}

如下代碼輸出結(jié)果

    function getInfo(name, age, sex){
        console.log('name:',name);
        console.log('age:', age);
        console.log('sex:', sex);
        console.log(arguments);
        arguments[0] = 'valley';
        console.log('name', name);
    }
getInfo('饑人谷', 2, '男');   //name:饑人谷 age:2 sex:男 ['饑人谷',2,'sex'] name valley 
getInfo('小谷', 3);   //name:小谷、age:3、undefined、['小谷', 3]、name vally;
getInfo('男');   //name:男、undefined、undefined、['男']、name vally;

寫一個函數(shù)返回參數(shù)的平方和

function sumOfSquare() {
    var result = 0;
    for(var i=0; i<arguments.length; i++){
      result = result + arguments[i]*arguments[i];
    }
    return result;
}

如下代碼的輸出結(jié)果及原因

console.log(a); //聲明提前，但是未賦值所以為undefined
var a = 1; 
console.log(b); //會報錯，b is not defined

如下代碼的輸出結(jié)果及原因

sayName('world'); //hello world,因為函數(shù)聲明前置
sayAge(10); //sayAge is not a function函數(shù)表達式只將函數(shù)表達式里的sayAge前置，此時還未賦值，所以以函數(shù)的方式調(diào)用會報錯
function sayName(name){
    console.log('hello ', name);
}
var sayAge = function(age){
    console.log(age);
};

如下代碼輸出結(jié)果及作用域鏈查找過程偽代碼

var x = 10
bar() 
function foo() {
  console.log(x)  
}
function bar(){
  var x = 30
  foo()
}

作用域查找偽代碼

globalContext = {
    AO:{
        x:10
        foo:function
        bar:function
    },
    Scope:null
}
//foo()聲明時
foo.[[scope]] = globalContext.AO
//bar聲明時
bar.[[scope]] = globalContext.AO
//調(diào)用bar時,bar的執(zhí)行上下文
barContext = {
    AO:{
     x:30
     foo:function
    }
    scope:bar.[[scope]] = globalContext.AO
}
//調(diào)用foo時，先從bar的AO中，找不到再從scope中找，這里在barConetext中能夠找到
，就立即調(diào)用。
//調(diào)用時進入foo的執(zhí)行上下文
fooContext = {
    AO:{    
    }
    scope:foo.[[scope]] = globalContext.AO
}
//所以從scope中即globalContext.AO中可以找到x:10。

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

var x = 10;
bar() 
function bar(){
  var x = 30;
  function foo(){
    console.log(x) 
  }
  foo();
}

作用域查找偽代碼

globalContext = {
    AO:{
        x:10
        bar:function
    }
    scope:null
}
bar.[[scope]] = globalContext.AO 
barContext = {
    AO:{
     x:30
     foo:function
    }
    bar.[[scope]] = globalContext.AO 
}
foo.[[scope]] = barContext.AO
fooContext = {
    AO:{
    }
    foo.[[scope]] = barContext.AO
}
//所以調(diào)用foo時會在barContext.AO中找到x:30。

如下代碼輸出結(jié)果及作用域鏈查找過程偽代碼

var x = 10;
bar() 
function bar(){
  var x = 30;
  (function (){
    console.log(x)
  })()
}

作用域查找偽代碼

globalContext = {
  AO:{
    x:10,
    bar:function,
  },
  scope:none;
}
bar['scope'] = globalContext.AO;
barContext = {
  AO:{
    x:30,
    foo:function,
  },
  scope:golbalContext.AO
}
foo['scope'] = barContext.AO;
fooContext = {
  AO:{},
  scope:barContext.AO
}

如下代碼輸結(jié)果及作用域鏈查找過程偽代碼

var a = 1;

function fn(){
  console.log(a)
  var a = 5
  console.log(a)
  a++
  var a
  fn3()
  fn2()
  console.log(a)

  function fn2(){
    console.log(a)
    a = 20
  }
}
function fn3(){
  console.log(a)
  a = 200
}
fn()
console.log(a)

作用域查找偽代碼

globalContext = {
    AO:{
        a:200
        fn:function
        fn3:function
    }
}
fn.[[scope]] = globalContext.AO
fn3.[[scope]] = globalContext.AO
fnContext = {
    AO:{
        a:20
        fn2:function
    }
    scope:fn.[[scope]] = globalContext.AO
}
fn2.[[scope]] = fnContext.AO
//第一次undefined 第二次5 
//執(zhí)行fn3時，進入fn3的執(zhí)行上下文
fn3Context = {
    AO:{
    }
    fn3.[[scope]] = globalContext.AO
} 
//第三次a在globalContext.AO中查找 a=1，并在globalContext.AO中的a賦值為200
fn2Context = {
    AO:{
    }
    fn2.[[scope]] = fnContext.AO
}
//第四次a在fnContext.AO中找到a=6，并賦值a=20
//第五次在fnContext.中查找 a=20
//第六次在globalContext中查找 a=200