JS變量提升原理與用法實例淺析
本文實例講述了JS變量提升。分享給大家供大家參考，具體如下：
該篇介紹什么是變量提升,寫給像我一樣的JS新手看的
簡單來說變量提升就是 JS會把var變量的聲明自動提升到作用域的頂部,即使你不想這樣
一個例子: (局部變量與全局變量同名時 , 局部變量覆蓋全局變量)
var a="全局變量";
function test()
{
document.writeln(a);
var a="局部變量";
document.writeln(a);
}
test();
上例的兩個輸出結(jié)果是
undefined局部變量
第一個輸出并沒有輸出全局變量a而是undefined ,這就是變量提升導(dǎo)致的
上例等同與下例:
var a="全局變量";
function test()
{
var a;
document.writeln(a);
a="局部變量";
document.writeln(a);
}
test();
test函數(shù)內(nèi)即使局部變量a還沒定義,就已經(jīng)覆蓋了全局變量,可見其聲明已經(jīng)生效了,
即變量聲明會自動提升到作用域的頂部, 即使該語句并沒執(zhí)行
如下例:
var x=100;
var y=200;
function test()
{
document.writeln(x);
document.writeln(y);
if(false)
{
var x=1;
}
return;
var y=2;
}
test();
輸出結(jié)果:
undefinedundefined
等同如下形式:
var x=100;
var y=200;
function test()
{
var x,y;
document.writeln(x);
document.writeln(y);
if(false)
{
x=1;
}
return;
y=2;
}
test();
那么怎么解決這個問題呢?
用let變量!let變量執(zhí)行到定義部分才會裝載,具體用法請自行查詢!
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript之class繼承_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了JavaScript之class繼承，新的關(guān)鍵字class從ES6開始正式被引入到JavaScript中。class的目的就是讓定義類更簡單，有興趣的可以了解一下2017-07-07
javascript iframe編程相關(guān)代碼，對于熟練操作iframe的朋友有很大的幫助。2009-12-12
下面的5點說明確實不錯，提高性能與可讀性，大家可以根據(jù)需要選擇使用。2010-07-07
看起來好像很復(fù)雜的貪吃蛇，到底是怎么用JavaScript去實現(xiàn)的？下面就來一步一步地，剖析怎么用JavaScript，放在任意一個瀏覽器中，把貪吃蛇搞起來2021-11-11
一篇文章掌握RequireJS常用知識，通過本文，你可以對模塊化開發(fā)和AMD規(guī)范有一個較直觀的認(rèn)識，并詳細(xì)地學(xué)習(xí)RequireJS這個模塊化開發(fā)工具的常見用法，感興趣的小伙伴們可以參考一下2016-01-01
javascript基于prototype實現(xiàn)類似OOP繼承的方法
這篇文章主要介紹了javascript基于prototype實現(xiàn)類似OOP繼承的方法,實例分析了JavaScript使用prototype實現(xiàn)面向?qū)ο蟪绦蛟O(shè)計的中類繼承的相關(guān)技巧,需要的朋友可以參考下2015-12-12
這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)各種運動之勻速運動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細(xì)介紹了Python實現(xiàn)學(xué)生成績管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了自制微信公眾號一鍵排版工具的相關(guān)資料,需要的朋友可以參考下2016-09-09
BOM系列第一篇之定時器setTimeout和setInterval
這篇文章主要介紹了BOM系列第一篇之定時器setTimeout和setInterval 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08