認(rèn)真學(xué)習(xí)了一遍ES6，發(fā)現(xiàn)很多很好用的功能。
學(xué)習(xí)資料：《ECMAScript 6 入門》
好啦，繼續(xù)下半部分的學(xué)習(xí)。
Proxy
Proxy 用于修改對(duì)象的某些操作行為。套用書上的栗子，實(shí)現(xiàn)了對(duì)象的set、get方法攔截。
var obj = new Proxy({}, {
get: function (target, key, receiver) {
console.log(`getting ${key}!`);
return Reflect.get(target, key, receiver);
},
set: function (target, key, value, receiver) {
console.log(`setting ${key}!`);
return Reflect.set(target, key, value, receiver);
}
});
obj.count = 1
obj.name = 'jack'
obj.count++
// setting count
// setting name
// getting count
// setting count
實(shí)例方法整理
- get 方法攔截屬性的讀取操作。
- set 方法攔截賦值操。
- apply 方法攔截函數(shù)的調(diào)用。
- has 方法攔截
HasProperty操作，即查找對(duì)象中是否有某屬性。可用來隱藏一些屬性不被in運(yùn)算符發(fā)現(xiàn)。 - construct 方法攔截
new指令。即在new指令創(chuàng)建實(shí)例的時(shí)候可以對(duì)對(duì)象中的參數(shù)進(jìn)行一些初始化修改操作。 - deleteProperty方法攔截
delete指令，可用來保護(hù)某些對(duì)象屬性無法被刪除。 - defineProperty方法攔截了Object.defineProperty操作。
- getOwnPropertyDescriptor方法攔截Object.getOwnPropertyDescriptor()，返回一個(gè)屬性描述對(duì)象或者undefined
- getPrototypeOf方法主要用來攔截獲取對(duì)象原型。
- isExtensible方法攔截Object.isExtensible操作。
- ownKeys方法用來攔截對(duì)象自身屬性的讀取操作。
- preventExtensions方法攔截Object.preventExtensions()。該方法必須返回一個(gè)布爾值，否則會(huì)被自動(dòng)轉(zhuǎn)為布爾值。
- setPrototypeOf方法主要用來攔截Object.setPrototypeOf方法。
apply方法的使用
var target = function () { return 'I am the target'; };
var handler = {
apply: function () {
return 'I am the proxy';
}
};
var p = new Proxy(target, handler);
console.log(p())
// "I am the proxy"
has方法的使用
var handler = {
has (target, key) {
if (key[0] === '_') {
return false;
}
return key in target;
}
};
var target = { _prop: 'foo', prop: 'foo' };
var proxy = new Proxy(target, handler);
console.log('_prop' in proxy)
// false
construct方法的使用
var p = new Proxy(function () {}, {
construct: function(target, args) {
console.log('called: ' + args.join(', '));
return { value: args[0] * 5 + 12 };
}
});
console.log(new p(1))
console.log(new p(1).value)
// call: 1
// { value: 17 }
// call: 1
// 17
所以，我理解的 Proxy 對(duì)象主要功能就是攔截對(duì)象屬性的一些操作。
Reflect
我理解的Reflect對(duì)象：
- 是Object的高級(jí)版本，Object對(duì)對(duì)象的操作方法Reflect對(duì)象都有，并且未來操作對(duì)象的新方法只放在Reflect對(duì)象中有。
- 發(fā)生錯(cuò)誤不會(huì)報(bào)錯(cuò)而是返回false，可直接在判斷中使用。
- 讓Object操作都變成函數(shù)行為，統(tǒng)一表現(xiàn)形式。某些Object操作是命令式，比如
name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)讓它們變成了函數(shù)行為。 - Reflect對(duì)象的方法與Proxy對(duì)象的方法一一對(duì)應(yīng)，只要是Proxy對(duì)象的方法，就能在Reflect對(duì)象上找到對(duì)應(yīng)的方法。Proxy對(duì)象攔截對(duì)象屬性方法，進(jìn)行重新定義。而Reflect對(duì)象立即執(zhí)行對(duì)象屬性方法。下面例子中使用set和get做演示。
var myObject = {
foo: 1,
bar: 2,
get baz() {
return this.foo + this.bar;
},
}
console.log(Reflect.get(myObject, 'foo'))
console.log(Reflect.get(myObject, 'bar'))
console.log(Reflect.get(myObject, 'baz'))
console.log(Reflect.set(myObject, 'foo', 100))
console.log(myObject.foo)
// 1
// 2
// 3
// true
// 100
Promise 對(duì)象
Promise 對(duì)象登場啦~這是 ES6 語法中非常常用的對(duì)象。
我理解的 Promise 對(duì)象：
- Promise 對(duì)象讓異步操作的寫法從回調(diào)函數(shù)變?yōu)殒準(zhǔn)讲僮鳎勺x性更強(qiáng)。
- Promise 對(duì)象一旦改變，就會(huì)鎖死，不再改變。
基本用法
Promise 的定義，定義一個(gè) Promise對(duì)象，參數(shù)為resolve和reject，resolve為執(zhí)行成功的方法，而reject為執(zhí)行失敗的方法。
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 異步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
基本調(diào)用方式
promise.then(function(value) {
// success
}, function(error) {
// failure
});
Promise 函數(shù)一旦用 new 指令創(chuàng)建，立即執(zhí)行。并且數(shù)據(jù)為不可變。
let success = true
let name = 'jack'
const promise = new Promise((resolve, reject) => {
console.log('create')
if (success) {
resolve(name)
} else {
reject('error promise')
}
})
success = false
name = 'rose'
console.log('before then')
promise.then(value => {
console.log(value)
}).catch(error => {
console.log(error)
})
// create
// before then
// jack
由此可見，在定義了Promise之后，我們再去修改 name 返回的還是定義Promise時(shí)候的值。說明了Promise對(duì)象定義即執(zhí)行，并且不可變。
Promise 推薦使用 promise.then().catch() 寫法。
// bad
promise.then(value => {
console.log(value)
}, error => {
console.log(error)
})
// good
promise.then(value => {
console.log(value)
}).catch(error => {
console.log(error)
})
then方法鏈?zhǔn)綄懛ū磉_(dá)，then方法的返回值可以傳遞給下一個(gè)then方法。
const promise = new Promise((resolve, reject) => {
resolve('jack')
})
promise.then(value => {
console.log(value)
return 'violet' + value
}).then(value => {
console.log(value)
return 'welcome to ' + value
}).then(value => {
console.log(value)
return value + ' blog'
}).then(value => {
console.log(value)
})
// jack
// violetjack
// welcome to violetjack
// welcome to violetjack blog
catch方法用于捕獲Promise對(duì)象的異常行為（可能是 reject 函數(shù)返回的錯(cuò)誤，也可能是throw new Error('error')）。
Promise.all() 方法將多個(gè)Promise實(shí)例包裝成一個(gè)Promise實(shí)例。如下示例，如果p1、p2、p3都執(zhí)行成功，則執(zhí)行then方法，返回的參數(shù)為三個(gè)實(shí)例的參數(shù)數(shù)組；如果有任意一個(gè)Promise實(shí)例報(bào)錯(cuò)，則在catch方法中返回該實(shí)例的錯(cuò)誤信息。
const p1 = new Promise((resolve, reject) => {
resolve('jack')
})
const p2 = new Promise((resolve, reject) => {
// resolve('rose')
reject('rose error')
})
const p3 = new Promise((resolve, reject) => {
resolve('james')
})
Promise.all([p1, p2, p3]).then(values => {
console.log(values)
}).catch(error => {
console.log(error)
})
// ["jack", "rose", "james"]
// rose error
Promise.race() 方法用法與 all 方法一致，唯一不同點(diǎn)就是多個(gè) Promise實(shí)例中只作用域最快有反映的Promise實(shí)例，并且返回該實(shí)例的正確或錯(cuò)誤信息。如果多個(gè)Promise同時(shí)觸發(fā)，按順序返回第一個(gè)Promise實(shí)例。
Promise.resolve() 和 Promise.reject()
Promise.resolve('foo')
// 等價(jià)于
new Promise(resolve => resolve('foo'))
const p = Promise.reject('出錯(cuò)了');
// 等同于
const p = new Promise((resolve, reject) => reject('出錯(cuò)了'))
Iterator 和 for...of 循環(huán)
默認(rèn)Iterator接口部署在數(shù)據(jù)對(duì)象的 Symbol.iterator 屬性中，Symbol.iterator 屬性本身是一個(gè)函數(shù)，就是當(dāng)前數(shù)據(jù)結(jié)構(gòu)默認(rèn)的遍歷器生成函數(shù)。只要數(shù)據(jù)對(duì)象有了 Symbol.iterator 屬性就可以進(jìn)行遍歷。如下對(duì)象添加了 Symbol.iterator 屬性后實(shí)現(xiàn)了遍歷操作。
let obj = {
data: [ 'hello', 'world' ],
[Symbol.iterator]() {
const self = this;
let index = 0;
return {
next() {
if (index < self.data.length) {
return {
value: self.data[index++],
done: false
};
} else {
return { value: undefined, done: true };
}
}
};
}
};
console.log([...obj])
// ["hello", "world"]
Iterator 接口主要供for...of消費(fèi)。
for...in 循環(huán)讀取鍵名，for...of 循環(huán)讀取鍵值。
const arr = ['red', 'green', 'blue'];
for(let v of arr) {
console.log(v); // red green blue
}
for(let k in arr){
console.log(k) // 0 1 2
}
Generator 函數(shù)的語法
一種異步解決方案。函數(shù)執(zhí)行返回一個(gè)對(duì)象，而函數(shù)中的數(shù)據(jù)只有在對(duì)象使用 next() 方法才會(huì)返回下一個(gè)用 yield 或者 return 定義的數(shù)據(jù)，否則對(duì)象狀態(tài)就凝固在那里。
function* helloGenerator() {
yield 'hello'
yield 'world'
return 'generator'
}
var h = helloGenerator()
console.log(h.next())
console.log(h.next())
console.log(h.next())
console.log(h.next())
// { value: 'hello', done: false}
// { value: 'world', done: false}
// { value: 'generator', done: true}
// { value: undefined, done: true}
next() 方法傳值—— next() 方法返回的是 yield 表達(dá)式的計(jì)算結(jié)果。如果 next(value) 方法中傳入value參數(shù)，則參數(shù)將替換上一個(gè) yield 數(shù)據(jù)。如下示例中，12 替換了(yield (x + 1))，13 替換了yield (y / 3)，最后得到結(jié)果為42。
function* foo(x) {
var y = 2 * (yield (x + 1));
// value = 5 + 1
var z = yield (y / 3);
// y = 2 * 12 value = 24 / 3
return (x + y + z);
// z = 13 y = 24 z = 13 value = 5 + 24 + 13
}
var a = foo(5);
a.next() // Object{value:6, done:false}
// 如果不傳遞數(shù)據(jù)，則y=NaN
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}
var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }
throw方法用于捕捉錯(cuò)誤，return方法類似于 Genterator 函數(shù)的 return xxx 返回某個(gè)值，隨后再使用next方法返回的都是 undefined
對(duì)于 next、throw、return，引用書上的解釋更清晰點(diǎn)。
next()是將yield表達(dá)式替換成一個(gè)值。
throw()是將yield表達(dá)式替換成一個(gè)throw語句。
return()是將yield表達(dá)式替換成一個(gè)return語句。
yield* 用于將其他 Generator 函數(shù)合并到當(dāng)前函數(shù)中，用法如下：
function* bar() {
yield 'a'
yield 'b'
}
function* foo() {
yield 'x'
yield* bar()
yield 'y'
}
for (let v of foo()){
console.log(v)
}
// x
// a
// b
// y
Generator 函數(shù)不能直接用 new 指令實(shí)例化對(duì)象，需要包裝為普通函數(shù)再 new
function* gen() {
this.a = 1;
yield this.b = 2;
yield this.c = 3;
}
function F() {
return gen.call(gen.prototype);
}
var f = new F();
f.next(); // Object {value: 2, done: false}
f.next(); // Object {value: 3, done: false}
f.next(); // Object {value: undefined, done: true}
f.a // 1
f.b // 2
f.c // 3
自動(dòng)執(zhí)行所有Generator函數(shù)的方法：
function run(fn) {
var gen = fn();
function next(err, data) {
var result = gen.next(data);
if (result.done) return;
result.value(next);
}
next();
}
function* g() {
// ...
}
run(g);
以上自動(dòng)執(zhí)行器還可以使用 co 模塊來實(shí)現(xiàn)。
async 函數(shù)
async函數(shù)用于處理異步操作，它是對(duì)Generator函數(shù)的改進(jìn)。它相比于Generator有以下幾個(gè)優(yōu)點(diǎn)：
- 內(nèi)置執(zhí)行器：相比于Generator 要自定義或者用 co 模塊來實(shí)現(xiàn)自動(dòng)執(zhí)行器效果，async函數(shù)自帶自動(dòng)執(zhí)行器。
- 更好的語義：async 和 await，比起 * 和 yield，語義更清楚了。async表示函數(shù)里有異步操作，await表示緊跟在后面的表達(dá)式需要等待結(jié)果。
- 更廣的適用性：co模塊約定，yield命令后面只能是 Thunk 函數(shù)或 Promise 對(duì)象，而async函數(shù)的await命令后面，可以是 Promise 對(duì)象和原始類型的值（數(shù)值、字符串和布爾值，但這時(shí)等同于同步操作）。
- 返回Promise：async函數(shù)的返回值是 Promise 對(duì)象，這比 Generator 函數(shù)的返回值是 Iterator 對(duì)象方便多了。你可以用then方法指定下一步的操作。
我個(gè)人對(duì)async的感覺是寫法方便、代碼理解簡單、代碼寫法也符合邏輯、操作異步行為方便。
下面寫了 Generator 函數(shù)和 async 函數(shù)實(shí)現(xiàn)異步的代碼的對(duì)比。
const readFile = function (fileName) {
return new Promise(function (resolve, reject) {
setTimeout(() => {
console.log(`reading ${fileName}`)
resolve(fileName)
}, 1000)
});
};
// Generator 寫法
const gen = function* () {
const f1 = yield readFile('/etc/fstab');
const f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
var g = gen()
g.next().value.then(value => {
g.next(value).value.then(value => {
g.next(value)
})
})
// async 寫法
async function gan() {
const f1 = await readFile('/etc/fstab');
const f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
}
gan()
兩種函數(shù)的實(shí)現(xiàn)結(jié)果是一樣的。
但從上面的例子中可以看出，Generator 函數(shù)需要不斷調(diào)用next方法，并且將上一個(gè)next方法的結(jié)果傳遞給當(dāng)前next方法當(dāng)做參數(shù)。而async函數(shù)直接調(diào)用函數(shù)本身就會(huì)自動(dòng)往下執(zhí)行。Generator多了一步執(zhí)行的過程。
另外，async await的語義很清晰，就算沒學(xué)過ES6的大致都能看懂是什么意思啦~
Class
class其實(shí)就是一個(gè)函數(shù)實(shí)例化的語法糖具體功能也類似Java這類有Class的語言
所以，下面兩種寫法的結(jié)果是相等的。
傳統(tǒng)寫法
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);
console.log(p)
ES6 Class寫法
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
var p = new Point(1, 2);
console.log(p)
對(duì)象結(jié)果如上圖所示，構(gòu)造函數(shù)中this對(duì)象的屬性在實(shí)例中，而Class里面的函數(shù)再實(shí)例對(duì)象的
__proto__ 中。使用
new target 在構(gòu)造函數(shù)中判斷對(duì)象是否為 new 指令創(chuàng)建的。
// 另一種寫法
function Person(name) {
if (new.target === Person) {
this.name = name;
} else {
throw new Error('必須使用 new 命令生成實(shí)例');
}
}
var person = new Person('張三'); // 正確
var notAPerson = Person.call(person, '張三'); // 報(bào)錯(cuò)
修飾器
類似于Java的修飾器 @Override ， 現(xiàn)有一個(gè)提案，將修飾器加入到 ECMAScript 中。
Module
在 ES6 中添加了模塊化功能，很常見用法也很簡單。
模塊加載
import { stat, exists, readFile } from 'fs'; // 多個(gè)模塊加載
import { lastName as surname } from './profile.js'; // 模塊加載重命名
import * as circle from './circle'; // 整理加載
模塊輸出
// 輸出變量
export let a = 100
// 輸出方法
export function hello() {
console.log('hello world')
}
// 輸出多個(gè)變量
const b = 200
const c = 300
const d = 400
export {b, c, d}
// 輸出變量重命名
export {b as value}
// 輸出默認(rèn)值
export default function () {
console.log('hello default')
}
CommonJS 語法中模塊輸出和加載的寫法
let { stat, exists, readFile } = require('fs');
module.exports = {
counter: counter,
incCounter: incCounter,
};
ArrayBuffer
ArrayBuffer對(duì)象、TypedArray視圖和DataView視圖是 JavaScript 操作二進(jìn)制數(shù)據(jù)的一個(gè)接口。
二進(jìn)制數(shù)組由三類對(duì)象組成。
（1）ArrayBuffer對(duì)象：代表內(nèi)存之中的一段二進(jìn)制數(shù)據(jù)，可以通過“視圖”進(jìn)行操作。“視圖”部署了數(shù)組接口，這意味著，可以用數(shù)組的方法操作內(nèi)存。
（2）TypedArray視圖：共包括 9 種類型的視圖，比如Uint8Array（無符號(hào) 8 位整數(shù)）數(shù)組視圖, Int16Array（16 位整數(shù)）數(shù)組視圖, Float32Array（32 位浮點(diǎn)數(shù)）數(shù)組視圖等等。
（3）DataView視圖：可以自定義復(fù)合格式的視圖，比如第一個(gè)字節(jié)是 Uint8（無符號(hào) 8 位整數(shù)）、第二、三個(gè)字節(jié)是 Int16（16 位整數(shù)）、第四個(gè)字節(jié)開始是 Float32（32 位浮點(diǎn)數(shù)）等等，此外還可以自定義字節(jié)序。
簡單說，ArrayBuffer對(duì)象代表原始的二進(jìn)制數(shù)據(jù)，TypedArray 視圖用來讀寫簡單類型的二進(jìn)制數(shù)據(jù)，DataView視圖用來讀寫復(fù)雜類型的二進(jìn)制數(shù)據(jù)。
這方面知識(shí)點(diǎn)不太常用，了解下，等到用的時(shí)候查查就是了。
其他
- 編程風(fēng)格 —— 主要參考了 Airbnb 公司的 JavaScript 風(fēng)格規(guī)范。
- 讀懂 ECMAScript 規(guī)格 —— 對(duì)于規(guī)格的學(xué)習(xí)建議，阮一峰老師的建議如下：
規(guī)格文件是計(jì)算機(jī)語言的官方標(biāo)準(zhǔn)，詳細(xì)描述語法規(guī)則和實(shí)現(xiàn)方法。
一般來說，沒有必要閱讀規(guī)格，除非你要寫編譯器。因?yàn)橐?guī)格寫得非常抽象和精煉，又缺乏實(shí)例，不容易理解，而且對(duì)于解決實(shí)際的應(yīng)用問題，幫助不大。但是，如果你遇到疑難的語法問題，實(shí)在找不到答案，這時(shí)可以去查看規(guī)格文件，了解語言標(biāo)準(zhǔn)是怎么說的。規(guī)格是解決問題的“最后一招”。
最后
好啦~終于把下半部分寫完了。有點(diǎn)虎頭蛇尾，一開始寫的東西很具體，到后來內(nèi)容有點(diǎn)少。主要是因?yàn)榍懊娌糠治矣X得是比較麻煩和常用的。寫這篇博客主要是系統(tǒng)復(fù)習(xí)下ES6語法，簡略地提一下各個(gè)語法的用法、注意點(diǎn)。大致知道了有些什么，以后遇到問題知道如何查資料如何解決就好了。
感覺自己寫博客速度忒慢了，寫ES6筆記斷斷續(xù)續(xù)花了我十個(gè)小時(shí)……
最后呢，還是那句話——由自己整理寫出博客的知識(shí)點(diǎn)才是真正牢牢掌握的知識(shí)點(diǎn)！至此，我對(duì)ES6語法的理解加深了很多。看到此文的你可以去試試用寫博客的方式來復(fù)習(xí)知識(shí)點(diǎn)哦~
希望我寫的東西能幫助到一些朋友。
關(guān)于我
VioletJack，內(nèi)驅(qū)工程師專注于Vue前端相關(guān)的知識(shí)點(diǎn)整理、源碼學(xué)習(xí)、內(nèi)容分享。歡迎喜歡我文章的朋友關(guān)注我哦，我會(huì)努力產(chǎn)出優(yōu)質(zhì)內(nèi)容讓我們始終相信：code change world!
