JavaScript中的函數與做用域

函數

• 函數是什麼

函數是這樣的一段JavaScript代碼 它只定義一次 但可能被執行或調用屢次
簡單來講 函數就是一組可重用的代碼 能夠在程序的任何地方調用

定義函數

• 函數聲明方式

定義函數時 函數體的內容是不會被執行的

function fun(){
    console.log('這是一個函數');
}

• 字面量/直接量方式

var fun = function(){
    console.log('這是一個函數');
}

調用函數

定義一個函數並不會自動的執行它 定義了函數僅僅是賦予函數以及名稱並明確函數被調用時該作些聲明 調用函數纔會真正執行這些動做

• 定義一個函數fun

function fun(){
    console.log('這是一個函數');
}

• 調運函數

fun();    //輸出字符串:這是一個函數

函數的參數

函數的參數就至關於在函數中使用的變量(雖然這個比方不是很準確) JavaScript中的函數定義並未制定函數參數的可續 函數調用時也爲對傳入的參數作任何的類型檢查

• 函數的參數分爲形參和實參

形參:出如今函數定義文法中的參數列表是函數的形式參數 簡稱形參 簡單的說 就是定義函數使用的參數就是形參
1.形參的定義方式 相似於變量的(不須要任何關鍵字)
2.形參默認未定義任何值時 - undefined
實參:函數調用時實際傳入的參數是函數的實際參數 簡稱實參 簡單的說 就是調用函數時使用的參數就是實參

function fun( one, two){
    console.log( one, two);
}
fun(1, 2); //輸出 3
//定義函數fun時 one和two就是函數的形參;調用fun時 1和2就是函數的實參

形參與實參的區別:
1.形參的個數與實參不必定是一致的
2.形參的個數多於實參的個數 多餘的形參沒有值(默認爲 undefined)
3.實參的個數多於形參的個數 多餘的實參沒有對應的形參
4.形參與實參根據站位符進行一一對應

return語句

函數的return語句:
1.並非必要的 無關緊要
2.做用:做爲函數的返回值(數據內容)
3.用法:通常會被編寫在函數體的最後面
4.的確容許不編寫在函數體的最後面
5.一旦return語句不在函數體的最後面 return語句以後的代碼都再也不執行

function fun(){
    console.log('這是一個函數');
    return 100;
}
console.log(fun());/* 打印函數調用的結果 */
console.log(fun);/* 打印變量的值 */

function fn(){
    console.log('這是return語句以前...');
    return;
    console.log('這是return語句以後...');
}
var result = fn();
console.log(result);

預約義函數

JavaScript預約義了一組函數 又稱爲全局函數 容許直接使用

• eval()函數

eval()函數用於執行以字符串(String)形式出現的JavaScript代碼
做用:講一個字符串類型的JavaScript代碼轉換爲真正的JavaScript代碼

var str = 'console.log("這是一段代碼...")';
eval(str);

• decodeURI()函數

對已編碼的統一資源標識符(URI)進行解碼 並返回其非編碼形式

var uri="http://www.qianduan.com/web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91";
var decode=decodeURI(uri);
/*輸出結果：http://www.qianduan.com/web前端開發,對後面的編碼進行解碼成中文*/
console.log(decode);

• encodeURI()函數

對統一資源標識符(URI)進行編碼 並返回編碼後的URI字符串

var uri="http://www.qianduan.com/web前端開發";
var encode=encodeURI(uri);
/*輸出結果：http://www.qianduan.com/web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91
對後面中文部分進行編碼
*/
console.log(encode);

做用域

• 做用域是什麼

變量和函數都具備做用域 做用域就是變量和函數的可被訪問的範圍 控制着變量和函數的可見性和生命週期
變量的做用域可被分爲全局做用域和局部做用域(函數做用域) 若是變量是被定義在全局做用域的話 在JavaScript代碼中的任何位置均可以訪問該變量 若是變量被定義在指定函數內部 在JavaScript代碼中只能在該函數內部訪問該變量
函數的做用域也可被分爲全局做用域和局部做用域(函數做用域) 被定義在指定函數內部的函數被稱爲局部函數或內部函數

變量的做用域

• 全局變量

在全部函數以外聲明的變量 叫作全局變量 由於他能夠被當前文檔中的其餘代碼所訪問

var str='wolongqianduan';//定義全局變量str
//在全局做用域訪問全局變量str
//輸出結果：字符串的wolongqianduan
console.log(str);
function fun(){
//在函數做用域訪問全局變量str
//輸出結果：字符串的wolongqianduan
    console.log(str);
}
//調用fun
fun();

• 局部變量

在函數內部聲明的變量 叫作局部聲明 由於它只能在該函數內部訪問

var num = 200;
/*
    * 局部變量 - 做用於當前函數做用域中
      * 局部變量的值 - 只能在當前函數做用域進行初始化
    * 函數的參數 - 做用於當前函數體中
      * 參數的值(實參) - 在全局做用域中傳遞的
 */
function fun(a){
    var v = 100;

    console.log(v + a);
}
fun(num);

• 按值傳遞

按值傳遞就是指將實參變量的值複製一份副本給函數的形參變量 在JavaScript中爲函數傳遞參數是 都是按值傳遞的
若是向函數傳遞的參數是原始類型數據 則在函數中修改參數變量的值 不會影響外部實參的變量

/* 按值傳遞 */
var num = 100;/* 定義一個全局變量 */
/* 定義一個函數 */
function fun(num){/* 形參 */
    num++;
    console.log('這是函數內部的值: ' + num);// 101
}
/* 調用指定函數 - 實參傳遞的是全局變量的值 */
fun(num);/* 實參 */
/* 調用指定全局變量 */
console.log('這是全局做用域的值: ' + num);// 100 


var v = 200;
function fn(){
    v++;
}
fn();
console.log(v);// 201

聲明提早

JavaScript變量的另外一種特別之處 能夠引用後面聲明的變量 而不會引起異常 這一律念成爲變量聲明提早
JavaScript變量感受上是被舉起或提高到了全部函數和語句以前 然而提高後的變量將返回undefined值 因此即便在使用或引用某個變量以後存在聲明和初始化操做 仍獲得undefined值

• 全局變量與局部變量聲明

/*
    聲明提早
    console.log(num); - 先調用
    var num = 100;    - 再定義
    以上代碼等價於如下代碼
    var num;          - 定義變量，但未初始化值
    console.log(num); - 調用變量
    num = 100;        - 變量初始化值
 */
console.log(num);// undefined

var num = 100;/* 定義全局變量 */
/* 定義函數 */
function fun(){
    // 全局變量與局部變量同名時 - 在當前函數做用域中只能訪問局部變量
    console.log(num);// undefined

    var num = 200;/* 定義局部變量 */
    // 就近原則
    console.log(num);// 200
}
/* 調用函數 */
fun();
// 局部變量在全局做用域中沒法訪問 - 只能訪問全局變量
console.log(num);// 100

函數的做用域

• 全局函數

函數與變量相似 具備全局做用域和函數做用域(局部做用域)與全局變量類似 全局函數是被定義在全局做用域的 任何位置均可以訪問或調用該函數

function fun(num1,num2){
    console.log(num1+num2);//輸出  3
}
fun(1,2);

• 內部函數

一個函數被定義在另外一個函數的內部 被稱爲局部函數或者內部函數 與變量類似 局部函數只能在當前函數內部訪問 而不能在全局做用域中被訪問

function outer(){//全局函數
    function inner(){//局部函數
        console.log('inner');
    } 
    inner();//調用正常
}
inner();//輸出報錯