iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
自我挑戰組

Vue.js 從零開始系列 第 8

Vue.js 從零開始:var,let,const 傻傻分不清楚

撰寫程式的時候,幾乎都是用let去撰寫,只知道他比var還要安全,不容易出錯,更詳細的原因,就沒辦法講解得很透徹,本篇來複習他們之間的差異性。


var

es6以前傳統宣告變數的方法,擁有以下特點:

  1. 允許重複宣告
var demo = '10';
var demo = '100';
console.log(demo);

let demo2 = '10';
let demo2 = '100';
console.log(demo2);
//Uncaught SyntaxError: Identifier 'demo' has already been declared 

多人開發時如果重復變數,新的就會蓋掉舊的變數,會造成很多問題,let則不允許同一個block重復宣告變數。

2.不支援區塊作用域 (Block Scope)

var y = '100';
function fn(){
  obj:{  
    var x = '10';
  }
  console.log(x);
};

fn();

範例中用var宣告,大括弧外一樣可以取用,因為var不支援區塊作用域,而是函式作用域。


let

es6 let的幾個特性:
1.同一層 Block 無法重複宣告變數

obj: {
  let x = 10;
  let x = 20;
  console.log(x);//Uncaught SyntaxError: Identifier 'x' has already been declared 
}

2.支援區塊作用域 (Block Scope)

var y = '100';
function fn(){
  obj: {  
    let x = '10';
    obj2: {
      console.log(x);// "10"
    }
  }
  console.log(x);// ReferenceError: x is not defined
};
fn();

最外層的console.log結果變成 ReferenceError: x is not defined,因為let的特性,此時的作用域只有在自己物件下有效,內層的onj2的console.log(x)結果則是"10"。


const

  1. 同一層 Block 無法重複宣告變數
  2. 支援區塊作用域 (Block Scope)
  3. 宣告時需要初始化
    由於常數性質不允許後續再作值的更動,因此宣告的同時就要初始化:
const a = 10;

沒有初始化會跳出錯誤:

const a = 10;

Uncaught SyntaxError: Missing initializer in const declaration
4.後續無法在更改值

const a = 10;
a = 100;//Uncaught TypeError: Assignment to constant variable. 

*補充說明

  • 全域作用域 Global Scope:
    不在函式或區塊宣告的變數,可以在任何地方取用,定義變數前沒有加上宣告方式,在函式內也會成為全域變數,會污染整個環境,造成開發困難。

  • 區域作用域 Local Scope:

  1. 函式作用域 (Function Scope)
function run(){
  var x = 10;
  console.log(x); //10
};
console.log(x) //x is not defined 

run();

在函式內宣告的變數,只能在自己的函式內使用。

  1. 區塊作用域 (Block Scope)
    區塊的意思就是大括弧 {},只有在這個大括弧內才可取用。

結論:

var

  • 允許重複宣告
  • 不支援區塊作用域 (Block Scope)

let

  • 同一層 Block 無法重複宣告變數
  • 支援區塊作用域 (Block Scope)

const

  • 同一層 Block 無法重複宣告變數
  • 支援區塊作用域 (Block Scope)
  • 宣告時需要初始化
  • 後續無法在更改值

Kuro重新認識JavaScript
你不可不知的JavaScript 二三事


上一篇
Vue.js 從零開始:物件參考 深拷貝 淺拷貝
下一篇
Vue.js 從零開始:Hoisting , undefined,not defined
系列文
Vue.js 從零開始30

尚未有邦友留言

立即登入留言