JavaScript中var的重要性實例分析

更新時間：2019年07月09日 08:45:44 作者：webbc

這篇文章主要介紹了JavaScript中var的重要性,結(jié)合實例形式分析了javascript變量定義、作用范圍、作用域及相關操作注意事項,需要的朋友可以參考下

本文實例講述了JavaScript中var的重要性。分享給大家供大家參考，具體如下：

在JS中申明變量是使用var來進行申明，但是有的時候我們沒有使用var也可以。這是為什么呢？我來給大家細細的說來。

var的本質(zhì)

var的本質(zhì)就是來申明變量的

<script>
var str = 'China';//申明并進行賦值
</script>

變量的作用范圍

先以一個例子來說明引出問題，在這個例子中，在函數(shù)t中沒有使用var關鍵字來申明變量，系統(tǒng)認為只是進行賦值操作而已，而且這個賦值操作會影響到了window對象的str2屬性

<script>
var str1 = 'China';//申明并賦值str1
var str2 = 'Japan';//申明并賦值str2
console.log(window.str1,window.str2);//輸出：China Japan
function t(){
  var str1 = 'local';//申明并賦值str1
  str2 = 'global';//賦值操作，并不是申明變量，污染window對象的屬性
}
t();//調(diào)用t函數(shù)
console.log(window.str1,window.str2);//輸出：China global
</script>

變量的作用域

全局作用域：在最外層定義的變量

局部作用域：在函數(shù)內(nèi)部定義的變量

JS作用域的特點：首先在函數(shù)內(nèi)部查找變量，找不到則到外層函數(shù)查找，逐步找到最外層，即window對象，并操作window對象的屬性。

<script>
var str = 'China';
function t1(){
  var str = 'Japan';
  function t2(){
    var str = 'USA';
    console.log(str);
  }
  t2();
}
t1();
</script>

這個例子比較典型，可以來說明JS變量的作用域切換問題，腳本首先在最外層定義了str屬性，當調(diào)用t1函數(shù)時，在t1函數(shù)中也定義了str變量和t2方法，當執(zhí)行t2方法時，此時又定義了str變量，所以此時打印USA。

當屏蔽t2函數(shù)中的定義操作，此時在t2函數(shù)作用域中沒有str變量，則從它的上一級作用域中查找，又因為t1函數(shù)中定義了str變量，此時打印Japan。

當屏蔽t1和t2函數(shù)中的定義操作，則一層一層地往外找，此時找到最外層，此時打印China。

當最外層也沒有定義該變量，在運行該JS過程中就找不到該變量，此時會出錯，在瀏覽器的控制臺可以找到錯誤。

更多關于JavaScript相關內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

js 將圖片連接轉(zhuǎn)換成base64格式的簡單實例
下面小編就為大家?guī)硪黄猨s 將圖片連接轉(zhuǎn)換成base64格式的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
JavaScript函數(shù)內(nèi)部屬性和函數(shù)方法實例詳解
函數(shù)是由事件驅(qū)動的或者當它被調(diào)用時執(zhí)行的可重復使用的代碼塊。通過本文給大家介紹JavaScript函數(shù)內(nèi)部屬性和函數(shù)方法，感興趣的朋友一起學習吧
2016-03-03
webpack5的loader配置小白學習篇
這篇文章主要為大家介紹了webpack5的loader配置非常適合webpack入門的小白學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
JS 使用 window對象的print方法實現(xiàn)分頁打印功能
這篇文章主要介紹了JS 使用 window對象的print方法實現(xiàn)分頁打印功能，這種方法兼容性比較好，在ie和火狐瀏覽器下都可以正常使用，感興趣的朋友跟隨腳本之家小編一起看看吧
2018-05-05
Cropper.js 實現(xiàn)裁剪圖片并上傳(PC端)
本案例是參考cropper站點實例，進行修改簡化。接下來通過本文給大家分享Cropper.js 實現(xiàn)裁剪圖片并上傳(PC端) 功能，需要的朋友參考下吧
2017-08-08
js實現(xiàn)百度登錄窗口拖拽效果
這篇文章主要為大家詳細介紹了js實現(xiàn)百度登錄窗口拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
深入了解JavaScript中的函數(shù)柯里化
JavaScript函數(shù)柯里化是一種將接受多個參數(shù)的函數(shù)轉(zhuǎn)換為一系列接受單個參數(shù)的函數(shù)的技術。本文將通過簡單的示例為大家詳細講講函數(shù)柯里化的相關應用，需要的可以參考一下
2023-04-04
JS處理VBArray的函數(shù)使用說明
JScript 8.0 VBArray 對象提供對 Visual Basic 安全數(shù)組的訪問。
2008-05-05
Echarts圖表移動端橫屏進入退出的實現(xiàn)
本文主要介紹了Echarts圖表移動端橫屏進入退出的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-05-05
js中substring和substr的定義和用法
這篇文章主要介紹了js中substring和substr的定義和用法,需要的朋友可以參考下
2014-05-05