javascript學習四、Function函數、僞數組arguments

一.Function函數基礎

函數：就是將一些語句進行封裝，而後經過調用的形式，執行這些語句。

1.函數的做用：

• 將大量重複的語句寫在函數裏，之後須要這些語句的時候，能夠直接調用函數，避免重複勞動。

• 簡化編程，讓編程模塊化。

console.log("hello world");
sayHello();     //調用函數
//定義函數：
function sayHello(){
　　console.log("hello");
　　console.log("hello world");
}

 

2.函數的定義

函數定義的語法：

function 函數名字(){
    函數體
    return 返回值
}

解釋以下：

• function：是一個關鍵字。中文是「函數」、「功能」。

• 函數名字：命名規定和變量的命名規定同樣。只能是字母、數字、下劃線、美圓符號，不能以數字開頭。

• 參數：後面有一對小括號，裏面是放參數用的。

• 大括號裏面，是這個函數的語句。

3. 函數的調用

函數調用的語法：

函數名字();

4. 形參和實參

函數的參數包括形參和實參

注意：實際參數和形式參數的個數，要相同。

sum(3,4);
sum("3",4);
sum("Hello","World");

//函數：求和
function sum(a, b) {
    console.log(a + b);
}

5. 函數的返回值

console.log(sum(3, 4));
    //函數：求和
    function sum(a, b) {
        return a + b;
}

 

二.函數類型

　　JavaScript中函數基本上能夠分爲一下三類,普通函數，匿名函數，自執行函數,此外須要注意的是對於JavaScript中函數參數，實際參數的個數可能小於形式參數的個數，函數內的特殊值arguments中封裝了全部實際參數。

// 普通函數
function func(arg){
    return true;
}
           
// 匿名函數
var func = function(arg){
    return "tony";
}
   
// 自執行函數
(function(arg){
    console.log(arg);
})('123')

注意：對於JavaScript中函數參數，實際參數的個數可能小於形式參數的個數，函數內的特殊值arguments中封裝了全部實際參數。

 

三.函數做用域

JavaScript中每一個函數都有本身的做用域，當出現函數嵌套時，就出現了做用域鏈。當內層函數使用變量時，會根據做用域鏈從內到外一層層的循環，若是不存在，則異常。

切記：全部的做用域在建立函數且未執行時候就已經存在。

(1)「JavaScript中無塊級做用域」

function Main(){
    if(1==1){
        var name = 'seven';
    }
    console.log(name);
}
// 輸出： seven

補充：標題之因此添加雙引號是由於JavaScript6中新引入了 let 關鍵字，用於指定變量屬於塊級做用域。

(2)JavaScript採用函數做用域

在JavaScript中每一個函數做爲一個做用域，在外部沒法訪問內部做用域中的變量。

function Main(){
    var innerValue = 'seven';
}
  
Main();
  
console.log(innerValue);
  
// 報錯：Uncaught ReferenceError: innerValue is not defined　

(3)JavaScript的做用域鏈

因爲JavaScript中的每一個函數做爲一個做用域，若是出現函數嵌套函數，則就會出現做用域鏈。　

xo = 'tomcat';
   
function Func(){
    var xo = "seven";
    function inner(){
        var xo = 'alvin';
        console.log(xo);
    }
    inner();
}
Func();

如上述代碼則出現三個做用域組成的做用域鏈，若是出現做用域鏈後，那麼尋找變量時候就會出現順序，對於上述實例：

當執行console.log(xo)時，其尋找順序爲根據做用域鏈從內到外的優先級尋找，若是內層沒有就逐步向上找，直到沒找到拋出異常。

(4)JavaScript的做用域鏈執行前已建立

JavaScript的做用域在被執行以前已經建立，往後再去執行時只須要按照做用域鏈去尋找便可。

示例一：

xo = 'tomcat';
  
function Func(){
    var xo = "seven";
    function inner(){
  
        console.log(xo);
    }
    return inner;
}
  
var ret = Func();
ret();
// 輸出結果： seven

上述代碼，在函數被調用以前做用域鏈已經存在：

• 全局做用域 -> Func函數做用域 -> inner函數做用域

當執行【ret();】時，因爲其代指的是inner函數，此函數的做用域鏈在執行以前已經被定義爲：全局做用域 -> Func函數做用域 -> inner函數做用域，因此，在執行【ret();】時，會根據已經存在的做用域鏈去尋找變量。

示例二：

xo = 'tomcat';
  
function Func(){
    var xo = "mei";
    function inner(){
  
        console.log(xo);
    }
    xo = 'seven';
    return inner;
}
  
var ret = Func();
ret();
// 輸出結果： seven

上述代碼和示例一的目的相同，也是強調在函數被調用以前做用域鏈已經存在：

• 全局做用域 -> Func函數做用域 -> inner函數做用域

不一樣的時，在執行【var ret = Func();】時，Func做用域中的xo變量的值已經由 「eric」 被重置爲 「seven」，因此以後再執行【ret();】時，就只能找到「seven」。

示例三：

xo = 'tomcat';
 
function Bar(){
    console.log(xo);
}
  
function Func(){
    var xo = "seven";
      
    return Bar;
}
  
var ret = Func();
ret();
// 輸出結果： tomcat

上述代碼，在函數被執行以前已經建立了兩條做用域鏈：

• 全局做用域 -> Bar函數做用域
• 全局做用域 -> Func函數做用域

當執行【ret();】時，ret代指的Bar函數，而Bar函數的做用域鏈已經存在：全局做用域 -> Bar函數做用域，因此，執行時會根據已經存在的做用域鏈去尋找。

(5)提早聲明變量

在JavaScript中若是不建立變量，直接去使用，則報錯：

console.log(xxoo);
// 報錯：Uncaught ReferenceError: xxoo is not defined

JavaScript中若是建立值而不賦值，則該值爲 undefined，如：

var xxoo;
console.log(xxoo);
// 輸出：undefined

在函數內若是這麼寫：

function Foo(){
    console.log(xo);
    var xo = 'seven';
}
  
Foo();
// 輸出：undefined

上述代碼，不報錯而是輸出 undefined，其緣由是：JavaScript的函數在被執行以前，會將其中的變量所有聲明，而不賦值。因此，至關於上述實例中，函數在「預編譯」時，已經執行了var xo；因此上述代碼中輸出的是undefined。

四.閉包

「閉包」，是指擁有多個變量和綁定了這些變量的環境的表達式（一般是一個函數），於是這些變量也是該表達式的一部分。

閉包是個函數，而它「記住了周圍發生了什麼」。表現爲由「一個函數」體中定義了「另個函數」

因爲做用域鏈只能從內向外找，默認外部沒法獲取函數內部變量。閉包，在外部獲取函數內部的變量。

function f2(){
    var arg= [11,22];
    function f3(){
        return arg;
    }
    return f3;
}
  
ret = f2();
ret();

 

五.僞數組arguments

arguments表明的是實參。有個講究的地方是：arguments只在函數中使用。

(1) 返回函數實參的個數：arguments.length

例子：

fn(2,4);
fn(2,4,6);
fn(2,4,6,8);

function fn(a,b,c) {
    console.log(arguments);
    console.log(fn.length);         //獲取形參的個數
    console.log(arguments.length);  //獲取實參的個數

    console.log("----------------");
}

結果：

(2) 之因此說arguments是僞數組，是由於：arguments能夠修改元素，但不能改變數組的長短。舉例：

fn(2,4);
fn(2,4,6);
fn(2,4,6,8);

function fn(a,b) {
    arguments[0] = 99;  //將實參的第一個數改成99
    arguments.push(8);  //此方法不經過，由於沒法增長元素
}

清空數組的幾種方式：

var array = [1,2,3,4,5,6];

array.splice(0);      //方式1：刪除數組中全部項目
array.length = 0;     //方式1：length屬性能夠賦值，在其它語言中length是隻讀
array = [];           //方式3：推薦