JavaScript函數與作用域的使用方法是什么

本篇內容介紹了“JavaScript函數與作用域的使用方法是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

1、函數

函數：就是封裝了一段可被重復調用執行的代碼塊。通過此代碼塊可以實現大量代碼的重復使用。

1.1、函數的使用

函數在使用時分為兩步：聲明函數和調用函數

①聲明函數

//聲明函數function 函數名(){
     //函數體代碼}

• function是聲明函數的關鍵字,必須小寫

• 由于函數一般是為了實現某個功能才定義的， 所以通常我們將函數名命名為動詞，比如getSum

②調用函數

//調用函數函數名(); //通過調用函數名來執行函數體代碼

• 調用的時候千萬不要忘記添加小括號

• 口訣：函數不調用，自己不執行

注意：聲明函數本身并不會執行代碼，只有調用函數時才會執行函數體代碼。

1.2、函數的封裝

• 函數的封裝是把一個或者多個功能通過函數的方式封裝起來，對外只提供一個簡單的函數接口

1.3、函數的參數

1.3.1、形參和實參

在聲明函數時，可以在函數名稱后面的小括號中添加一些參數，這些參數被稱為形參，而在調用該函數時，同樣也需要傳遞相應的參數，這些參數被稱為實參。

參數的作用 : 在函數內部某些值不能固定，我們可以通過參數在調用函數時傳遞不同的值進去

// 帶參數的函數聲明function 函數名(形參1, 形參2 , 形參3...) { // 可以定義任意多的參數，用逗號分隔
  // 函數體}// 帶參數的函數調用函數名(實參1, 實參2, 實參3...);

例如：利用函數求任意兩個數的和

// 聲明函數function getSum(num1,num2){
    console.log(num1+num2)}// 調用函數getSum(1,3) //4getSum(6，5) //11

• 函數調用的時候實參值是傳遞給形參的

• 形參簡單理解為:不用聲明的變量

• 實參和形參的多個參數之間用逗號(,)分隔，

1.3.2、形參和實參個數不匹配

function sum(num1, num2) {
    console.log(num1 + num2);
}
sum(100, 200);             // 300，形參和實參個數相等，輸出正確結果

sum(100, 400, 500, 700);   // 500，實參個數多于形參，只取到形參的個數

sum(200);                  // 實參個數少于形參，多的形參定義為undefined，結果為NaN

注意：在JavaScript中，形參的默認值是undefined

1.3.3、小結

• 函數可以帶參數也可以不帶參數

• 聲明函數的時候，函數名括號里面的是形參，形參的默認值為 undefined

• 調用函數的時候，函數名括號里面的是實參

• 多個參數中間用逗號分隔

• 形參的個數可以和實參個數不匹配，但是結果不可預計，我們盡量要匹配

1.4、函數的返回值

1.4.1、return語句

有的時候，我們會希望函數將值返回給調用者，此時通過使用 return 語句就可以實現。

return 語句的語法格式如下：

// 聲明函數function 函數名（）{
    ...
    return  需要返回的值;}// 調用函數函數名();    // 此時調用函數就可以得到函數體內return 后面的值

• 在使用 return 語句時，函數會停止執行，并返回指定的值

• 如果函數沒有 return，返回的值是undefined

function add(num1，num2){
    //函數體
    return num1 + num2; // 注意：return 后的代碼不執行
    alert('我不會被執行，因為前面有 return');
}
var resNum = add(21,6); // 調用函數，傳入兩個實參，并通過 resNum 接收函數返回值
alert(resNum);          // 27

1.4.2、return 終止函數

return 語句之后的代碼不被執行

function add(num1，num2){
    //函數體
    return num1 + num2; // 注意：return 后的代碼不執行
    alert('我不會被執行，因為前面有 return');}var resNum = add(21,6); // 調用函數，傳入兩個實參，并通過 resNum 接收函數返回值alert(resNum);          // 27

1.4.3、return 的返回值

return只能返回一個值。如果用逗號隔開多個值，以最后一個為準

function add(num1，num2){
    //函數體
    return num1,num2;
}
var resNum = add(21,6); // 調用函數，傳入兩個實參，并通過 resNum 接收函數返回值
alert(resNum);          // 6

1.4.4、小結

函數都是有返回值的

1. 如果有 return ，則返回 return 后面的值

2. 如果沒有 return，則返回 undefined

1.4.5、區別

break、continue、return 的區別

• break ： 結束當前循環體(如 for、while)

• continue ：跳出本次循環，繼續執行下次循環(如for、while)

• return ：不僅可以退出循環，還能夠返回 return 語句中的值，同時還可以結束當前的函數體內的代碼

1.4.5、練習

1.利用函數求任意兩個數的最大值

function getMax(num1, num2) {
    return num1 > num2 ? num1 : num2;}console.log(getMax(1, 2));console.log(getMax(11, 2));

2.求數組 [5,2,99,101,67,77] 中的最大數值

//定義一個獲取數組中最大數的函數function getMaxFromArr(numArray){
    var maxNum = numArray[0];
    for(var i = 0; i < numArray.length;i++){
        if(numArray[i]>maxNum){
            maxNum = numArray[i];
        }
    }
    return maxNum;}var arrNum = [5,2,99,101,67,77];var maxN = getMaxFromArr(arrNum);  //這個實參是個數組alert('最大值為' + maxN);

3.創建一個函數，實現兩個數之間的加減乘除運算，并將結果返回

var a = parseFloat(prompt('請輸入第一個數'));var b = parseFloat(prompt('請輸入第二個數'));function count(a,b){
    var arr = [a + b, a - b, a * b, a / b];
    return arr;}var result = count(a,b);console.log(result)

1.5、arguments的使用

當我們不確定有多少個參數傳遞的時候，可以用arguments來獲取。在 JavaScript 中，arguments 實際上它是當前函數的一個內置對象。所有函數都內置了一個 arguments 對象，arguments 對象中存儲了傳遞的所有實參。

• arguments存放的是傳遞過來的實參

• arguments展示形式是一個偽數組，因此可以進行遍歷。偽數組具有以下特點

①：具有 length 屬性

②：按索引方式儲存數據

③：不具有數組的 push , pop 等方法

// 函數聲明function fn() {
    console.log(arguments);  //里面存儲了所有傳遞過來的實參
    console.log(arrguments.length); // 3
    console.log(arrguments[2]); // 3}// 函數調用fn(1,2,3);

例如：利用函數求任意個數的最大值

 function maxValue() {
    var max = arguments[0];
    for (var i = 0; i < arguments.length; i++) {
        if (max < arguments[i]) {
            max = arguments[i];
        }
    }
    return max;}console.log(maxValue(2, 4, 5, 9)); // 9console.log(maxValue(12, 4, 9)); // 12

函數調用另外一個函數

因為每個函數都是獨立的代碼塊，用于完成特殊任務，因此經常會用到函數相互調用的情況。具體演示在下面的函數練習中會有。

1.6、函數練習

1.利用函數封裝方式，翻轉任意一個數組

function reverse(arr) {
    var newArr = [];
    for (var i = arr.length - 1; i >= 0; i--) {
        newArr[newArr.length] = arr[i];
    }
    return newArr;}var arr1 = reverse([1, 3, 4, 6, 9]);console.log(arr1);

2.利用函數封裝方式，對數組排序 – 冒泡排序

function sort(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = 0; j < arr.length - i - 1; j++) {
            if (arr[j] > arr[j+1]) { 
	            var temp = arr[j];
	            arr[j] = arr[j + 1]; 
	            arr[j + 1] = temp;
            }
        }
    }
    return arr;}

3.輸入一個年份，判斷是否是閏年（閏年：能被4整除并且不能被100整數，或者能被400整除）

function isRun(year) {
     var flag = false;
     if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
        flag = true;
     }
    return flag;}console.log(isRun(2010));console.log(isRun(2012));

4.用戶輸入年份，輸出當前年份2月份的天數，如果是閏年，則2月份是 29天， 如果是平年，則2月份是 28天

function backDay() {
    var year = prompt('請您輸入年份:');
    if (isRun(year)) { //調用函數需要加小括號
        alert('你輸入的' + year + '是閏年，2月份有29天');
    } else {
        alert('您輸入的' + year + '不是閏年，2月份有28天');
    }}backDay();//判斷是否是閏年的函數function isRun(year) {
    var flag = false;
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
        flag = true;
    }
    return flag;}

1.7、函數的兩種聲明方式

1.7.1、自定義函數方式(命名函數)

利用函數關鍵字function自定義函數方式。

// 聲明定義方式function fn() {...}// 調用  fn();

1. 因為有名字，所以也被稱為命名函數

2. 調用函數的代碼既可以放到聲明函數的前面，也可以放在聲明函數的后面

1.7.2、函數表達式方式(匿名函數)

利用函數表達式方式的寫法如下：

// 這是函數表達式寫法，匿名函數后面跟分號結束
var fn = function(){...};
// 調用的方式，函數調用必須寫到函數體下面
fn();

• 因為函數沒有名字，所以也稱為匿名函數

• 這個fn 里面存儲的是一個函數

• 函數調用的代碼必須寫到函數體后面

2、作用域

通常來說，一段程序代碼中所用到的名字并不總是有效和可用的，而限定這個名字的可用性的代碼范圍就是這個名字的作用域。作用域的使用提高了程序邏輯的局部性，增強了程序的可靠性，減少了名字沖突。

JavaScript (ES6前) 中的作用域有兩種：

• 全局作用域

• 局部作用域(函數作用域)

2.1、全局作用域

作用于所有代碼執行的環境(整個 script 標簽內部)或者一個獨立的 js 文件

2.2、局部（函數）作用域

作用于函數內的代碼環境，就是局部作用域。 因為跟函數有關系，所以也稱為函數作用域

2.3、JS 沒有塊級作用域

• 塊作用域由 {} 包括

• 在其他編程語言中（如 java、c#等），在 if 語句、循環語句中創建的變量，僅僅只能在本 if 語句、本循環語句中使用，如下面的Java代碼：

if(true){
    int num = 123;
    System.out.println(num);	// 123}System.out.println(num);		// 報錯

JS 中沒有塊級作用域(在ES6之前)

if(true){
    int num = 123;
    System.out.println(num);	// 123}System.out.println(num);		// 123

3、變量的作用域

在JavaScript中，根據作用域的不同，變量可以分為兩種：

• 全局變量

• 局部變量

3.1、全局變量

在全局作用域下聲明的變量叫做全局變量（在函數外部定義的變量）

• 全局變量在代碼的任何位置都可以使用

• 在全局作用域下var聲明的變量 是全局變量

• 特殊情況下，在函數內不使用 var 聲明的變量也是全局變量（不建議使用）

3.2、局部變量

在局部作用域下聲明的變量叫做局部變量（在函數內部定義的變量）

• 局部變量只能在該函數內部使用

• 在函數內部 var 聲明的變量是局部變量

• 函數的形參實際上就是局部變量

3.3、區別

• 全局變量：在任何一個地方都可以使用，只有在瀏覽器關閉時才會被銷毀，因此比較占內存

• 局部變量：只在函數內部使用，當其所在的代碼塊被執行時，會被初始化；當代碼塊運行結束后，就會被銷毀，因此更節省內存空間

4、作用域鏈

1. 只要是代碼，就至少有一個作用域

2. 寫在函數內部的叫局部作用域

3. 如果函數中還有函數，那么在這個作用域中就又可以誕生一個作用域

4. 根據在內部函數可以訪問外部函數變量的這種機制，用鏈式查找決定哪些數據能被內部函數訪問，就稱作作用域鏈

// 作用域鏈: 內部函數訪問外部函數的變量，采取的是鏈式查找的方式來決定取哪個值，這種結構我們稱為作用域鏈表var num = 10;funtion fn() { //外部函數
    var num = 20;
    
    function fun() { //內部函數
        console.log(num);  // 20 ,一級一級訪問
    }}

• 作用域鏈：采取就近原則的方式來查找變量最終的值。

5、預解析

首先來看幾段代碼和結果：

console.log(num);  // 結果是多少？//會報錯 num is undefined

console.log(num);  // 結果是多少？var num = 10;   // undefined

// 命名函數(自定義函數方式):若我們把函數調用放在函數聲明上面fn();				//11function fn() {
    console.log('11');}

// 匿名函數(函數表達式方式):若我們把函數調用放在函數聲明上面fn();var  fn = function() {
    console.log('22'); // 報錯}//相當于執行了以下代碼var fn;fn();      //fn沒賦值，沒這個，報錯var  fn = function() {
    console.log('22'); //報錯}

JavaScript 代碼是由瀏覽器中的 JavaScript 解析器來執行的。JavaScript 解析器在運行 JavaScript 代碼的時候分為兩步：預解析和代碼執行。

• 預解析：js引擎會把js里面所有的 var 還有 function 提升到當前作用域的最前面

• 代碼執行：從上到下執行JS語句

預解析只會發生在通過 var 定義的變量和 function 上。學習預解析能夠讓我們知道為什么在變量聲明之前訪問變量的值是 undefined，為什么在函數聲明之前就可以調用函數。

5.1、變量預解析(變量提升)

變量預解析也叫做變量提升、函數提升

變量提升: 變量的聲明會被提升到當前作用域的最上面，變量的賦值不會提升

console.log(num);  // 結果是多少？
var num = 10;   
// undefined



//相當于執行了以下代碼
var num;		// 變量聲明提升到當前作用域最上面
console.log(num);
num = 10;		// 變量的賦值不會提升

5.2、函數預解析(函數提升)

函數提升： 函數的聲明會被提升到當前作用域的最上面，但是不會調用函數。

fn();				//11function fn() {
    console.log('11');}

5.3、解決函數表達式聲明調用問題

對于函數表達式聲明調用需要記住：函數表達式調用必須寫在函數聲明的下面

// 匿名函數(函數表達式方式):若我們把函數調用放在函數聲明上面
fn();
var  fn = function() {
    console.log('22'); // 報錯
}


//相當于執行了以下代碼
var fn;
fn();      //fn沒賦值，沒這個，報錯
var  fn = function() {
    console.log('22'); //報錯
}

5.4、預解析練習

預解析部分十分重要，可以通過下面4個練習來理解。
Pink老師的視頻講解預解析：https://www.bilibili.com/video/BV1Sy4y1C7ha?p=143

// 練習1var num = 10;fun();function fun() {
    console.log(num);	//undefined
    var num = 20;}// 最終結果是 undefined

上述代碼相當于執行了以下操作

var num;function fun() {
    var num;
    console.log(num);
    num = 20;}num = 10;fun();

// 練習2var num = 10;function fn(){
    console.log(num);		//undefined
    var num = 20;
    console.log(num);		//20}fn();// 最終結果是 undefined 20

上述代碼相當于執行了以下操作

var num;function fn(){
    var num;
    console.log(num);
    num = 20;
    console.log(num);}num = 10;fn();

// 練習3var a = 18;f1();function f1() {
    var b = 9;
    console.log(a);
    console.log(b);
    var a = '123';}

上述代碼相當于執行了以下操作

var a;function f1() {
    var b;
    var a
    b = 9;
    console.log(a);	//undefined
    console.log(b);	//9
    a = '123';}a = 18;f1();

// 練習4f1();console.log(c);console.log(b);console.log(a);function f1() {
    var a = b = c = 9;
    // 相當于 var a = 9; b = 9;c = 9;  b和c的前面沒有var聲明,當全局變量看
    // 集體聲明 var a = 9,b = 9,c = 9;
    console.log(a);
    console.log(b);
    console.log(c);}

上述代碼相當于執行了以下操作

function f1() {
    var a;
    a = b = c = 9;
    console.log(a);	//9
    console.log(b);	//9
    console.log(c);	//9
}
f1();
console.log(c);	//9
console.log(b);	//9
console.log(a);	//報錯 a是局部變量

“JavaScript函數與作用域的使用方法是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！