首頁 > web前端 > 前端問答 > javascript的2種變數範圍有什麼不同

javascript的2種變數範圍有什麼不同

青灯夜游
發布: 2023-01-07 11:44:07
原創
3080 人瀏覽過

區別:在全域作用域中,變數在整個頁面腳本中都是可見的,可以自由存取。在局部作用域中,變數僅能在宣告的函數內部可見,函數外是不允許存取的;函數執行完畢之後,局部作用域銷毀。

javascript的2種變數範圍有什麼不同

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

變數範圍,可稱為“變數作用域(Scope)”,是指變數在程式中可以存取的有效範圍,也稱為變數的可見性。

作用域

1、什麼是作用域(Scope)

 通常來說,一段程式碼中所用到的名字並不總是有效和可用的,而限定這個名字的可用性的代碼範圍就是這個名字的作用域。

JS作用域:就是程式碼名字(變數)作用的範圍

作用域的目的:是為了提高程式的可靠性,更重要的是減少命名衝突

#2、JS的作用域的分類(ES6之前)

JS作用域可以分為兩大類:全域作用域、局部作用域(函數作用域)

1)全域作用域:

  直接寫在script 標籤之中的JS程式碼,都是全域作用域;

#或是一個單獨的JS 檔案中的。

  全域作用域在頁面開啟時創建,頁面關閉時銷毀;

  在全域作用域中有一個全域物件window(代表的是一個瀏覽器的窗口,由瀏覽器創建),可以直接使用。

在全域作用域中,

  • 所有建立的變數都會作為 window 物件的屬性保存。

  • 所有建立的函數都會儲存為 window 物件的方法。

2)局部作用域(函數作用域):

  在函數內部就是局部作用域,這個程式碼的名字只在函數的內部起作用

  呼叫函數時創建函數作用域,函數執行完畢之後,函數作用域銷毀;

  每調用一次函數就會創建一個新的函數作用域,它們之間是相互獨立的。

實例分析:

在這個例子裡面 un函數裡面的 局部作用域中 有一個 num 變量,script 標籤的全域作用域中也有一個 num變數。

(一個在全域作用域下,另一個在局部作用域下,雖然兩個變數的變數名稱相衝突,但是並沒有影響。)

所以,在不同的作用域下,變數名稱相同也不受影響,這樣就很有效的減少了命名衝突。

<script>
    var num = 10;
    function nu(){
        var num = 20;
        console.log(num);
    }
    nu();
    console.log(num);
</script>
登入後複製

 JS現階段(ES6之前)沒有區塊級作用域,被區塊級作用域就是用大括號({})包含的就是區塊級作用域。

二、變數的作用域

JavaScript 變數可以分為全域變數與局部變數:

  • 全域變數:變數在整個頁面腳本中都是可見的,可以被自由存取;其作用域為全域作用域。

  • 局部變數:變數只能在宣告的函數內部可見,函數外是不允許存取的;其作用域為局部作用域。

範例1

下面範例示範了全域變數和局部變數的關係。

var a = 1;  //声明并初始化全局变量
function f(){  //声明函数
    document.write(a);  //显示undefined
    var a = 2;  //声明并初始化局部变量
    document.write(a);  //显示 2
}
f(); //调用函数
登入後複製

由於函數內部宣告了一個同名局部變數 a,所以在預編譯期,JavaScript 使用該變數覆寫全域變數在函數內部的影響。而在執行初期,局部變數 a 未賦值,所以在函數內第 1 行程式碼讀取局部變數 a 的值也就是 undefined 了。當執行到函數第 2 行程式碼時,為局部變數賦值 2,所以在第 3 行就顯示為 2。

範例2

下面範例示範如果不明確宣告局部變數所帶來的後果。

var jQuery = 1;
(function () {
    jQuery = window.jQuery = window.$ = function(){};
})()
document.write(jQuery);  //显示函数代码:function(){}
登入後複製

因此,在函數體內使用全域變數是一種危險的行為。為了避免此類問題,應該養成在函數體內使用 var 語句明確聲明局部變數的習慣。

【推薦學習:javascript高階教學

#

以上是javascript的2種變數範圍有什麼不同的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板