本文介紹了深入理解ES6中l(wèi)et和閉包，分享給大家，具體如下：

潁上網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)成立與2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

在開始本文之前我們先來看一段代碼

for(var i=0;i<10;i++){
  arr[i]=function(){
    return i;
  }
}
console.log(arr[3]());//10

顯然這段代碼輸出10，并沒有向我們期望的返回3，原因也很簡(jiǎn)單（js的變量提升）函數(shù)在調(diào)用時(shí)候訪問的是一個(gè)全局作用域的i，此時(shí)for循環(huán)已經(jīng)執(zhí)行完畢，全局變量i=10；

在ES5標(biāo)準(zhǔn)中，我們要想返回期望的3，通常的做法也很簡(jiǎn)單,就是讓數(shù)組中的每個(gè)函數(shù)有單獨(dú)的作用域，那么我們只要構(gòu)造一個(gè)立即執(zhí)行函數(shù)即可（js中沒有塊級(jí)作用域，只區(qū)分函數(shù)作用域和全局作用域）就像下面這樣：

var array=[];
for(var i=0;i<10;i++){
  array[i]=(function(i){
  return function(){
    return i;
    }
  })(i);
}
console.log(array[3]());//3

這樣一來數(shù)組的每個(gè)函數(shù)就處于一個(gè)立即執(zhí)行函數(shù)的函數(shù)作用域中，該立即執(zhí)行函數(shù)傳入i,其實(shí)for循環(huán)執(zhí)行了如下代碼：

  array[0]=(function(i){
  return function(){
    return i;
    }
  })(0);
  array[1]=(function(i){
  return function(){
    return i;
    }
  })(1);
  array[2]=(function(i){
  return function(){
    return i;
    }
  })(2);
……

這樣一來，數(shù)字組中每個(gè)函數(shù)對(duì)應(yīng)一個(gè)單獨(dú)的函數(shù)作用域（立即執(zhí)行函數(shù)的）這里共創(chuàng)建了10個(gè)函數(shù)作用域，這些函數(shù)作用域里的i值就是執(zhí)行時(shí)候傳入的0……9，當(dāng)執(zhí)行

array[3]();時(shí)候函數(shù)訪問的i值是其對(duì)應(yīng)的立即執(zhí)行函數(shù)作用域里的 i，而不是全局的i值，這樣我們就得到了預(yù)期的效果。

說得到這里我們簡(jiǎn)單來說一下閉包，閉包可以理解為一個(gè)閉包就是一個(gè)沒有釋放資源的棧區(qū)，棧區(qū)內(nèi)的變量處于激活狀態(tài)。上面的例子中for循環(huán)在執(zhí)行時(shí)系統(tǒng)分配內(nèi)存，js執(zhí)行線程創(chuàng)建執(zhí)行棧區(qū)，執(zhí)行時(shí)候檢測(cè)到立即執(zhí)行函數(shù)里的變量i被內(nèi)部函數(shù)引用，所以該棧區(qū)在內(nèi)存中沒有被釋放，函數(shù)（數(shù)組元素）被調(diào)用時(shí)候根據(jù)作用鏈?zhǔn)紫仍L問到的是上一級(jí)作用域（立即執(zhí)行函數(shù)）的變量。

這里不再詳細(xì)介紹閉包，如果想詳細(xì)了解閉包請(qǐng)閱讀《javascript高級(jí)程序設(shè)計(jì)》第7章

前面提到j(luò)s中并沒有塊級(jí)作用域，只區(qū)分全局作用域和函數(shù)作用域，在ES6中l(wèi)et實(shí)際是為js新增了塊級(jí)作用域，例如下面代碼不用創(chuàng)造函數(shù)作用域就可以讓每個(gè)數(shù)組里的函數(shù)訪問各自作用域里的值：

let arr=[];
for(let i=0;i<10;i++){
  arr[i]=function(){
    return i;
  }
}
console.log(arr[3]());//3

可以看到我們并沒有像之前那樣構(gòu)造一個(gè)函數(shù)作用域就能實(shí)現(xiàn)我們期望的效果，引入塊級(jí)作用域之后更方便我們書寫和理解代碼，上述代碼中for循環(huán)之后的{}是塊級(jí)作用域，每次循環(huán)時(shí)候每個(gè)返回的函數(shù)引用的是其對(duì)應(yīng)塊作用域的變量，稍微改一下代碼看著形象些：

let arr=[];
for(let i=0;i<10;i++){
  let k=i;
  arr[k]=function(){
    return k;
  }
}
console.log(arr[3]());//3

可見ES6引入塊作用域之后我們構(gòu)造閉包函數(shù)更方便了。

這里不多敘述let和const的相關(guān)內(nèi)容，如果之前沒接觸ES6的小伙伴建議閱讀阮一峰老師的《ES6標(biāo)準(zhǔn)入門》。

在這里再提一點(diǎn)，很多人看完概念之后，第一印象都是：“const 是表示不可變的值，而 let 則是用來替換原來的 var 的?！焙芏鄷r(shí)候把let當(dāng)做是var的替代品，凡是聲明變量就用let，你很可能寫出下面代碼：

 // 定義常量
const REG_GET_INPUT = /^\d{1,3}$/;

// 定義配置項(xiàng)
let config = {
 isDev : false,
 pubDir: './admin/'
}

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');

const 的定義是不可重新賦值的值，與不可變的值(immutable value)不同；const 定義的 Object，在定義之后仍可以修改其屬性。

所以其實(shí)他的使用場(chǎng)景很廣，包括常量、配置項(xiàng)以及引用的組件、定義的 “大部分” 中間變量等，都應(yīng)該以cosnt做定義。反之就 let 而言，他的使用場(chǎng)景應(yīng)該是相對(duì)較少的，我們只會(huì)在 loop(for，while 循環(huán))及少量必須重定義的變量上用到他。

猜想：就執(zhí)行效率而言，const 由于不可以重新賦值的特性，所以可以做更多語法靜態(tài)分析方面的優(yōu)化，從而有更高的執(zhí)行效率。

所以上面代碼中，所有使用 let 的部分，其實(shí)都應(yīng)該是用 const 的。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前文章：深入理解ES6中l(wèi)et和閉包
文章地址：http://aaarwkj.com/article24/ggpgce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、域名注冊(cè)、動(dòng)態(tài)網(wǎng)站、用戶體驗(yàn)、網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)