es6 if包裹的變量算不算塊內

這篇文章主要講解了“es6 if包裹的變量算不算塊內”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“es6 if包裹的變量算不算塊內”吧！

es6 if包裹的變量算塊內。es6中新增了塊級作用域，被“{ }”包裹住的代碼就是塊級作用域；函數中的“{}”、if語句、for循環內的代碼都屬于塊級作用域，是算在塊內的。在es6中，允許塊級作用域任意嵌套，外層作用域無法讀取內層作用域的變量；內層作用域可以定義外層作用域的同名變量。

什么是塊級作用域

ES6 中新增了塊級作用域。塊作用域由 { } 包裹，if 語句和 for 語句里面的 { } 也屬于塊作用域。

函數中的{}，if語句，for循環，也是屬于塊級作用域，let與const定義的變量只能在作用域有效。

為什么需要塊級作用域

第一種場景：內部變量會覆蓋外部變量

var time = new Date()
function fx () {
    console.log(time) // undefined
    if (false) {
        var time = 'hello'
    }
}
fx()

{
    var a = 1
    console.log(a) // 1
}
console.log(a) // 1
// 通過var定義的變量可以跨塊作用域訪問到。

第二種場景：用來計數的循環變量泄漏為全局變量

for 循環中的用 var 定義的變量在外部作用域可以訪問

for (var i = 0; i < 3; i++) {

}

for (let j = 0; j < 3; j++) {

}
// 3
console.log(i);
// Uncaught ReferenceError: j is not defined
console.log(j);

if 語句中 var 定義的變量在外部作用域可以訪問


if(true) 與 if (false) 的區別

• if(true) 中的賦值語句會被執行，所以 a 打印出來是 3

• if(false) 中的賦值語句不會被執行，但聲明的變量 var b 會由于變量提升，提升到作用域的頂層，所以打印出來是 undefined

if (true) {
	var a = 3
}

if (false) {
	var b = 3
}
// 3
console.log(a);
// undefined
console.log(b);

if (true) {
	let c = 3
}
// Uncaught ReferenceError: c is not defined
console.log(c);

塊級作用域（ES6 提供 let & const 變量實現塊級作用域）

function fxFn () { // 這是一個塊級作用域
    let fx = 'fx is a great girl'
    if (true) { // 這是一個塊級作用域
        let fx = 'fx is 18 years old'
    }
    console.log(fx) // fx is a great girl
}
fxFn()
 
// 塊級作用域之間相互不影響

ES6 允許塊級作用域的任意嵌套。


{{{{
  {
    let fnn = 'Hello'
  }
  console.log(fnn); // 報錯
}}}};

• 內層作用域可以定義外層作用域的同名變量。

{{{{
  let fnn = 'Hello';
  {
    let fnn = 'Hello'
  }
}}}};

塊級作用域的出現，實際上使得獲得廣泛應用的匿名立即執行函數表達式（匿名 IIFE）不再必要了。

// IIFE 寫法
(function () {
  var tmp = '...';
  // ...
}());
 
// 塊級作用域寫法
{
  let tmp = '...';
  // ...
}

塊級作用域與函數聲明

ES5 規定，函數只能在頂層作用域和函數作用域之中聲明，不能在塊級作用域聲明。

// 情況一
if (true) {
  function f() {}
}
 
// 情況二
try {
  function f() {}
} catch(e) {
  // ...
}

上面兩種函數聲明，根據 ES5 的規定都是非法的。


但是，瀏覽器沒有遵守這個規定，為了兼容以前的舊代碼，還是支持在塊級作用域之中聲明函數，因此上面兩種情況實際都能運行，不會報錯。

ES6 引入了塊級作用域，明確允許在塊級作用域之中聲明函數。ES6 規定，塊級作用域之中，函數聲明語句的行為類似于 let，在塊級作用域之外不可引用。

function f() { console.log('I am outside!'); }
 
(function () {
  if (false) {
    // 重復聲明一次函數f
    function f() { console.log('I am inside!'); }
  }
 
  f();
}());

上面代碼在 ES5 中運行，會得到“I am inside!”，因為在 if 內聲明的函數 f 會被提升到函數頭部，實際運行的代碼如下。


// ES5 環境
function f() { console.log('I am outside!'); }
 
(function () {
  function f() { console.log('I am inside!'); }
  if (false) {
  }
  f();
}());

但是，如果你真的在 ES6 瀏覽器中運行一下上面的代碼，是會報錯的，這是為什么呢？

// 瀏覽器的 ES6 環境
function f() { console.log('I am outside!'); }
 
(function () {
  if (false) {
    // 重復聲明一次函數f
    function f() { console.log('I am inside!'); }
  }
 
  f();
}());
// Uncaught TypeError: f is not a function

上面的代碼在 ES6 瀏覽器中，都會報錯。


原來，如果改變了塊級作用域內聲明的函數的處理規則，顯然會對老代碼產生很大影響。為了減輕因此產生的不兼容問題，ES6 規定，瀏覽器的實現可以不遵守上面的規定，有自己的行為方式

• 允許在塊級作用域內聲明函數。

• 函數聲明類似于 var，即會提升到全局作用域或函數作用域的頭部。

• 同時，函數聲明還會提升到所在的塊級作用域的頭部。

注意，上面三條規則只對 ES6 的瀏覽器實現有效，其他環境的實現不用遵守，還是將塊級作用域的函數聲明當作 let 處理。

根據這三條規則，瀏覽器的 ES6 環境中，塊級作用域內聲明的函數，行為類似于 var 聲明的變量。上面的例子實際運行的代碼如下。

// 瀏覽器的 ES6 環境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }
 
  f();
}());
// Uncaught TypeError: f is not a function

考慮到環境導致的行為差異太大，應該避免在塊級作用域內聲明函數。如果確實需要，也應該寫成函數表達式，而不是函數聲明語句。


// 塊級作用域內部的函數聲明語句，建議不要使用
{
  let a = 'secret';
  function f() {
    return a;
  }
}
 
// 塊級作用域內部，優先使用函數表達式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

ES6 的塊級作用域必須有大括號

如果沒有大括號，JavaScript 引擎就認為不存在塊級作用域。

// 第一種寫法，報錯
if (true) let x = 1;
 
// 第二種寫法，不報錯
if (true) {
  let x = 1;
}

上面代碼中，第一種寫法沒有大括號，所以不存在塊級作用域，而let只能出現在當前作用域的頂層，所以報錯。第二種寫法有大括號，所以塊級作用域成立。


函數聲明也是如此，嚴格模式下，函數只能聲明在當前作用域的頂層。

// 不報錯
'use strict';
if (true) {
  function f() {}
}
 
// 報錯
'use strict';
if (true)
  function f() {}

感謝各位的閱讀，以上就是“es6 if包裹的變量算不算塊內”的內容了，經過本文的學習后，相信大家對es6 if包裹的變量算不算塊內這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！