這篇文章主要講解了“es6 if包裹的變量算不算塊內(nèi)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“es6 if包裹的變量算不算塊內(nèi)”吧！

成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)的關(guān)注點(diǎn)不是能為您做些什么網(wǎng)站，而是怎么做網(wǎng)站，有沒(méi)有做好網(wǎng)站，給創(chuàng)新互聯(lián)建站一個(gè)展示的機(jī)會(huì)來(lái)證明自己，這并不會(huì)花費(fèi)您太多時(shí)間，或許會(huì)給您帶來(lái)新的靈感和驚喜。面向用戶(hù)友好，注重用戶(hù)體驗(yàn)，一切以用戶(hù)為中心。

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

什么是塊級(jí)作用域

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

函數(shù)中的{}，if語(yǔ)句，for循環(huán)，也是屬于塊級(jí)作用域，let與const定義的變量只能在作用域有效。

為什么需要塊級(jí)作用域

第一種場(chǎng)景：內(nèi)部變量會(huì)覆蓋外部變量

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
// 通過(guò)var定義的變量可以跨塊作用域訪(fǎng)問(wèn)到。

第二種場(chǎng)景：用來(lái)計(jì)數(shù)的循環(huán)變量泄漏為全局變量

for 循環(huán)中的用 var 定義的變量在外部作用域可以訪(fǎng)問(wèn)

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 語(yǔ)句中var 定義的變量在外部作用域可以訪(fǎng)問(wèn)

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

• if(true) 中的賦值語(yǔ)句會(huì)被執(zhí)行，所以 a 打印出來(lái)是 3

• if(false) 中的賦值語(yǔ)句不會(huì)被執(zhí)行，但聲明的變量 var b 會(huì)由于變量提升，提升到作用域的頂層，所以打印出來(lái)是 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);

塊級(jí)作用域（ES6 提供 let & const 變量實(shí)現(xiàn)塊級(jí)作用域）

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

ES6 允許塊級(jí)作用域的任意嵌套。

{{{{
  {
    let fnn = 'Hello'
  }
  console.log(fnn); // 報(bào)錯(cuò)
}}}};

• 內(nèi)層作用域可以定義外層作用域的同名變量。

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

塊級(jí)作用域的出現(xiàn)，實(shí)際上使得獲得廣泛應(yīng)用的匿名立即執(zhí)行函數(shù)表達(dá)式（匿名 IIFE）不再必要了。

// IIFE 寫(xiě)法
(function () {
  var tmp = '...';
  // ...
}());
 
// 塊級(jí)作用域?qū)懛?
{
  let tmp = '...';
  // ...
}

塊級(jí)作用域與函數(shù)聲明

ES5 規(guī)定，函數(shù)只能在頂層作用域和函數(shù)作用域之中聲明，不能在塊級(jí)作用域聲明。

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

上面兩種函數(shù)聲明，根據(jù)ES5 的規(guī)定都是非法的。

但是，瀏覽器沒(méi)有遵守這個(gè)規(guī)定，為了兼容以前的舊代碼，還是支持在塊級(jí)作用域之中聲明函數(shù)，因此上面兩種情況實(shí)際都能運(yùn)行，不會(huì)報(bào)錯(cuò)。

ES6 引入了塊級(jí)作用域，明確允許在塊級(jí)作用域之中聲明函數(shù)。ES6 規(guī)定，塊級(jí)作用域之中，函數(shù)聲明語(yǔ)句的行為類(lèi)似于 let，在塊級(jí)作用域之外不可引用。

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

上面代碼在ES5 中運(yùn)行，會(huì)得到“I am inside!”，因?yàn)樵?code>if 內(nèi)聲明的函數(shù)f 會(huì)被提升到函數(shù)頭部，實(shí)際運(yùn)行的代碼如下。

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

但是，如果你真的在 ES6 瀏覽器中運(yùn)行一下上面的代碼，是會(huì)報(bào)錯(cuò)的，這是為什么呢？

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

上面的代碼在ES6 瀏覽器中，都會(huì)報(bào)錯(cuò)。

原來(lái)，如果改變了塊級(jí)作用域內(nèi)聲明的函數(shù)的處理規(guī)則，顯然會(huì)對(duì)老代碼產(chǎn)生很大影響。為了減輕因此產(chǎn)生的不兼容問(wèn)題，ES6 規(guī)定，瀏覽器的實(shí)現(xiàn)可以不遵守上面的規(guī)定，有自己的行為方式

• 允許在塊級(jí)作用域內(nèi)聲明函數(shù)。

• 函數(shù)聲明類(lèi)似于 var，即會(huì)提升到全局作用域或函數(shù)作用域的頭部。

• 同時(shí)，函數(shù)聲明還會(huì)提升到所在的塊級(jí)作用域的頭部。

注意，上面三條規(guī)則只對(duì) ES6 的瀏覽器實(shí)現(xiàn)有效，其他環(huán)境的實(shí)現(xiàn)不用遵守，還是將塊級(jí)作用域的函數(shù)聲明當(dāng)作 let 處理。

根據(jù)這三條規(guī)則，瀏覽器的 ES6 環(huán)境中，塊級(jí)作用域內(nèi)聲明的函數(shù)，行為類(lèi)似于 var 聲明的變量。上面的例子實(shí)際運(yùn)行的代碼如下。

// 瀏覽器的 ES6 環(huán)境
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

考慮到環(huán)境導(dǎo)致的行為差異太大，應(yīng)該避免在塊級(jí)作用域內(nèi)聲明函數(shù)。如果確實(shí)需要，也應(yīng)該寫(xiě)成函數(shù)表達(dá)式，而不是函數(shù)聲明語(yǔ)句。

// 塊級(jí)作用域內(nèi)部的函數(shù)聲明語(yǔ)句，建議不要使用
{
  let a = 'secret';
  function f() {
    return a;
  }
}
 
// 塊級(jí)作用域內(nèi)部，優(yōu)先使用函數(shù)表達(dá)式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

ES6 的塊級(jí)作用域必須有大括號(hào)

如果沒(méi)有大括號(hào)，JavaScript 引擎就認(rèn)為不存在塊級(jí)作用域。

// 第一種寫(xiě)法，報(bào)錯(cuò)
if (true) let x = 1;
 
// 第二種寫(xiě)法，不報(bào)錯(cuò)
if (true) {
  let x = 1;
}

上面代碼中，第一種寫(xiě)法沒(méi)有大括號(hào)，所以不存在塊級(jí)作用域，而let只能出現(xiàn)在當(dāng)前作用域的頂層，所以報(bào)錯(cuò)。第二種寫(xiě)法有大括號(hào)，所以塊級(jí)作用域成立。

函數(shù)聲明也是如此，嚴(yán)格模式下，函數(shù)只能聲明在當(dāng)前作用域的頂層。

// 不報(bào)錯(cuò)
'use strict';
if (true) {
  function f() {}
}
 
// 報(bào)錯(cuò)
'use strict';
if (true)
  function f() {}

感謝各位的閱讀，以上就是“es6 if包裹的變量算不算塊內(nèi)”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)es6 if包裹的變量算不算塊內(nèi)這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！