JS 聲明變量的三種方式

（1）使用變量步驟：a.聲明-->b.賦值-->3.調(diào)用

正確用法：

<script type="text/javascript">// 方式一：聲明和賦值不分離var correctUsage = "正確使用變量的方式一";alert(correctUsage); //能夠彈出來該變量所對(duì)應(yīng)的值// 方式二：聲明和賦值分離var correctUsage2;correctUsage2 = "正確使用變量的方式二";alert(correctUsage2); </script>

錯(cuò)誤用法：

<script type="text/javascript">var correctUsage;// 錯(cuò)誤一： 沒有賦值就使用alert(correctUsage); //underfined// 錯(cuò)誤二：沒有賦值就拼接字符串correctUsage += "沒有賦值就改值";alert(correctUsage); //undefined沒有賦值就改值 </script>

（2）變量的產(chǎn)生與死亡

?? 已使用var關(guān)鍵詞聲明表里為例

? 2.1 聲明在函數(shù)外部的變量

?? 產(chǎn)生：js加載到該變量所在行時(shí)產(chǎn)生

?? 死亡：js代碼加載完畢，變量死亡

?? 2.2聲明在函數(shù)內(nèi)部的變量

??? 前提：該變量所在的函數(shù)被調(diào)用

??? 產(chǎn)生：js執(zhí)行到該變量所在行時(shí)產(chǎn)生

??? 死亡： 該變量所在的函數(shù)執(zhí)行行結(jié)束

??? 舉例：

???? 情景一：函數(shù)只聲明，不調(diào)用

<script type="text/javascript">function test(){var aa = "test";aa +="只聲明，但不調(diào)用該函數(shù)時(shí)，該函數(shù)會(huì)不會(huì)執(zhí)行？"; //添加內(nèi)容alert(aa);aa = "該函數(shù)的變量不會(huì)執(zhí)行！";alert(aa); } </script>

?? 說明：上面2個(gè)alert不會(huì)執(zhí)行

?? 情景二：聲明并調(diào)用該函數(shù)

function test(){var aa = "test";aa +="只聲明，但不調(diào)用該函數(shù)時(shí)，該函數(shù)會(huì)不會(huì)執(zhí)行？"; //添加內(nèi)容alert(aa);aa = "該函數(shù)的變量不會(huì)執(zhí)行！";alert(aa);}test();

說明：上面2個(gè)alert均會(huì)執(zhí)行

（3）全局變量與局部變量

???? 3.1全局變量

???? 聲明在函數(shù)體外，任何地方都可訪問到該變量

????? 3.2局部變量

????? 聲明在函數(shù)體內(nèi)，只有在函數(shù)體內(nèi)可訪問到該變量

?（4）聲明變量的3種方式及作用域

????? 4.1使用var (最常見）

????? var聲明的變量可以是全局的（函數(shù)外面），也可以是函數(shù)級(jí)的（函數(shù)內(nèi)部）

function test() {globalVar = "這是一個(gè)全局變量";var partialVar = "這是一個(gè)局部變量"; } test(); alert(globalVar); //這是一個(gè)全局變量 alert(partialVar); //直接報(bào)錯(cuò)

說明：函數(shù)內(nèi)部聲明變量的時(shí)候，一定要使用var命令，如果不用的話，你實(shí)際上聲明了一個(gè)全局變量

情景一：

var varLocation = "函數(shù)外部聲明并賦值"; function test(){varLocation = "函數(shù)內(nèi)部改值";alert(varLocation); // 函數(shù)內(nèi)部改值 } test(); alert(varLocation); // 函數(shù)內(nèi)部改值

明：函數(shù)外面聲明的變量，在函數(shù)內(nèi)部改變?cè)撝岛?#xff0c;函數(shù)外面的該變量的值也隨之改變

情景二：

var varLocation = "函數(shù)外部聲明并賦值"; function test(){var varLocation = "函數(shù)內(nèi)部改值";alert(varLocation); // 函數(shù)內(nèi)部改值 } test(); alert(varLocation); // 函數(shù)內(nèi)部改值

說明：在函數(shù)外面使用var聲明一個(gè)變量后，再在函數(shù)內(nèi)部使用var再次聲明一次并改變其值，函數(shù)外面的該變量的值不會(huì)發(fā)生改變。?

4.2 使用const

　　const用于修飾常量，定義的變量不可修改，而且必須初始化，聲明位置不限（通常聲明在js開頭），與java類的final關(guān)鍵字性質(zhì)一樣

舉例：

function test(){const testConstant = "測(cè)試常量";alert(testConstant);testConstant = "改變常量值"; } test();

4.3 使用let

let聲明的變量在{}中使用，變量的作用域限制在塊級(jí)域中

舉例：使用js動(dòng)態(tài)給ul添加li對(duì)象并點(diǎn)擊第幾項(xiàng)，顯示當(dāng)前點(diǎn)擊是第幾個(gè)

window.onload = function(){var ul = document.getElementById("ulList");for(var i = 0 i <= 5; i++){// 創(chuàng)建一個(gè)li對(duì)象var li = document.createElement("li");// li標(biāo)簽內(nèi)內(nèi)容設(shè)置為：Itemili.appendChild(document.createTextNode("Item" + i));// 聲明一個(gè)塊級(jí)變量j，并將i賦給jlet j = i;// 綁定點(diǎn)擊事件li.onclick = function(){alert("Item" + i + "is clicked.");};ul.appendClild(li);} }

錯(cuò)誤方式：

window.onload = function(){var ul = document.getElementById("ulList");for(var i = 0 i <= 5; i++){// 創(chuàng)建一個(gè)li對(duì)象var li = document.createElement("li");// li標(biāo)簽內(nèi)內(nèi)容設(shè)置為：Itemili.appendChild(document.createTextNode("Item" + i));// 綁定點(diǎn)擊事件li.onclick = function(){alert("Item" + i + "is clicked.");};ul.appendClild(li);} }

結(jié)果：點(diǎn)擊每個(gè)li，提示的都是“Item 6 is clicked.”

擴(kuò)展：使用var如何實(shí)現(xiàn)這種效果？閉包

window.onload = function(){var ul = document.getElementById("ulList");for(var i = 0 i <= 5; i++){// 創(chuàng)建一個(gè)li對(duì)象var li = document.createElement("li");// li標(biāo)簽內(nèi)內(nèi)容設(shè)置為：Itemili.appendChild(document.createTextNode("Item" + i));// 綁定點(diǎn)擊事件li.onclick = (function(i){return function (){alert("Item" + i + "is clicked.");};})(i) // 閉包// 將LI對(duì)象item拼接到UL標(biāo)簽體內(nèi)ul.appendClild(li);} }

說明：采用的閉包的方式在綁定的時(shí)候已經(jīng)把j的值已經(jīng)傳遞給對(duì)應(yīng)的click事件了，所以能夠?qū)崿F(xiàn)相同的結(jié)果，但是，從程序的可維護(hù)性來說不推薦使用。?

4.4 聲明變量的要項(xiàng)　　

4.4.1?js聲明的變量取值的原則：就近原則；

4.4.2?js是弱類型語言，不同的數(shù)據(jù)類型可以用同一個(gè)變量名表示；

4.4.3?函數(shù)內(nèi)部聲明的變量，不會(huì)影響函數(shù)外部同名的變量的值。

舉例：

var testVarValue = "測(cè)試就近原則"; <script type="text/javascript">function test() {const testRepeatStatement = "測(cè)試用一個(gè)變量賦予不同的類型及不同的值";alert(testRepeatStatement); //測(cè)試用一個(gè)變量賦予不同的類型及不同的值}test(); </script>

（5）如何避免全局污染？　?

?方法：閉包

?舉例：

(function(){// 聲明一個(gè)JSON對(duì)象var JsonObj = {};//定義該對(duì)象的屬性及屬性值JsonObj.name = "對(duì)象的屬性";JsonObj.method = function() {alert("測(cè)試是否能夠調(diào)用該方法");return JsonObj.name;}// 通過操作window對(duì)象，供外部訪問該對(duì)象的屬性和方法window.GlobalObj = JsonObj;})();// 調(diào)取該對(duì)象的方法并接受返回值var name = GlobalObj.method(); // 獲取的是返回值namealert(name); //對(duì)象屬性// 只獲取該方法但不調(diào)用var method = GlobalObj.method; // 獲取的是對(duì)象GlobalObj2的method1()方法alert(method);// function (){// alert("測(cè)試是否能夠調(diào)用該方法");// return JsonObj.name;//}// 調(diào)用接受到的方法，但不接受返回值method();

閉包的優(yōu)缺點(diǎn)說明：

優(yōu)點(diǎn)：設(shè)計(jì)私有的方法和變量，保護(hù)函數(shù)內(nèi)的變量安全；

弊端：閉包有一個(gè)非常嚴(yán)重的問題，那就是內(nèi)存浪費(fèi)問題，這個(gè)內(nèi)存浪費(fèi)不僅僅因?yàn)樗ｑv內(nèi)存，更重要的是，對(duì)閉包的使用不當(dāng)會(huì)造成無效內(nèi)存的產(chǎn)生。

總結(jié)

以上是生活随笔為你收集整理的js声明变量的三种方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。