在 ES6 之前，JavaScript 的對象體系并非基于「類」，而是基于「函數(shù)」與「原型鏈」泼舱，如下所示：

// 為了與普通函數(shù)做區(qū)分
// 在編程規(guī)約上姐赡，函數(shù)名稱首字母打斜
const Dog = function(name, sex, age) {
  // this 關(guān)鍵字表示生成的對象實例本身
  // 但必須要配合 new 關(guān)鍵字才能真正指向?qū)ο髮嵗?  this.name = name;
  this.sex = sex;
  this.age = age;
}

const dog1 = Dog();       // dog1 = undefined
const dog2 = new Dog();   // dog2 = { name: 'mimi', sex: 'male', age: 1 }

如上述代碼所示，Dog 函數(shù) 可以被視為普通函數(shù)進行調(diào)用即 const dog1 = Dog();柠掂，這時候 dog1 為 undefined项滑，因為 Dog 完全就是一個普通函數(shù)，在這個函數(shù)內(nèi)沒有 return 任何值涯贞，并且其中的 this 指向當(dāng)前的運行時上下文（全局對象） 枪狂。

如果 Dog 函數(shù) 想要成為一個能夠創(chuàng)建對象實例的「構(gòu)造函數(shù)」，則必須要配合 new 關(guān)鍵字即 const dog2 = new Dog();宋渔，其中new 關(guān)鍵字主要完成了如下工作：

• 創(chuàng)建一個空對象州疾，作為即將返回的對象實例
• 將這個空對象的原型指向「構(gòu)造函數(shù)」的 prototype 屬性
• 將這個空對象賦值給函數(shù)內(nèi)部的 this 關(guān)鍵字
• 執(zhí)行「構(gòu)造函數(shù)」內(nèi)的代碼，例如 this.name = name皇拣，將 value 賦值給當(dāng)前對象屬性
• 如果「構(gòu)造函數(shù)」內(nèi)寫了 return 語句且返回的是一個對象類型严蓖，則 new 將返回該對象。否則 new 將默認(rèn)返回 this 即當(dāng)前對象

上述步驟的第二步涉及到的 「指向構(gòu)造函數(shù)的 prototype 屬性」就是 JavaScript 實現(xiàn)對象體系的關(guān)鍵：

1. 構(gòu)造函數(shù)具有 prototype 屬性氧急，指向構(gòu)造函數(shù)對應(yīng)的原型（可理解為其他語言中的「類」）
2. 所有通過構(gòu)造函數(shù)創(chuàng)建的實例對象颗胡，會存在一個默認(rèn)屬性指向上述的原型（瀏覽器在具體實現(xiàn)時這個屬性通常命名為 proto）
3. 上述的原型本身又會有 __proto__ 屬性，指向原型的「原型」（上述 Dog 函數(shù)的原型的原型就是 頂層原型 Object）

這樣通過 __proto__ 就會形成一條「原型鏈」吩坝，通過「原型鏈」就可以找到對象實例對應(yīng)「類」以及「父類」和「父類的父類」^[8]...

^[8] 嚴(yán)格來講類和原型還是有所不同的毒姨。原型也被稱為「原型對象」，所以原型本質(zhì)上依然是一個對象钉寝。這里說「類」僅僅是為了理解方便弧呐。

由上可知，如果想要實現(xiàn)繼承嵌纲，需要將自己掛在父類的原型鏈之下：

// 第一步：繼承構(gòu)造函數(shù)
const Husky = function(name, sex, age, isStupid) {
  Dog.call(this, name, sex, age);
  this.isStupid = true;
}
// 第二步：子類的原型指向父類的原型
Husky.prototype = Object.create(Dog.prototype);
Husky.prototype.constructor = Husky;  // 修正原型 constructor 的指向

// 測試子類
const husky1 = new Husky('husky', 'male', 2);
// Dog 添加 sayHi 函數(shù)
Dog.prototype.sayHi = function() { console.log('wangwang'); }
console.log('husky1', husky1);
husky1.sayHi();  // 輸出 wangwang俘枫，Dog 原型擁有 sayHi() 方法
console.log('husky1 toString', husky1.toString());  // Object 原型擁有 toString() 方法

在訪問上述代碼中的 Husky 實例 husky1 的屬性和方法時，會首先查詢 husky1 本身的屬性和方法逮走，如果找不到則會查找其原型（Dog）鸠蚪，如果還未找到，則繼續(xù)查找原型的原型（Object）言沐，即按照原型鏈依次查找邓嘹。

除了上述例子外，ES6 之前的繼承還可以有其他寫法险胰，這里不再擴展。

3.2 ES6 的 class

3.2.1 基本語法

由上不難看出 ES6 之前的「面向?qū)ο蟆箤懛◤?fù)雜矿筝，不夠直觀降允。于是 ES6 引入了類 Class 的概念泪喊，使得 JavaScript 終于可以像其他語言那樣聲明類了：

class Dog {
  /**
    * 構(gòu)造函數(shù)夺英，相當(dāng)于之前的 function Dog()
    * 如果不顯式定義肩祥，則會默認(rèn)添加一個空的 constructor() {}
    **/
  constructor(name, sex, age) {
    this.name = name;
    this.sex = sex;
    this.age = age;
  }
  
  /** 自定義成員函數(shù) */
  sayHi() {
    console.log("wangwang");
  }
}

實際上 ES6 的 class 可以視作一種語法糖，只是在語法層面提供了將「構(gòu)造函數(shù)」和「自定義原型屬性」寫到一起的封裝寫法寇荧。底層的對象體系依然是基于函數(shù)和原型鏈。如上例代碼中將 sayHi() 定義在 class 塊內(nèi)，相當(dāng)于執(zhí)行了 Dog.prototype.sayHi = function() { console.log('wangwang'); } 怯伊。class 的引入也使得對象的使用更為嚴(yán)謹(jǐn)，傳統(tǒng)定義的 Dog 函數(shù)判沟，可以不加 new 從而被視為普通函數(shù)耿芹，而 class 定義的 Dog 必須通過 new 進行調(diào)用。同時注意 class 關(guān)鍵字和 let挪哄、const 等一樣吧秕，約束了變量提升。

class 和 function 一樣有表達式的寫法：

// DogInner 對外不可見
const Dog = class DogInner { /* ... */ };
const Dog = class { /* ... */ };

// 甚至還可以有立即執(zhí)行的 class
const dog1 = new class {
  constructor(name) {
    this.name = name;
  }
}('旺財');

3.2.2 靜態(tài)方法

類是對象的模板迹炼，而對象是類的實例砸彬。由類生成對象時，對象應(yīng)當(dāng)具有類中定義的方法和屬性斯入。但實際上砂碉，并不是類中的所有方法、屬性都應(yīng)該賦予對象刻两。

例如現(xiàn)有一個類 Person绽淘，而 小紅和小黃是 Person 的兩個實例化對象沪铭。Person 類中有屬性 planet = earth杀怠，那么包括小紅和 小黃在內(nèi)的任何 Person 實例都應(yīng)該擁有同樣的屬性值 planet = earth赔退。

每個實例都擁有的共同屬性比起被每個實例繼承，不如將其視為 Person 這個類本身的屬性证舟，即不是 小紅.planet 或 小黃.planet 而是 Person.planet 硕旗。這樣的屬性稱之為靜態(tài)屬性，類似的方法稱為靜態(tài)方法女责。但遺憾的是 ES6 還未支持靜態(tài)屬性漆枚，但實現(xiàn)了靜態(tài)方法。靜態(tài)方法使用 static 關(guān)鍵字修飾：

class Dog {
  // ....

  static showPlanet() {
    console.log("汪星球");
  }
}

// 類名.方法名 的形式進行調(diào)用
Dog.showPlanet();

3.2.3 class 繼承

在上文的 3.1 節(jié)中介紹了 ES6 之前需要手動修改原型鏈才能實現(xiàn)繼承抵知，ES6 引入 extends 來使得繼承更為清晰：

class Husky extends Dog {
  // 如果沒有顯式定義 constructor
  // 則會自動添加一個默認(rèn)構(gòu)造函數(shù)：
  // constructor(...args) {
  //   super(...args);
  // }
  constructor(name, sex, age, isStupid) {
    super(name, sex, age); // 調(diào)用父類的 constructor(name, sex, age);
    this.isStupid = isStupid;
  }
}

關(guān)于 super

• 作為函數(shù)：即 super(...)墙基，super 函數(shù)代表父類的構(gòu)造函數(shù)软族，只能用在子類構(gòu)造函數(shù)中。例如：

class Husky extends Dog {
  constructor(name, sex, age, isStupid) {
    super(name, sex, age); // 相當(dāng)于調(diào)用 Dog.prototype.constructor.call(this, name, sex, age);
    this.isStupid = isStupid;
  }

  sayHi() {
    super();  // 錯誤残制，不可在普通方法內(nèi)調(diào)用 super();
  }
}

• 作為對象：即 super.xxx初茶，super 對象在普通方法中指向父類的原型對象如 Dog.prototype，在靜態(tài)方法中温峭，指向父類堕伪。例如：

class Husky extends Dog {
  constructor(name, sex, age, isStupid) {
    super(name, sex, age);
    this.isStupid = isStupid;
  }

  sayHi() {
    // 相當(dāng)于 Dog.prototype.sayHi.call(this)。在普通方法內(nèi)禁炒，super 表示父類的原型對象悠瞬。
    super.sayHi(); 
  }

  static showPlanet() {
    // super 表示父類望迎，此處調(diào)用了父類的靜態(tài)方法
    // 注意類的靜態(tài)方法掛在「類」下趴乡，即 Dog.xxx
    // 類的普通方法和構(gòu)造函數(shù)掛在「類的原型對象」下蒿涎，即 Dog.prototype.xxx
    super.showPlanet(); 
  }
}

#04 模塊 Module

Brendan Eich 可能一開始只是抱著開發(fā)玩具語言的心態(tài)創(chuàng)造了 JavaScript胖齐，所以他基本想象不到 JavaScript 后續(xù)會成為前端領(lǐng)域的標(biāo)準(zhǔn)語言，他更沒法預(yù)料到箫锤，隨著 JavaScript 的發(fā)展和推廣氛堕，這門語言開始被用來編寫越來越復(fù)雜和龐大的系統(tǒng)。如果他一開始能夠意識到這一點帮寻，我相信他一定會在最開始就提供模塊的能力蝉稳，因為復(fù)雜系統(tǒng)的開發(fā)離不開模塊化的支持。

正因為 JavaScript 在設(shè)計之初就缺失了模塊體系饿这，所以導(dǎo)致開發(fā)人員在后續(xù)十多年都在不斷探索和自行推動模塊化規(guī)范。從「函數(shù)封裝」到「對象封裝」再到「立即執(zhí)行函數(shù) IIFE」，以及后來的 CommonJS 規(guī)范卧蜓、AMD 規(guī)范盛霎、CMD 規(guī)范剂邮。雖然其中很多都已經(jīng)成為歷史，但這些五花八門的模塊化方案和規(guī)范蘊含了開發(fā)人員的努力和智慧。關(guān)于 JavaScript 模塊化的演化過程和歷史可以參見 JavaScript 模塊化的前世今生屑柔。

雖然在過去長期的工程實踐中，「民間」已經(jīng)自行推出了不少模塊化規(guī)范措译，有些還得到充分的實現(xiàn)和發(fā)展掠械。但我們最終期待的還是由官方制定的統(tǒng)一的模塊化方案肚菠，這一期待終于在 ES6 中得以實現(xiàn)烙荷。

ES6 的模塊化規(guī)范也被稱為 ESM，下文就以名稱表述 ES6 的模塊化規(guī)范耙蔑。

4.1 模塊導(dǎo)出

4.1.1 基本語法

ESM 中的一個模塊就是一個文件钱豁，并通過 export 關(guān)鍵字實現(xiàn)模塊導(dǎo)出：

/* utils.js */
export const _name = 'utils';
export const _desc = 'utils for dog and cat';
export function HandleDog() {/*...*/}; 
export function HandleCat() {/*...*/}; 

上述代碼對外導(dǎo)出了 _name幌蚊、_desc 變量以及 HandleDog搓茬、HandleCat 函數(shù)，export 還有另一種寫法：

const _name = 'utils';
const _desc = 'utils for dog and cat';
const HandleDog = function() {/* ... */};
const HandleCat = function() {/* ... */};

export { _name, _desc, HandleDog, HandleCat };
// 導(dǎo)出非 default 變量時必須加括號，以下語法是錯誤的
// 錯誤用法：export _name;
// 錯誤用法：export 123; 

4.1.2 導(dǎo)出變量重命名

可以使用 as 關(guān)鍵字對導(dǎo)出的變量重命名：

// as 重命名時膊夹，同一個變量如 _name 可以賦予兩個不同名字
export {
  _name as name,
  _name as another_name,
  _desc as desc,
  HandleDog as handleDog,
  HandleCat as handleCat,
};

4.1.3 默認(rèn)導(dǎo)出

上文通過 export 導(dǎo)出的變量都是有名字的，那么在使用下文即將介紹的 import 時就需要指定名稱，如：

import { name } from '模塊';

但有時候模塊的使用者希望模塊能有一個「默認(rèn)輸出」，即：

import xxx from '模塊';
xxx();

其中 xxx 不是模塊內(nèi)部的某個變量名，而是在 import 未指定變量名時返回的默認(rèn)輸出愿吹，這個默認(rèn)輸出被起名為 xxx撵颊。如果這個默認(rèn)輸出是個函數(shù)，則可以像上述代碼那樣直接進行調(diào)用 xxx()。

這種默認(rèn)輸出可以在一些場合簡化模塊的使用帆喇，而在模塊內(nèi)我們使用 export default 命令指定本模塊的默認(rèn)輸出。

const _name = 'utils';
const _desc = 'utils for dog and cat';
const HandleDog = function() {/* ... */};
const HandleCat = function() {/* ... */};
const HandleDefault = function() {/* ... */};

// export default 無需添加大括號 {}
// 相當(dāng)于將 HandleDefault 賦值給 default 變量
export default HandleDefault;

export default 進行默認(rèn)導(dǎo)出無需添加大括號 {}，相當(dāng)于將導(dǎo)出值如上面的 HandleDefault 函數(shù) 賦值給 default 變量呈昔。同時要注意到一個模塊只有一個「默認(rèn)輸出」郭宝，所以 export default 只能使用一次衔统。

4.2 模塊導(dǎo)入

4.2.1 按名稱導(dǎo)入

ESM 使用 import 命令實現(xiàn)導(dǎo)入加載模塊：

// 獲取 utils 模塊導(dǎo)出的變量
import { name, another_name, handleDog, handleCat } from './utils.js';

// 如上所示险掀，使用 import 導(dǎo)入時埠啃，括號內(nèi)的變量名需要和 utils 模塊導(dǎo)出的變量名相同
// 當(dāng)然也可以在導(dǎo)入的同時使用 as 起一個新名稱
import { name as old_name, another_name as new_name } from './utils.js';

4.2.2 整體導(dǎo)入

上面的導(dǎo)入語法是將需要的變量依次導(dǎo)入知押，如果想將模塊導(dǎo)出的所有變量作為一個整體一次性導(dǎo)入到一個對象，可使用 * 實現(xiàn)整體加載：

// .utils.js 模塊中通過 export 導(dǎo)出的所有變量將都掛到 Utils 之下
import * as Utils from './utils.js';
console.log(Utils.name);
console.log(Utils.another_name);
Utils.handleDog();
// ...

4.2.3 默認(rèn)導(dǎo)入

上文已經(jīng)提及「默認(rèn)導(dǎo)出」無需使用 {}，而在導(dǎo)入「默認(rèn)導(dǎo)出」時也不需要使用 {}痊银。

因為一個模塊只有一個「默認(rèn)輸出」，且對應(yīng)的變量名為 default，所以在導(dǎo)入時無需指定特定名稱矛绘，還可以直接為其自定義一個任意名稱：

// 模塊內(nèi)導(dǎo)出的 HandleDefault 已經(jīng)被賦值為默認(rèn) default，所以導(dǎo)出的是 default 變量名
// 獲取模塊的默認(rèn) default 時無需通過模塊內(nèi)的定義特定名稱獲取
// 直接給這個默認(rèn) default 自定義一個任意名稱即可，例如 HandleOther
import HandleOther from './utils.js';

4.2.4 import 的一些特性

1. import 導(dǎo)入的變量是只讀的，不可直接覆蓋導(dǎo)出的變量涌穆，例如：

import { name, another_name, handleDog, handleCat } from './utils.js';

// 模塊導(dǎo)出的變量為 const 變量
name = 'new utils';  // 錯誤，name 是只讀的
handleCat.new_name = 'new name';  // 如果導(dǎo)出的是對象類型，可以在該類型上添加屬性。但不建議這么做

2. import 具有提升效果：

handleDog(); // 合法，因為下面的 import 語句在編譯期（語句分析階段）就被執(zhí)行了寿桨，早于 `handleDog 函數(shù)` 的調(diào)用此衅。

import { name, another_name, handleDog, handleCat } from './utils.js';

3. import 編譯期（語句分析階段）執(zhí)行，所以是「靜態(tài)」的亭螟，無法使用表達式墨微、變量等運行時才可確定的值：

import { 'n' + 'ame' } from './utils.js';  // 錯誤

const module_name = './utils.js';
import { name } from module_name;  // 錯誤

4. 重復(fù)加載氓奈，模塊語句只會被執(zhí)行一次：

// 加載三次纱兑，./utils.js 模塊內(nèi)的語句只會被執(zhí)行一次
import { name } from './utils.js';
import { handleDog } from './utils.js';
import { handleCat } from './utils.js';

// 上面語句效果與下面語句是等價的
import { name, handleDog, handleCat } from './utils.js';

5. 導(dǎo)入的是原始值的引用
   import 導(dǎo)入的值是對模塊內(nèi)原始值的引用，這意味著不同文件導(dǎo)入和值和原始值相互影響：

import { name, changeName } from 'utils';

console.log(name);  // utils
changeName('changed');

 // name 為指向模塊內(nèi)部原始值的引用，原始值被修改允蚣，name 變量也會跟著變化
console.log(name);  // changed

4.3 導(dǎo)入導(dǎo)出混合寫法

在一些場景中浪秘，我們可能需要在某個文件里導(dǎo)入某些模塊，同時將這些模塊再導(dǎo)出。這個過程中可能都不會使用導(dǎo)入的模塊，只是起到模塊轉(zhuǎn)發(fā)的作用裆操。此時可以使用上文介紹的 export 和 import 語法混合在一起的特殊語法：

// 「導(dǎo)入」又立馬「導(dǎo)出」掌敬，實際是「轉(zhuǎn)發(fā)」
export { name } from './utils.js';
// 上面語句等同于
import { name } from './utils.js';
export { name };

整體轉(zhuǎn)發(fā)：

// 整體「轉(zhuǎn)發(fā)」
export * from './utils.js';

默認(rèn)轉(zhuǎn)發(fā)：

// 直接轉(zhuǎn)發(fā)原有默認(rèn)輸出
export { default } from './utils.js';

// 轉(zhuǎn)發(fā)時修改默認(rèn)輸出，將 name 作為默認(rèn)輸出
export { name as default } from './utils.js';

// 等同于
import { name } from './utils.js';
export default name;

#05 函數(shù)擴展

ES6 對函數(shù)進行了語法、功能等擴展阶牍，包括參數(shù)默認(rèn)值、箭頭函數(shù)聘惦、尾調(diào)用優(yōu)化等砖第。

5.1 支持參數(shù)默認(rèn)值

ES6 以前复哆，不能為函數(shù)的參數(shù)設(shè)置默認(rèn)值，ES6 實現(xiàn)了對此的支持：

function getPoint(x = 0, y = 0) {
  console.log(x, y);
}

getPoint(1, 2);

undefined 才可觸發(fā)默認(rèn)值：

function getPoint(x = 0, y = 0, z = 0) {
  console.log(x, y, z);
}

getPoint(, , 3);  // 錯誤敲街，不可省略前面兩個參數(shù)
getPoint(undefined, undefined, 3); // 正確绒北，使用 undefined 觸發(fā)默認(rèn)值
getPoint(1, 2);  // 默認(rèn)值可實現(xiàn)參數(shù)的省略

由上例代碼中的 getPoint(1, 2) 可知，參數(shù)默認(rèn)值可以實現(xiàn)參數(shù)的省略，簡化函數(shù)的調(diào)用。但這通常是建立在「設(shè)置默認(rèn)值的是尾部參數(shù)」這個前提，如果是為非尾部參數(shù)設(shè)置默認(rèn)值，調(diào)用時參數(shù)不能被省略忘巧，需要使用 undefined 填充觸發(fā)默認(rèn)值恒界。

參數(shù)默認(rèn)值稍微復(fù)雜點的場景是和解構(gòu)語法一起出現(xiàn)：

function getPoint({x = 0, y = 0}) {
  console.log(x, y);
}

getPoint({x: 1, y: 2});

引入?yún)?shù)默認(rèn)值之后，有幾點改變需要特別注意：

1. 函數(shù)的 length 屬性砚嘴。

函數(shù)的 length 屬性本意為：「該函數(shù)期待的參數(shù)個數(shù)」十酣。在參數(shù)默認(rèn)值被引入之前涩拙，可以通過 length 獲得該函數(shù)定義的參數(shù)個數(shù)，但是引入默認(rèn)值之后耸采，length 表達的是「第一個默認(rèn)值參數(shù)之前的普通參數(shù)個數(shù)（length 也不統(tǒng)計 rest 類型參數(shù)）」兴泥。如下所示：

const funcA = function(x, y) {
};
console.log(funcA.length);  // 函數(shù)期待 x,y 兩個參數(shù)，則長度輸出 2 

const funcB = function(x, y = 1) {
};
console.log(funcB.length);  // y 提供了默認(rèn)值虾宇，length 表示 y 之前有幾個非默認(rèn)值參數(shù)搓彻，長度輸出為 1

const funcC = function(x = 1, y) {
};
console.log(funcC.length);  // 輸出為 0 

2. 參數(shù)作用域
   設(shè)置了參數(shù)默認(rèn)值后，將導(dǎo)致一個與以前不同的行為：參數(shù)在被初始化時將形成一個獨立作用域嘱朽，初始化完成后作用域消解好唯。看如下代碼并可理解：

let x = 1;

// y 設(shè)置了默認(rèn)值
// 則 funcA 被調(diào)用時燥翅，其中的參數(shù) x, y 將形成一個獨立的作用域
// 所以 y = x 中的 x 是第一個參數(shù) x，而不是上面定義的 let x= 1;
function funcA(x, y = x) {
  console.log(y);
}

// 在參數(shù)作用域中蜕提，y = x 語句的 x 是參數(shù) x 的值森书，即 2 而不是上面的 let x = 1，所以最終輸出為 2
funcA(2);  

5.2 箭頭函數(shù)

5.2.1 箭頭函數(shù)基本語法

ES6 引入了「箭頭函數(shù)」的語法來簡化函數(shù)的定義谎势，基本語法如下所示：

// 1. 不傳入?yún)?shù)
const funcA = () => console.log('funcA');
// 等價于
const funcA = function() {
  console.log('funcA');
} 

// 2. 傳入?yún)?shù)
const funcB = (x, y) => x + y;
// 等價于
const funcB = function(x, y) {
  return x + y;
} 

// 3. 單個參數(shù)的簡化
const funcC = (x) => x;
// 對于單個參數(shù)凛膏，可以去掉 ()，簡化為
const funcC = x => x;
// 等價于
const funcC = function(x) {
  return x;
}

// 4. 上述代碼函數(shù)體只有單條語句脏榆，如果有多條猖毫，需要使用 {}
const funcD = (x, y) => { console.log(x, y); return x + y; }
// 等價于
const funcD = function(x, y) {
  console.log(x, y);
  return x + y;
}

5.2.2 箭頭函數(shù)的重要特性

1. 不綁定 this

有經(jīng)驗的前端開發(fā)可能經(jīng)常會寫這樣的代碼 const self = this; 或 const that = this; 看如下代碼：

class Dog {
  constructor(age) {
    this.age = age;
  }

  printAge() {
    console.log('output age: ', this.age);  // 輸出 10
    setTimeout(function inner() {
      this.age++;
      console.log('output age: ', this.age);  // 輸出 undefined
    }, 1000);
  }
}

let dog = new Dog(10);
dog.printAge();

在傳統(tǒng)定義的函數(shù)中，函數(shù)內(nèi)的 this 指向的是運行時的上下文環(huán)境须喂。例如上例代碼中的 inner 函數(shù)在 1 秒后運行吁断，運行時函數(shù)內(nèi)的 this 指向是運行時所在的環(huán)境對象即 window，由于 window.a 未定義坞生，所以最終輸出的是 undefined仔役。如果希望得到預(yù)期的結(jié)果，即對 Dog 實例的 age 屬性進行操作是己，則需要避開 this 關(guān)鍵字又兵，使用其他名稱來傳遞「定義時的上下文環(huán)境」，如下所示：

class Dog {
  constructor(age) {
    this.age = age;
  }

  printAge() {
    const that = this;  // 使用 that 傳遞 dog 實例上下文
    console.log('output age: ', this.age);  // 輸出 10

    setTimeout(function inner() {
      that.age++;
      console.log('output age: ', that.age);  // 輸出 11
    }, 1000);
  }
}

let dog = new Dog(10);
dog.printAge();

上述現(xiàn)象經(jīng)常被詬病卒废，但引入箭頭函數(shù)之后沛厨，由于箭頭函數(shù)不再在函數(shù)體內(nèi)定義和綁定 this ，所以在箭頭函數(shù)內(nèi)寫 this摔认，this 指向的就是定義箭頭函數(shù)所在的上下文逆皮，而不是運行時的上下文，如下所示：

class Dog {
  constructor(age) {
    this.age = age;
  }

  printAge() {
    console.log('output age: ', this.age);  // 輸出 10
    // this
    setTimeout(() => {
      this.age++;  // 由于箭頭函數(shù)內(nèi)部沒有 this级野，所以這里的 this 就是 printAge 函數(shù)的 this （也就是 dog 實例）
      console.log('output age: ', this.age);  // 輸出 11
    }, 1000);
  }
}

let dog = new Dog(10);
dog.printAge();

2. 不綁定 arguments

普通函數(shù)內(nèi)页屠，實際傳入的參數(shù)會被綁定到一個內(nèi)置變量 arguments 中粹胯，我們可以從這個變量中獲取參數(shù)：

const printAge = function(age) {
  console.log('age: ', arguments[0]);  // 輸出 age: 10
} 

printAge(10);

但箭頭函數(shù)不會綁定 arguments，如下所示：

const printAge = age => console.log('age: ', arguments[0]);  // 錯誤：arguments is not defined

printAge(10);

3. 不可使用 yield

箭頭函數(shù)內(nèi)部不能使用 yield 即不可作為函數(shù)生成器 Generator辰企，有關(guān) Generator 可查閱下文的 Generator 部分风纠。

4. 不可作為構(gòu)造函數(shù)

上面的第一點已經(jīng)提及箭頭函數(shù)缺乏 this，這自然導(dǎo)致箭頭函數(shù)不能作為構(gòu)造函數(shù)牢贸，不可搭配 new 關(guān)鍵字：

const Dog = () => 1;
let dog = new Dog();  // 錯誤竹观，箭頭函數(shù)不可作為構(gòu)造函數(shù)，不可搭配 new 關(guān)鍵字

由于不能作為構(gòu)造函數(shù)潜索，所以也沒有相應(yīng)的 prototype 屬性：

const Dog = () => 1;
console.log('Dog prototype', Dog.prototype);  // undefined

5. 不可使用 call()臭增、apply()、bind() 等函數(shù)
   由于缺乏 this竹习，一些依賴于 this 的函數(shù)自然也不再適用：

this.age = 10;
const printAge1 = function() {
  console.log('age1: ', this.age); 
}

printAge1.call({age: 20});  // 輸出 age1: 20

const printAge2 =() => console.log('age2: ', this.age); 
printAge2.call({age: 20});  // 輸出 age2: 10 

5.3 尾調(diào)用優(yōu)化

5.3.1 何為尾調(diào)用

所謂的「尾調(diào)用」是指這樣的情形：一個函數(shù)的最后一步返回一個「函數(shù)調(diào)用」誊抛，看代碼會更加的清晰：

function funcA() {
  // ....
  return funcB();  // funcA 函數(shù)的尾部，調(diào)用了函數(shù) funcB整陌，并且直接返回了 funcB 的執(zhí)行結(jié)果
}

如果尾部進行了除函數(shù)調(diào)用外不純粹的動作拗窃，則不應(yīng)作為尾調(diào)用考慮：

function funcA() {
  // ....
  return funcB() + a; // 除了調(diào)用 funcB 之外，還需要將結(jié)果 + a 才返回
}

function funcA() {
  // ...
  let b = funcB();
  return b == 0 ? 1 : b;  // 除了調(diào)用 funcB泌辫，返回值還需要進行加工判斷
}

當(dāng)上面尾部函數(shù)調(diào)用為「自身調(diào)用」時随夸，此時的尾調(diào)用也就成為了「尾遞歸」。

5.3.2 何為尾調(diào)用優(yōu)化

我們知道一個函數(shù)調(diào)用的正常流程震放，例如：

function funcA() {
  return funcB();
}

當(dāng)執(zhí)行到 funcB() 代碼時宾毒，大體將進行如下步驟：

1. 保存 funcA 函數(shù)的上下文環(huán)境到內(nèi)存棧
2. 創(chuàng)建 funcB 函數(shù)所需要的上下文環(huán)境
3. 切換到第二步創(chuàng)建的函數(shù)上下文環(huán)境去執(zhí)行
4. 執(zhí)行完畢后回到棧中保存的 funcA 上下文

我們思考這樣一個問題：當(dāng) funcB 為尾調(diào)用時，我們是否還有必要再單獨創(chuàng)建一個新的上下文環(huán)境殿遂？

由于 funcB 函數(shù)執(zhí)行完畢后回到 funcA 后诈铛，僅剩的工作就是返回 funcB 的執(zhí)行結(jié)果，而這個過程中 funcA 的上下文環(huán)境中的大部分東西是不被需要的勉躺，那么完整的保存 funcA 的上下文環(huán)境也就沒有太大必要癌瘾。那么我們可以嘗試直接復(fù)用 funcA 的上下文環(huán)境，稍作修改將其作為 funcB 的上下文饵溅。于是步驟就變成：

1. 如果 funcA 是尾調(diào)用妨退，那么執(zhí)行到最后一步時，直接修改 funcA 函數(shù)的上下文環(huán)境蜕企，將其作為 funcB 函數(shù)的執(zhí)行上下文
2. funcB 執(zhí)行完畢后直接返回結(jié)果

這樣的優(yōu)化過程被稱為尾調(diào)用消除(Tail Call Elimination)或尾調(diào)用優(yōu)化(Tail Call Optimization, TCO)咬荷。

尾調(diào)用優(yōu)化注意點：

1. C++ 中的尾調(diào)用優(yōu)化
   在 C++ 中，在返回之前可能還涉及到返回值的析構(gòu)操作轻掩，所以 funcB 在 C++ 可能不是最后被執(zhí)行的函數(shù)幸乒，這樣也就無法應(yīng)用尾調(diào)用優(yōu)化，解決方案是應(yīng)用 C++ 的「返回值優(yōu)化」
2. 尾調(diào)用優(yōu)化是否支持取決于編譯器或解釋器唇牧。目前并不是所有的編譯器或解釋器都支持此優(yōu)化罕扎。

5.4 函數(shù)的 name 屬性

ES6 之前聚唐，瀏覽器在實現(xiàn)時已經(jīng)提供了函數(shù)的 name 屬性，ES6 則是正式將其寫入標(biāo)準(zhǔn)中：

function funcA() {};  // name = "funcA"
const funcB = function funcA() {};  // name = "funcA"

// 與之前的瀏覽器實現(xiàn)略有不同的點：
const funcA = function() {};  // 不具名函數(shù)表達式腔召，ES5 中 name = ""杆查，ES6 中 name = "funcA"

#06 其它數(shù)據(jù)類型的擴展

6.1 Symbol

ES6 以前有六種基本數(shù)據(jù)類型：undefined、null臀蛛、布爾（Boolean）亲桦、數(shù)值（Number）逻谦、字符串（String）映屋、對象。ES6 引入了第七種基本數(shù)據(jù)類型 Symbol矩屁，Symbol 表示一個獨一無二的值抡柿，主要用于對象屬性的標(biāo)識舔琅。

在 ES6 之前，對象屬性存在產(chǎn)生沖突的可能洲劣，例如：

import { Dog } from 'dog.js';

Dog.sayHi = function() {/* ... */};  // Dog 內(nèi)部可能已經(jīng)擁有 sayHi 屬性

Symbol() 函數(shù)可以為我們生成一個獨一無二的 Symbol 值搏明，如：

let s = Symbol();

console.log(typeof s);  // "symbol"

可以傳入?yún)?shù)作為 Symbol 實例的描述，但同一個描述返回的仍然是不同的 Symbol 值：

let s1 = Symbol("dog");
let s2 = Symbol("dog");

console.log(s1 === s2); // false

有了 Symbol闪檬，我們并可為對象設(shè)置一個不會沖突的屬性：

import { Dog } from 'dog.js';

let s1 = Symbol("dog");
Dog[s1] = function() { console.log('say hi by dog.'); } ;

Dog[s1]();  // 調(diào)用

Symbol() 函數(shù)為我們返回的永遠是不同的值，但有時候我們需要得到同一個 Symbol 值购笆，這時候就需要另一個函數(shù) Symbol.for()粗悯。 Symbol.for(xxx) 會根據(jù)參數(shù) xxx 搜索對應(yīng)的 Symbol 值，如果還未存在則創(chuàng)建 xxx 對應(yīng)的 Symbol 值同欠，并將其注冊到全局環(huán)境以供搜索样傍。如果已經(jīng)存在，則直接返回 Symbol 值铺遂。這樣我們可以根據(jù)參數(shù)來得到同一個 Symbol 值：

let s1 = Symbol.for("dog");  // dog 對應(yīng)的 Symbol 還未存在衫哥，則創(chuàng)建并加入全局環(huán)境。
let s2 = Symbol.for("dog");  // 第二次調(diào)用襟锐， dog 對應(yīng)的 Symbol 已經(jīng)存在撤逢，則返回上一步創(chuàng)建的值

console.log(s1 === s2);  // true 

ES6 還提供了一系列的內(nèi)置 Symbol 值，用來表示一些內(nèi)部方法和內(nèi)部屬性粮坞，重寫這些方法可以改變對象的行為蚊荣，例如 Symbol.hasInstance，當(dāng)對某個對象使用 instanceof莫杈，實際調(diào)用的就是該函數(shù)互例，如下所示：

class MyArray {
  [Symbol.hasInstance](data) {
    return data instanceof Array;
  }
}

// 相當(dāng)于 MyArray[Symbol.hasInstance]([1, 2, 3]);
[1, 2, 3] instanceof new MyArray(); // 返回 true

類似的還有 Symbol.iterator、Symbol.split 等筝闹。

6.2 Set 和 Map

在其他語言中媳叨，Set 和 Map 是兩種最為常見和常用的數(shù)據(jù)結(jié)構(gòu)腥光，ES6 為 JavaScritp 補充上了這種數(shù)據(jù)結(jié)構(gòu)。

6.2.1 Set

1. 創(chuàng)建與基本使用

一種集合數(shù)據(jù)結(jié)構(gòu)糊秆，不允許存在重復(fù)值武福。創(chuàng)建一個 Set 數(shù)據(jù)結(jié)構(gòu)語法如下所示：

const mySet = new Set();

// 通過 add 函數(shù)添加元素
mySet.add(1); 
mySet.add(2);
mySet.add(1);  // 添加重復(fù)元素，重復(fù)元素會被「消除」

console.log(mySet);  //  1 2 

2. 判等

Set 對于 NaN 能夠正確識別扩然，能夠正確判斷 NaN 和 NaN 相等艘儒，也就是添加多次 NaN，Set 只會保存一個 NaN夫偶。同時兩個對象界睁，Set 永遠會判斷為不相等，如：

const mySet = new Set();

// 通過 add 函數(shù)添加元素
mySet.add({}); 
mySet.add({});

console.log(mySet);  //  含有兩個元素兵拢，{}, {}

3. 初始化

可通過數(shù)組或任何具有 iterable 接口的數(shù)據(jù)結(jié)構(gòu)來初始化 Set：

const mySet1 = new Set([1, 2, 3, 1]);
console.log(mySet1); // 1 2 3

4. 相關(guān)屬性和方法

• add(value): 添加元素翻斟，返回整個 Set
• delete(value): 刪除元素，返回刪除是否成功的布爾值
• has(value): 判斷是否包含某個元素说铃，返回布爾值
• clear() : 清空元素访惜，無返回值。
• keys()：返回所有鍵名腻扇，對于 Set 結(jié)構(gòu)债热，鍵名和鍵值相同，都是 Set 內(nèi)的元素值
• values()：返回所有鍵值幼苛，對于 Set 結(jié)構(gòu)窒篱，鍵名和鍵值相同，都是 Set 內(nèi)的元素值
• entries()：返回所有鍵值舶沿，對于 Set 結(jié)構(gòu)墙杯，鍵名和鍵值相同，都是 Set 內(nèi)的元素值括荡，entries 返回的 key 和 value 相同高镐，即兩個重復(fù)的元素值
• size: 含有的元素個數(shù)

上述屬性和方法的實例代碼如下：

const mySet = new Set([1, 2,3]);
mySet.add(4);  // 1 2 3 4
console.log(mySet.delete(1));  // true，刪除后為 2 3 4
console.log(mySet.has(2));  // 存在 2畸冲，輸出 true
console.log(mySet.size);  // 3 個元素嫉髓，輸出 3

for (let key of mySet.keys()) {
  console.log(key); // 2 3 4
}

for (let value of mySet.values()) {
  console.log(value); // 2 3 4
}

for (let entry of mySet.entries()) {
  console.log(entry); // [2, 2] [3, 3] [4 4]
}

mySet.clear();  // 清空元素

6.2.2 Map

JavaScript 中的對象 Map 有一個特點，由鍵值對組成邑闲，所以有時對象可以作為一個簡單的 key-value 結(jié)構(gòu)來使用岩喷。但必須意識到對象作為 key-value 結(jié)構(gòu)使用是殘缺的，因為對象中的 key 只能以字符串的形式存在监憎。雖然在語法上可以傳入不同類型如布爾纱意、數(shù)值的數(shù)據(jù)，但實際上只是被自動轉(zhuǎn)換成字符串類型：

const map = {};
map[1] = 'a';  // 實際上為 map['1']
map[true] = 'b';  // 實際上為 map['true']

console.log(map['1']);  // a
console.log(map['true']);  // b

當(dāng)傳入對象類型作為 key 時鲸阔，對象被字符串化為統(tǒng)一的 [object Object]：

const map = {};
const obj1 = {a: 1};
const obj2 = {a: 2};
map[obj1] = 1;

console.log(map[obj1] === map[obj2]);  // true

由上不難看出對象作為 key-value 結(jié)構(gòu)是「不專業(yè)」的偷霉，所以 ES6 引入了更為專業(yè)且能夠支持各種數(shù)據(jù)類型作為 key 的 Map 結(jié)構(gòu)迄委。

1. 創(chuàng)建與基本使用

創(chuàng)建一個 Map 結(jié)構(gòu)并使用如下所示：

const map = new Map();
const obj = {a: 1};

map.set(true, 1);
map.set('true', 2);
map.set(obj, 3);

console.log(map.get(true));  // 1
console.log(map.get('true'));  // 2
console.log(map.get(obj));  // 3

2. 判等

Map 支持不同數(shù)據(jù)類型作為 key。對于數(shù)值类少、字符串叙身、布爾值類型，Map 通過嚴(yán)格相等 === 判斷是否是相同的 key 硫狞。且對于數(shù)組信轿、對象等，Map 通過地址來判斷是否是相同的 key残吩，也就是值完全相同的數(shù)組或?qū)ο蟛坪觯灰遣煌瑢嵗诓煌牡刂芬矔徽J(rèn)為不同的 key泣侮，如下所示：

const map = new Map();
map.set([1], 1);
console.log(map.get([1]));  // undefined 

3. 初始化
   與 Set 類似即彪，Map 也可以接受任何具有 Iterator 接口的數(shù)據(jù)結(jié)構(gòu)，且這個數(shù)據(jù)結(jié)構(gòu)中每個迭代到的元素需要是具有兩個元素的數(shù)組活尊。如一個二維數(shù)組：

const map = new Map([
  [true, 1],
  ['true', 2],
]);

console.log(map);  // true => 1, 'true' => 2

4. 相關(guān)屬性和方法

• set(key, value): 設(shè)置元素隶校，返回值為整個 Map。如果存在 key蛹锰，則會更新 value深胳，如果不存在 key，則新建 key铜犬。
• get(key): 獲取 key 對應(yīng)的 value稠屠，key 不存在則返回 undefined
• delete(key)：刪除某個鍵值，返回刪除是否成功
• has(key): 判斷是否包含某個鍵翎苫，返回布爾值
• clear() : 清空元素，無返回值榨了。
• keys()：返回所有鍵名
• values()：返回所有鍵值
• entries()：返回所有鍵值對
• size: 含有的元素個數(shù)

上述屬性和方法的實例代碼如下：

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3],
]);

map.set('d', 4);
console.log(map.get('a'));    // 1
console.log(map.delete('a'));  // true煎谍，刪除后為 b => 2, c => 3, d => 4
console.log(map.has('d'));  // 存在 d，輸出 true
console.log(map.size);  // 3 個元素龙屉，輸出 3

for (let key of map.keys()) {
  console.log(key); // b c d
}

for (let value of map.values()) {
  console.log(value); // 2 3 4
}

for (let entry of map.entries()) {
  console.log(entry); // [b, 2] [c, 3] [d 4]
}

for (let [key, value] of map.entries()) {
  console.log(key ,value); // b 2呐粘、c 3、d 4
}

map.clear();  // 清空元素

6.3 字符串?dāng)U展

6.3.1 模板字符串

ES6 之前常見使用 + 拼接字符串转捕，這在一些網(wǎng)頁代碼拼接場景下會顯得非常的繁瑣作岖，ES6 引入了「模板字符串」：

const obj = 'world';
const str = `hello, ${obj}`;

模板字符串使用反引號 ` 符號來標(biāo)識，使用 ${} 符號來嵌入變量五芝。

模板字符串的一個重要特點就是可以保存空格和換行：

const str = `
<ul>
  <li>${name}</li>
  <li>${age}</li>
</ul>
`

模板字符串還可以跟在一個函數(shù)后面痘儡，這種模式被成為標(biāo)簽?zāi)０?/strong>：

const age = 123;
console.log`my age is ${age}!`;  // 函數(shù)名稱后面直接跟模板字符串

SaferHTML`<p>${sender} has sent you a message.</p>`;  // SaferHTML 是對 HTML 字符串進行安全過濾的函數(shù)

i18n`HelloWorld.`; // 你好世界采幌。i18n為國際化處理函數(shù)

for (const str of 'hello,world') {
  console.log(str);
}

"hello,world".includes("llo");  // 返回 true
"hello,world".includes("llo", 6); // 從下標(biāo) 6 開始查找，返回 false

"hello,world".startsWith("hello");  // 返回 true
"hello,world".startsWith("hello", 2); // 從下標(biāo) 2 開始查找植榕，返回 false

"hello,world".endsWith("world");  // 返回 true
"hello,world".endsWith("world", 5); // 查找前 5 個字符再沧，判斷是否以 world 結(jié)尾

' i love you.'.repeat(3000);  // 愛你 3000 遍

console.log(0b101 === 5); // true
console.log(0o701 === 449); // true

console.log(Number('0b101')); // 5, 使用 Number 將二進制轉(zhuǎn)換成十進制
console.log(Number('0o701'), 449);  // 449, 使用 Number 將八進制轉(zhuǎn)換成十進制

Number.parseInt('123');
Number.parseFloat('123.4');

function funcA(a, b, c, d) {
  return a + b + c + d;
} 
const a = [1, 2, 3, 4];
funcA(...a);  // 將數(shù)組 [1, 2, 3, 4] 展開為 1 2 3 4

const copy_a = [...a];  // 拷貝數(shù)組 a
const [...copy_a] = a;  // 拷貝數(shù)組 a

const b = [..."123"]; // 作用于字符串慰毅，將其轉(zhuǎn)換成數(shù)組 ["1", "2", "3"]
const c = [5, 6, 7];

// 合并數(shù)組 a 和 數(shù)組 c隘截，得到數(shù)組 d [1, 2, 3, 4, 5, 6, 7]
// 注意是這里都是淺拷貝，如果數(shù)組 a 和數(shù)組 c 內(nèi)的元素為引用類型如對象汹胃，那么 d 指向的是 a 和 c 數(shù)組中的同一個元素
// 修改 a婶芭、c、d 中的引用類型元素都會影響到其他數(shù)組
const d = [...a, ...c];

new Array(3).fill(0);  // [0, 0, 0];

['a', 'b', 'c'].fill(0, 1, 2);  // 從 1 號下標(biāo)開始到 2 號下標(biāo)（不包含）呵哨，填充為 0

const obj = {key: 'value'};
const arr = new Array(3).fill(obj);
arr[0].key = 'update value';  // 對第一個「對象」元素修改孟害，即對所有元素修改
console.log(arr);  // 輸出 [{key: 'update value'}, {key: 'update value'}, {key: 'update value'}]

[1, 2, 3, 4, 5].find(function(value, index, arr) {
  // value: 遍歷到的元素
  // index: 遍歷到的下標(biāo)
  // arr: 完整數(shù)組
  return value === 5;  // 找到滿足值等于 5 的元素
});  // 返回 5

[1, 2, 3, 4, 5].findIndex(function(value, index, arr) {
  // value: 遍歷到的元素
  // index: 遍歷到的下標(biāo)
  // arr: 完整數(shù)組
  return value === 5;  // 找到滿足值等于 5 的元素
});  // 返回下標(biāo) 4

[1, NaN].indexOf(NaN);  // 返回 -1谷誓，即不存在
[1, NaN].findIndex(ele => Object.is(ele, NaN));  // 返回 1

const arr1 = new Array(1, 2, 3); // 得到 [1, 2, 3]
const arr2 = new Array();  // 得到 []

const arr3 = new Array(1);  // 得到 [empty]糙臼， 長度為 1庐镐，且元素為空

Array.of();  // []
Array.of(1, 2, 3);  // [1, 2, 3];
Array.of(1);  // [1]

const arr = ['a', 'b', 'c'];
for (const idx of arr.keys()) {
  console.log(idx);  // 輸出下標(biāo) 0 1 2
}

for (const ele of arr.values()) {
  console.log(ele); // 輸出數(shù)組值 a b c
}

for (const [idx, ele] of arr.entries()) {
  console.log(idx, ele);  // 輸出 下標(biāo) 數(shù)組值，0 a 揽乱、1 b名眉、2 c
}

const name = 'cat';
const age = 10;
const dog = {
  name: name,
  age: age,
  sayHi: function() {/* ... */}
};

const dog = {
  name,
  age,
  sayHi() {/* ... */}  // 注意 ES6 的函數(shù)也可以簡寫损拢，直接寫成函數(shù)定義即可
}

const animal = {
  name: 'cat',
  age: 10,
  sayHi() {/* ... */}
}

const key = 'wangwang';
animal[key] = function() { console.log('i am a dog'); };
animal.wangwang();

const key = 'wangwang';

const animal = {
  name: 'cat',
  age: 10,
  sayHi() {/* ... */},
  [key]: function() { console.log('i am a dog'); },  // 直接在 animal 定義時就實現(xiàn)表達式的屬性名
};

animal.wangwang();

const key1 = {name: 'wangwang'};
const key2 = {name: 'miaomiao'};
const animal = {
  name: 'cat',
  age: 10,
  sayHi() {/* ... */},
  [key1]: function() { console.log('i am a dog'); },  // [object Object]: function
  [key2]: function() { console.log('i am a cat'); },   // [object Object]: function 將會覆蓋上面的函數(shù)
};

Object.is(NaN, NaN);  // true

const target = {a: 'a', b: 'b'};

const source1 = {c: 'c', d: 'd'};
const source2 = {e: 'e', f: 'f'};

const obj = Object.assign(target, source1, source2);

/* getOne碌补、getTwo虏束、getMore 皆為模擬異步操作 */
/* 1 秒后通過回調(diào)告知操作結(jié)果 */

function getOne(params, callback) {
  setTimeout(() => {
    console.log(`oneResult: ${params}、1`);  // oneResult: 0厦章、1
    callback(`${params}镇匀、1`)
  }, 1000);
}

function getTwo(params, callback) {
    setTimeout(() => { 
      console.log(`twoResult: ${params}、2`);  // twoResult: 0袜啃、1汗侵、2
      callback(`${params}、2`)
    }, 1000);
}

function getMore(params, callback) {
    setTimeout(() => { 
      console.log(`moreResult: ${params}群发、3`);  // moreResult: 0晰韵、1、2也物、3
      callback(`${params}宫屠、3`)
    }, 1000);
}

// 上述異步操作存在先后順序
// 需要先執(zhí)行 getOne 得到 oneResult
// 然后將 oneResult 作為參數(shù)傳入 getTwo 執(zhí)行，獲取 twoResult
// 最后將 twoResult 作為參數(shù)傳入 getMore 執(zhí)行
// 則出現(xiàn)「回調(diào)函數(shù)」嵌套寫法如下
getOne(0, function(oneResult) {
  getTwo(oneResult, function(twoResult) {
    getMore(twoResult, function(moreResult) {
       console.log(`done.`);
    });
  });
});

function getOne(params) {
  return new Promise(function(resolve, reject) {
    setTimeout(() => {
      console.log(`oneResult: ${params}、1`);  // oneResult: 0疤剑、1
      resolve(`${params}滑绒、1`)
    }, 1000);
  });
}

function getTwo(params) {
  return new Promise(function(resolve, reject) {
    setTimeout(() => { 
      console.log(`twoResult: ${params}、2`);  // twoResult: 0隘膘、1疑故、2
      resolve(`${params}、2`)
    }, 1000);
  });
}

function getMore(params) {
  return new Promise(function(resolve, reject) {
    setTimeout(() => { 
      console.log(`moreResult: ${params}弯菊、3`);  // moreResult: 0纵势、1、2、3
      resolve(`${params}钦铁、3`)
    }, 1000);
  });
}

// 綁定成功時回調(diào)函數(shù) sucCallBack恋脚，可選
// 綁定失敗時回調(diào)函數(shù) failCallback，可選
getOne.then(sucCallBack, failCallback);

getOne(0)
  .then(getTwo)  // getOne 執(zhí)行成功后并執(zhí)行回調(diào)「getTwo」
  .then(getMore)  // 由于 getTwo 返回的是一個 Promise税朴，所以后面又可以跟上 getMore，且在 getTwo 執(zhí)行成功后執(zhí)行回調(diào) getMore
  .then(() => console.log('done.'));  // getMore 執(zhí)行成功后執(zhí)行回調(diào)輸出 done.

/* 調(diào)用 reject 會被 catch */
const promise1 = new Promise(function(resolve, reject) {
  setTimeout(() => {
    const one = '1';
    reject(one);
  }, 1000);
});
promise1
  .then(() => console.log('callback'))  // 沒有輸出。因為上面代碼調(diào)用了 reject 所以屬于失敗颤殴，將調(diào)用失敗回調(diào) rejection 
  .catch((error) => console.log('error info: ', error));  // 輸出 error info:1觅廓。 catch 就是 .then(undefined, rejection) 別名

/* 調(diào)用 throw 一個 Error 也會被 catch */
const promise2 = new Promise(function(resolve, reject) {
  setTimeout(() => {
    const one = '1';
  }, 1000);
  throw new Error('1');
});
promise2
  .then(() => console.log('callback'))  // 沒有輸出。因為上面代碼調(diào)用了 reject 所以屬于失敗诅病，將調(diào)用失敗回調(diào) rejection 
  .catch((error) => console.log('error info: ', error));  // 輸出 error info:  Error: 1......飞蹂。 catch 就是 .then(undefined, rejection) 別名

const promise = new Promise(function(resolve, reject) {
  setTimeout(() => {
    const one = '1';
    resolve(one);
  }, 1000);
});
promise
  .then(() => x + 1)  // 此處拋出的錯誤會被最后的 .catch 捕獲 
  .then(() => 2)  // 如果此處有錯也會被最后的 .catch 捕獲
  .catch((error) => console.log('error info: ', error));  // 輸出 error info:  ReferenceError: x is not defined......

// function 后面添加星號 *
// 以下寫法也是合法的
// function * lines
// function *lines
// function*lines
function* lines() {
  yield 'first';
  yield 'second';
  yield 'third';

  return 'EOF';
}

const generator = lines();  // 返回迭代器對象
generator.next();  // { value: 'first', done: false }
generator.next();  // { value: 'second', done: false }
generator.next();  // { value: 'third', done: false }
generator.next();  // { value: 'EOF', done: true }

function* lines() {
  yield 'first';
  yield 'second';
  const more = yield 'third';
  if (more) {
    yield 'fourth';
  }

  return 'EOF';
}

const generator = lines();  // 返回迭代器對象
generator.next();  // { value: 'first', done: false }
generator.next();  // { value: 'second', done: false }
generator.next();  // { value: 'third', done: false }
generator.next(true);  // 傳入?yún)?shù) true 給 more 略步，此時返回 { value: 'fourth', done: false }。如果傳入 false定页，則回跳過 yield 'fourth' 的執(zhí)行
generator.next(); // { value: 'EOF', done: true }

for (const line of lines()) {
  console.log(line);  // first second third
}

function* lines() {
  yield 'first';
  yield 'second';
  const more = yield 'third';

  return 'EOF';
}

const generator = lines();  // 返回迭代器對象
generator.next();
generator.next();
generator.throw(new Error('出錯'));

function* lines() {
  yield 'first';
  yield 'second';

  // 這條語句將被替換 const more = throw(new Error('出錯'));
  const more = yield 'third';

  return 'EOF';
}

function* lines() {
  yield 'first';
  yield 'second';
  const more = yield 'third'; // 這條語句將被替換 const more = return 2;

  return 'EOF';
}

const generator = lines();  // 返回迭代器對象
generator.next();
generator.next();
generator.return(2); // {value: 2, done: true}
generator.next();  // {value: undefined, done: true} 函數(shù)已經(jīng)結(jié)束了也切。

function* lines() {
  yield 'first';
  yield 'second';
  const more = yield 'third'; // 這條語句將被替換 const more = return 2;

  return 'EOF';
}

function* files() {
  yield 'first file';
  // 遍歷 lines
  for (const line of lines()) {
    console.log(line);
  }
  return 'EOF';
}

function* lines() {
  yield 'first';
  yield 'second';
  const more = yield 'third'; // 這條語句將被替換 const more = return 2;

  return 'EOF';
}

function* files() {
  yield 'first file';
  // yield* 表達式
  yield* lines();
  return 'EOF';
}

function* asyncByGenerator() {
  const result = yield ajax("/users", callback);  // 開始 ajax 異步請求倒槐，并不用等其結(jié)果立馬返回讓出執(zhí)行權(quán)
  const resp = JSON.parse(result);  // 這里是從 ajax 回調(diào)中 it.next(response) 處恢復(fù)的，此時已經(jīng)得到了異步結(jié)果附井，所以可以恢復(fù)繼續(xù)執(zhí)行
  console.log(resp.value);
}

function callback(response) {
    it.next(response);  // 在回調(diào)中恢復(fù)協(xié)程繼續(xù)執(zhí)行
}

// 獲得迭代對象
var it = asyncByGenerator();
it.next();  // 開始執(zhí)行

// it.next() 會立馬返回讨越，所以不影響做其他事情
console.log('hi');

function run(gen){
  let g = gen();

  function next(data){
    const result = g.next(data);

    if (result.done) return result.value;  // Generator 函數(shù)執(zhí)行完成，則返回
    
    // 重點漫雕，返回值為 Promise滨嘱，這樣我就可以在成功后「遞歸」調(diào)用 next
    // 當(dāng)然也可以直接返回回調(diào)函數(shù)，對應(yīng)的技術(shù)稱為 Thunk 函數(shù)
    result.value.then(function(data){
      next(data);
    });
  }

  next();
}

function* asyncByGenerator() {
  const result = yield special("/users");  // 
  const resp = JSON.parse(result);
  console.log(resp.value);
}

run(asyncByGenerator);

const dog = {
  name: 'wangwang',
  age: 5,
};

const attrName1 = 'age';
const attrName2 = 'master';
console.log(Reflect.has(dog, attrName1)); // true贝室，dog 對象存在 age 屬性
console.log(Reflect.has(dog, attrName2)); // false, dog 對象不存在 master 屬性

const dog = {
  name: 'wangwang',
  age: 5,
};

// 使用 Proxy: 
// const proxy = new Proxy(target, handler);
const dogProxy = new Proxy(dog, {
  // target: 被代理的對象捡偏，這里為 dog
  // propKey: 訪問的屬性
  // receiver: 代理對象，這里為 dogProxy
  get: function (target, propKey, receiver) {
    console.log(`get prop [${propKey}] by proxy.`);
    // ... 例如打日志上報峡迷、計數(shù)等等更多操作
    return Reflect.get(target, propKey, receiver);
  },
});

console.log(dogProxy.name);  // get prop [name] by proxy. wangwang
console.log(dogProxy.age);  // get prop [age] by proxy. 5

const proxy = new Proxy(target, handler);

class Iterable {
  constructor(data) {
    this.data = data
  }
  
  // 部署了 Symbol.iterator 屬性的數(shù)據(jù)結(jié)構(gòu)為 Iterable
  [Symbol.iterator]() {
    let index = 0;
    
    // Symbol.iterator 函數(shù)返回的是一個對象，該對象即為本數(shù)據(jù)結(jié)構(gòu)的 Iterator 對象
    return {
      next: () => {
        if (index < this.data.length) {
          return {value: this.data[index++], done: false}
        } else {
          return {done: true}
        }
      }
    }
  }
}

const myArray = new Iterable([1, 2, 3]);
for (const ele of myArray) {
  console.log(ele);
}

const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();  // 獲取迭代器

console.log(iterator.next());  // {value: 1, done: false}
console.log(iterator.next());  // {value: 2, done: false}
console.log(iterator.next());  // {value: 3, done: true}

const arr = [1, 2, 3];
for (const ele of arr) {
  console.log(ele);
}