【譯】在 ES6中 改良的5個 JavaScript “缺陷”

原文：http://www.zcfy.cc/article/315

http://www.75team.com/post/5-javascript-%E2%80%9Cbad%E2%80%9D-parts-that-are-fixed-in-es6.html?utm_source=tuicool&utm_medium=referral

ECMAScript 6 (ES6) 新特性可以分為新增語法（例如：class），增強 JavaScript 功能（例如：import），以及改良 JS “缺陷” （例如：let關鍵字）。大部分博客將這三類新特性混在一起介紹，往往讓 ES6 新手暈菜。因此我決定寫下這篇文章僅僅介紹改良 JS “缺陷”的這部分特性。

我希望通過這篇文章介紹，能讓你明白只要使用一小部分 ES6 新特新，例如 let、箭頭函數等，你就能獲得巨大的回報。

好，讓我們開始吧。

1. 塊級作用域

ES5 只有函數作用域（例如，我們必須將代碼包在函數內來限制作用域），這導致很多問題。ES6 提供?let?和?const?來代替?var?聲明變量，新的聲明方式支持用大括號表示的塊級作用域。

防止變量在作用域外被訪問

下圖展示了 if 語句內聲明的“bonus”變量在使用 let 的時候被限制在 if 的作用域內，這樣不會影響到作用域外面的同名變量，這也是與大部分其他編程語言一致的行為。

點擊圖片查看大圖

防止重復聲明變量

ES6 不允許在同一個作用域內 用let?或?const?重復聲明同名變量。這對于防止在不同的 js 庫中存在重復聲明的函數表達式十分有幫助。

例如下圖的?add?函數：

點擊圖片查看大圖

不再需要立即執行的函數表達式(IIFE)

在 ES5 中，像下圖中的例子，我們需要構造一個立即執行的函數表達式去保證我們不污染全局作用域。在 ES6， 我們可以使用更簡單的大括號（{}），然后使用?const?或者?let?代替?var?來達到同樣的效果。

點擊圖片查看大圖

bable - 一個轉換 ES6 代碼為 ES5 代碼的工具

我們的 ES6 代碼最終要運行在瀏覽器里。Babel?是最流行的將 ES6 轉為 ES5 的工具。它擁有許多接口，例如 CLI、node 模塊以及一個在線的轉換器。我在我的應用中使用 node 模塊編譯代碼，使用它的在線版?來快速查看 ES6 代碼對應的 ES5 版本的區別。

下圖演示了 Babel 如何通過重命名變量來模擬 “let” 和 “const”

點擊圖片查看大圖

循環體中的閉包不再有問題

在 ES5 中，如果循環體內有產生一個閉包，訪問閉包外的變量，會產生問題。在 ES6，你可以使用 “let” 來避免問題。

點擊圖片查看大圖

注意: 在這里你不能用?const?，因為 i 在變， 不過你可以在新的 for...of 循環中使用?const。

2. 詞法作用域的 “this” (通過箭頭函數)

在 ES5 中，“this” 會隨著函數調用位置和調用方式改變，這種變化無常給很多開發者帶來過痛苦的經歷。 ES6 通過箭頭函數帶來的詞法作用域的 “this” 消除了這個問題。

詞法作用域的 “this” 特性讓變量的 “this” 總是指向詞法聲明時的那個對象。

“this” 問題和 ES5 中的兩個解決方法:

在下圖中，我們希望打印一個用戶的名字和薪水。假設我們從服務器異步獲取薪水數據。注意到當服務器返回結果時，函數里的 “this” 是 “window” 而不是 “person”。

點擊圖片查看大圖

ES5?中的 “this” 問題和兩種解決方式

在 ES6 中的解決方法：

在 ES6 中簡單使用箭頭函數就可以自動獲得詞法作用域的 “this”

點擊圖片查看大圖

第16行代碼演示了如何使用箭頭函數

The below picture shows how Babel converts fat-arrow function into regular ES5 function w/ workaround so that it works in current browsers.

下圖演示了 Babel 如何將箭頭函數轉為普通的 ES5 函數：

點擊圖片查看大圖

3. 處理 “arguments”

在 ES5 中，“arguments” 表現得像一個數組（例如：我們可以通過length來遍歷它），但是它不是一個真正的數組。所以，一切數組方法，比如 sort、slice 等等都用不了，

在 ES6 中，我們可以使用一個新的特性叫做 rest 參數。它的形式為...參數名（比如：...args）。rest 參數是一個真正的數組，所以我們可以對它使用所有數組上可用的方法。

下圖演示 rest 參數的用法：

點擊圖片查看大圖

4. 類

從概念上講，在 ES6 之前的 JS 中并沒有和其他面向對象語言那樣的“類”的概念。長時間里，人們把使用 new 關鍵字調用的函數（也叫構造器）當做“類”來使用。

由于 JS 不支持原生的類，而只是通過原型來模擬，各種模擬類的方式相對于傳統的面向對象方式來說非常混亂，尤其是處理當子類繼承父類、子類要調用父類的方法等等需求時。

ES6 帶來了新的語法，與其他各種編程語言類似的語法，使得面向對象變得非常簡單。

下圖對比在 ES5 和 ES6 中實現類：

點擊圖片查看大圖

ES5 Vs ES6 (es6-features.org)

更新：在閱讀了本文之后一定要讀：《Is “Class” In ES6 The New “Bad” Part?》

5. 嚴格模式

嚴格模式(use strict) 有助于防止問題用法，并且它也有助于安全使用 JavaScript。在 ES5 中, 嚴格模式是可選項，但是在 ES6 中，許多特性要求必須使用嚴格模式。 因此大多數開發者和 babel 之類的工具默認添加?use strict?到 JS 文件的頭部，以確保整個 JS 文件的代碼都采用嚴格模式，這個習慣有助于我們寫更好的 JavaScript。

英文原文：https://medium.com/@rajaraodv/5-javascript-bad-parts-that-are-fixed-in-es6-c7c45d44fd81#.et5iocmgc

本文鏈接：http://www.75team.com/post/5-javascript-“bad”-parts-that-are-fixed-in-es6.html?utm_source=tuicool&utm_medium=referral

--?EOF?--

發表于?2016-05-23 16:13:19?，最后修改于?2016-05-23 16:12:00

總結

以上是生活随笔為你收集整理的在 ES6中 改良的5个 JavaScript “缺陷”的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。