簡單介紹JavaScript變數範圍

Tommy Lin
林儀泰
FB/Email：tooto1985@gmail.com

 限制被宣告的變數有效存取範圍
◦ 函式內可以存取函式外的變數

存取函式外層變數
var a=100;
function run() {
var b=100;
console.log(a);
}
run();

存取函式外層變數
var a=100;
function run() {
var b=100;
console.log(a); //100
}
run();

◦ 函式外不可存取函式內的變數

存取函式內層變數
var a=100;
function run() {
var b=100;
}
run();
console.log(b);

存取函式內層變數
var a=100;
function run() {
var b=100;
}
run();
console.log(b); //undefined

 以函式來界定存取範圍(ES5)

函式界定範圍
var a=0;
function run() {
if(true) {
var a=1;
}
console.log(a);
}
run();
console.log(a);

函式界定範圍
var a=0;
function run() {
if(true) {
var a=1;
}
console.log(a);
}
run();
console.log(a); //0

函式界定範圍
var a=0;
function run() {
if(true) {
var a=1;
}
console.log(a); //1
}
run();
console.log(a); //0

◦ ES6支援以區塊界定範圍的宣告let

區塊界定範圍(ES6)
function run() {
var a = 0;
if(true) {
let a=1;
console.log(a);
}
console.log(a);
}
run();

function run() {
var a = 0;
if(true) {
let a=1;
console.log(a); //1
}
console.log(a);
}
run();

function run() {
var a = 0;
if(true) {
let a=1;
console.log(a); //1
}
console.log(a); //0
}
run();

◦ ES6支援以區塊界定範圍的宣告let
 必須是套崁函式並非引用函式

套崁函式
var a = 100;
function run() {
var b = 200;
function todo() {
console.log(b);
}
todo();
console.log(a);
}
run();

套崁函式
var a = 100;
function run() {
var b = 200;
function todo() {
console.log(b); //200
}
todo();
console.log(a);
}
run();

套崁函式
var a = 100;
function run() {
var b = 200;
function todo() {
console.log(b); //200
}
todo();
}
run();

引用函式
var a = 100;
function todo() {
console.log(b);
}
function run() {
var b = 200;
todo();
console.log(a);
}
run();

引用函式
var a = 100;
function todo() {
console.log(b);
}
function run() {
var b = 200;
todo();
}
run();

引用函式
var a = 100;
function todo() {
console.log(b); //undefined
}
function run() {
var b = 200;
todo();
}
run();

 內層可以存取外層
 外層不可以存取內層
 函式界定存取範圍
 區塊界定存取範圍需使用let宣告(ES6)
 必須是套崁函式才可存取

 https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/var
 https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/let

簡單介紹JavaScript變數範圍

More Related Content

Featured (20)

簡單介紹JavaScript變數範圍