### 1. 屬性的簡潔表示法 ES6 允許直接寫入變量和函數，作為對象的屬性和方法。這樣的書寫更加簡潔。 ~~~ const foo = 'bar'; const baz = {foo}; baz // {foo: "bar"} // 等同于 const baz = {foo: foo}; ~~~ 上面代碼表明，ES6 允許在對象之中，直接寫變量。這時，屬性名為變量名, 屬性值為變量的值。下面是另一個例子。 ~~~ function f(x, y) { return {x, y}; } // 等同于 function f(x, y) { return {x: x, y: y}; } f(1, 2) // Object {x: 1, y: 2} ~~~ 除了屬性簡寫，方法也可以簡寫。 ~~~ const o = { method() { return "Hello!"; } }; // 等同于 const o = { method: function() { return "Hello!"; } }; ~~~ 下面是一個實際的例子。 ~~~ let birth = '2000/01/01'; const Person = { name: '張三', //等同于birth: birth birth, // 等同于hello: function ()... hello() { console.log('我的名字是', this.name); } }; ~~~ 這種寫法用于函數的返回值，將會非常方便。 ~~~ function getPoint() { const x = 1; const y = 10; return {x, y}; } getPoint() // {x:1, y:10} ~~~ CommonJS 模塊輸出一組變量，就非常合適使用簡潔寫法。 ~~~ let ms = {}; function getItem (key) { return key in ms ? ms[key] : null; } function setItem (key, value) { ms[key] = value; } function clear () { ms = {}; } module.exports = { getItem, setItem, clear }; // 等同于 module.exports = { getItem: getItem, setItem: setItem, clear: clear }; ~~~ 屬性的賦值器（setter）和取值器（getter），事實上也是采用這種寫法。 ~~~ const cart = { _wheels: 4, get wheels () { return this._wheels; }, set wheels (value) { if (value < this._wheels) { throw new Error('數值太小了！'); } this._wheels = value; } } ~~~ 注意，簡潔寫法的屬性名總是字符串，這會導致一些看上去比較奇怪的結果。 ~~~ const obj = { class () {} }; // 等同于 var obj = { 'class': function() {} }; ~~~ 上面代碼中，class是字符串，所以不會因為它屬于關鍵字，而導致語法解析報錯。 如果某個方法的值是一個 Generator 函數，前面需要加上星號。 ~~~ const obj = { * m() { yield 'hello world'; } }; ~~~ ### 2. 屬性名表達式 JavaScript 定義對象的屬性，有兩種方法。 ~~~ // 方法一 obj.foo = true; // 方法二 obj['a' + 'bc'] = 123; ~~~ 上面代碼的方法一是直接用標識符作為屬性名，方法二是用表達式作為屬性名，這時要將表達式放在方括號之內。 但是，如果使用字面量方式定義對象（使用大括號），在 ES5 中只能使用方法一（標識符）定義屬性。 ~~~ var obj = { foo: true, abc: 123 }; ~~~ ES6 允許字面量定義對象時，用方法二（表達式）作為對象的屬性名，即把表達式放在方括號內。 ~~~ let propKey = 'foo'; let obj = { [propKey]: true, ['a' + 'bc']: 123 }; ~~~ 下面是另一個例子。 ~~~ let lastWord = 'last word'; const a = { 'first word': 'hello', [lastWord]: 'world' }; a['first word'] // "hello" a[lastWord] // "world" a['last word'] // "world" ~~~ 表達式還可以用于定義方法名。 ~~~ let obj = { ['h' + 'ello']() { return 'hi'; } }; obj.hello() // hi ~~~ 注意，屬性名表達式與簡潔表示法，不能同時使用，會報錯。 ~~~ // 報錯 const foo = 'bar'; const bar = 'abc'; const baz = { [foo] }; // 正確 const foo = 'bar'; const baz = { [foo]: 'abc'}; ~~~ 注意，屬性名表達式如果是一個對象，默認情況下會自動將對象轉為字符串[object Object]，這一點要特別小心。 ~~~ const keyA = {a: 1}; const keyB = {b: 2}; const myObject = { [keyA]: 'valueA', [keyB]: 'valueB' }; myObject // Object {[object Object]: "valueB"} ~~~ ~~~ 上面代碼中，[keyA]和[keyB]得到的都是[object Object]，所以[keyB]會把[keyA]覆蓋掉， 而myObject最后只有一個[object Object]屬性。 ~~~ ### 3. 方法的 name 屬性 函數的name屬性，返回函數名。對象方法也是函數，因此也有name屬性。 ~~~ const person = { sayName() { console.log('hello!'); }, }; person.sayName.name // "sayName" ~~~ 上面代碼中，方法的name屬性返回函數名（即方法名）。 如果對象的方法使用了取值函數（getter）和存值函數（setter），則name屬性不是在該方法上面，而是該方法的屬性的描述對象的get和set屬性上面，返回值是方法名前加上get和set。 ~~~ const obj = { get foo() {}, set foo(x) {} }; obj.foo.name // TypeError: Cannot read property 'name' of undefined const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo'); descriptor.get.name // "get foo" descriptor.set.name // "set foo" ~~~ 有兩種特殊情況：bind方法創造的函數，name屬性返回bound加上原函數的名字；Function構造函數創造的函數，name屬性返回anonymous。 ~~~ (new Function()).name // "anonymous" var doSomething = function() { // ... }; doSomething.bind().name // "bound doSomething" ~~~ 如果對象的方法是一個 Symbol 值，那么name屬性返回的是這個 Symbol 值的描述。 ~~~ const key1 = Symbol('description'); const key2 = Symbol(); let obj = { [key1]() {}, [key2]() {}, }; obj[key1].name // "[description]" obj[key2].name // "" ~~~ 上面代碼中，key1對應的 Symbol 值有描述，key2沒有。 ### 4. Object.is() ES5 比較兩個值是否相等，只有兩個運算符：相等運算符（==）和嚴格相等運算符（===）。它們都有缺點，前者會自動轉換數據類型，后者的NaN不等于自身，以及+0等于-0。JavaScript 缺乏一種運算，在所有環境中，只要兩個值是一樣的，它們就應該相等。 ES6 提出“Same-value equality”（同值相等）算法，用來解決這個問題。Object.is就是部署這個算法的新方法。 ** 它用來比較兩個值是否嚴格相等 ** 與嚴格比較運算符（===）的行為基本一致。 ~~~ Object.is('foo', 'foo') // true Object.is({}, {}) // false ~~~ 不同之處只有兩個：一是+0不等于-0，二是NaN等于自身。 ~~~ +0 === -0 //true NaN === NaN // false Object.is(+0, -0) // false Object.is(NaN, NaN) // true ~~~ ES5 可以通過下面的代碼, 部署Object.is。 ~~~ Object.defineProperty(Object, 'is', { value: function(x, y) { if (x === y) { // 針對+0 不等于 -0的情況 return x !== 0 || 1 / x === 1 / y; } // 針對NaN的情況 return x !== x && y !== y; }, configurable: true, enumerable: false, writable: true }); ~~~ ### 5. Object.assign() 基本用法 Object.assign方法用于對象的合并，將源對象（source）的所有可枚舉屬性，復制到目標對象（target）。 ~~~ const target = { a: 1 }; const source1 = { b: 2 }; const source2 = { c: 3 }; Object.assign(target, source1, source2); target // {a:1, b:2, c:3} ~~~ **Object.assign方法的第一個參數是目標對象，后面的參數都是源對象。** > 注意，如果目標對象與源對象有同名屬性，或多個源對象有同名屬性，則后面的屬性會覆蓋前面的屬性。 ~~~ const target = { a: 1, b: 1 }; const source1 = { b: 2, c: 2 }; const source2 = { c: 3 }; Object.assign(target, source1, source2); target // {a:1, b:2, c:3} ~~~ 如果只有一個參數，Object.assign會直接返回該參數。 ~~~ const obj = {a: 1}; Object.assign(obj) === obj // true ~~~ > 如果該參數不是對象，則會先轉成對象，然后返回。 `typeof Object.assign(2) // "object"` 由于undefined和null無法轉成對象，所以如果它們作為參數，就會報錯。 ~~~ Object.assign(undefined) // 報錯 Object.assign(null) // 報錯 ~~~ > 如果非對象參數出現在源對象的位置（即非首參數），那么處理規則有所不同。首先，這些參數都會轉成對象，如果無法轉成對象，就會跳過。這意味著，如果undefined和null不在首參數，就不會報錯。 ~~~ let obj = {a: 1}; Object.assign(obj, undefined) === obj // true Object.assign(obj, null) === obj // true ~~~ 其他類型的值（即數值、字符串和布爾值）不在首參數，也不會報錯。但是，除了字符串會以數組形式，拷貝入目標對象，其他值都不會產生效果。 ~~~ const v1 = 'abc'; const v2 = true; const v3 = 10; const obj = Object.assign({}, v1, v2, v3); console.log(obj); // { "0": "a", "1": "b", "2": "c" } ~~~ 上面代碼中，v1、v2、v3分別是字符串、布爾值和數值，結果只有字符串合入目標對象（以字符數組的形式），數值和布爾值都會被忽略。這是因為只有字符串的包裝對象，會產生可枚舉屬性。 ~~~ Object(true) // {[[PrimitiveValue]]: true} Object(10) // {[[PrimitiveValue]]: 10} Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"} ~~~ 上面代碼中，布爾值、數值、字符串分別轉成對應的包裝對象，可以看到它們的原始值都在包裝對象的內部屬性[[PrimitiveValue]]上面，這個屬性是不會被Object.assign拷貝的。只有字符串的包裝對象，會產生可枚舉的實義屬性，那些屬性則會被拷貝。 Object.assign拷貝的屬性是有限制的，只拷貝源對象的自身屬性（不拷貝繼承屬性），也不拷貝不可枚舉的屬性（enumerable: false）。 ~~~ Object.assign({b: 'c'}, Object.defineProperty({}, 'invisible', { enumerable: false, value: 'hello' }) ) // { b: 'c' } ~~~ 上面代碼中，Object.assign要拷貝的對象只有一個不可枚舉屬性invisible，這個屬性并沒有被拷貝進去。 屬性名為 Symbol 值的屬性，也會被Object.assign拷貝。 ~~~ Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' }) // { a: 'b', Symbol(c): 'd' } ~~~ * 注意點 （1）淺拷貝 Object.assign方法實行的是淺拷貝，而不是深拷貝。也就是說，如果源對象某個屬性的值是對象，那么目標對象拷貝得到的是這個對象的引用。 ~~~ const obj1 = {a: {b: 1}}; const obj2 = Object.assign({}, obj1); obj1.a.b = 2; obj2.a.b // 2 ~~~ 上面代碼中，源對象obj1的a屬性的值是一個對象，Object.assign拷貝得到的是這個對象的引用。這個對象的任何變化，都會反映到目標對象上面。 （2）同名屬性的替換 對于這種嵌套的對象，一旦遇到同名屬性，Object.assign的處理方法是替換，而不是添加。 ~~~ const target = { a: { b: 'c', d: 'e' } } const source = { a: { b: 'hello' } } Object.assign(target, source) // { a: { b: 'hello' } } ~~~ 上面代碼中，target對象的a屬性被source對象的a屬性整個替換掉了，而不會得到{ a: { b: 'hello', d: 'e' } }的結果。這通常不是開發者想要的，需要特別小心。 一些函數庫提供Object.assign的定制版本（比如 Lodash 的_.defaultsDeep方法），可以得到深拷貝的合并。 （3）數組的處理 Object.assign可以用來處理數組，但是會把數組視為對象。 ~~~ Object.assign([1, 2, 3], [4, 5]) // [4, 5, 3] ~~~ 上面代碼中，Object.assign把數組視為屬性名為 0、1、2 的對象，因此源數組的 0 號屬性4覆蓋了目標數組的 0 號屬性1。 （4）取值函數的處理 Object.assign只能進行值的復制，如果要復制的值是一個取值函數，那么將求值后再復制。 ~~~ const source = { get foo() { return 1 } }; const target = {}; Object.assign(target, source) // { foo: 1 } ~~~ 上面代碼中，source對象的foo屬性是一個取值函數，Object.assign不會復制這個取值函數，只會拿到值以后，將這個值復制過去。 常見用途 Object.assign方法有很多用處。 （1）為對象添加屬性 ~~~ class Point { constructor(x, y) { Object.assign(this, {x, y}); } } ~~~ 上面方法通過Object.assign方法，將x屬性和y屬性添加到Point類的對象實例。 （2）為對象添加方法 ~~~ Object.assign(SomeClass.prototype, { someMethod(arg1, arg2) { ··· }, anotherMethod() { ··· } }); // 等同于下面的寫法 SomeClass.prototype.someMethod = function (arg1, arg2) { ··· }; SomeClass.prototype.anotherMethod = function () { ··· }; ~~~ 上面代碼使用了對象屬性的簡潔表示法，直接將兩個函數放在大括號中，再使用assign方法添加到SomeClass.prototype之中。 （3）克隆對象 ~~~ function clone(origin) { return Object.assign({}, origin); } ~~~ 上面代碼將原始對象拷貝到一個空對象，就得到了原始對象的克隆。 不過，采用這種方法克隆，只能克隆原始對象自身的值，不能克隆它繼承的值。如果想要保持繼承鏈，可以采用下面的代碼。 ~~~ function clone(origin) { let originProto = Object.getPrototypeOf(origin); return Object.assign(Object.create(originProto), origin); } ~~~ （4）合并多個對象 將多個對象合并到某個對象。 ~~~ const merge = (target, ...sources) => Object.assign(target, ...sources); ~~~ 如果希望合并后返回一個新對象，可以改寫上面函數，對一個空對象合并。 ~~~ const merge = (...sources) => Object.assign({}, ...sources); ~~~ （5）為屬性指定默認值 ~~~ const DEFAULTS = { logLevel: 0, outputFormat: 'html' }; function processContent(options) { options = Object.assign({}, DEFAULTS, options); console.log(options); // ... } ~~~ 上面代碼中，DEFAULTS對象是默認值，options對象是用戶提供的參數。Object.assign方法將DEFAULTS和options合并成一個新對象，如果兩者有同名屬性，則option的屬性值會覆蓋DEFAULTS的屬性值。 注意，由于存在淺拷貝的問題，DEFAULTS對象和options對象的所有屬性的值，最好都是簡單類型，不要指向另一個對象。否則，DEFAULTS對象的該屬性很可能不起作用。 ~~~ const DEFAULTS = { url: { host: 'example.com', port: 7070 }, }; processContent({ url: {port: 8000} }) // { // url: {port: 8000} // } ~~~ 上面代碼的原意是將url.port改成 8000，url.host不變。實際結果卻是options.url覆蓋掉DEFAULTS.url，所以url.host就不存在了。 ### 6. 屬性的可枚舉性和遍歷 可枚舉性 對象的每個屬性都有一個描述對象（Descriptor），用來控制該屬性的行為。Object.getOwnPropertyDescriptor方法可以獲取該屬性的描述對象。 ~~~ let obj = { foo: 123 }; Object.getOwnPropertyDescriptor(obj, 'foo') // { // value: 123, // writable: true, // enumerable: true, // configurable: true // } ~~~ 描述對象的enumerable屬性，稱為”可枚舉性“，如果該屬性為false，就表示某些操作會忽略當前屬性。 * 目前，有四個操作會忽略enumerable為false的屬性。 > for...in循環：只遍歷對象自身的和繼承的可枚舉的屬性。 > Object.keys()：返回對象自身的所有可枚舉的屬性的鍵名。 > JSON.stringify()：只串行化對象自身的可枚舉的屬性。 > Object.assign()： 忽略enumerable為false的屬性，只拷貝對象自身的可枚舉的屬性。 這四個操作之中，前三個是 ES5 就有的，最后一個Object.assign()是 ES6 新增的。其中，只有for...in會返回繼承的屬性，其他三個方法都會忽略繼承的屬性，只處理對象自身的屬性。實際上，引入“可枚舉”（enumerable）這個概念的最初目的，就是讓某些屬性可以規避掉for...in操作，不然所有內部屬性和方法都會被遍歷到。比如，對象原型的toString方法，以及數組的length屬性，就通過“可枚舉性”，從而避免被for...in遍歷到。 ~~~ Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable // false Object.getOwnPropertyDescriptor([], 'length').enumerable // false ~~~ 上面代碼中，toString和length屬性的enumerable都是false，因此for...in不會遍歷到這兩個繼承自原型的屬性。 另外，ES6 規定，所有 Class 的原型的方法都是不可枚舉的。 ~~~ Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, 'foo').enumerable // false ~~~ 總的來說，操作中引入繼承的屬性會讓問題復雜化，大多數時候，我們只關心對象自身的屬性。所以，盡量不要用for...in循環，而用Object.keys()代替。 ### 7. 屬性的遍歷 ES6 一共有 5 種方法可以遍歷對象的屬性。 * （1）`for...in` for...in循環遍歷對象自身的和繼承的可枚舉屬性（不含 Symbol 屬性）。 * （2）`Object.keys(obj)` Object.keys返回一個數組，包括對象自身的（不含繼承的）所有可枚舉屬性（不含 Symbol 屬性）的鍵名。 * （3）`Object.getOwnPropertyNames(obj)` Object.getOwnPropertyNames返回一個數組，包含對象自身的所有屬性（不含 Symbol 屬性，但是包括不可枚舉屬性）的鍵名。 * （4）`Object.getOwnPropertySymbols(obj)` Object.getOwnPropertySymbols返回一個數組，包含對象自身的所有 Symbol 屬性的鍵名。 * （5）`Reflect.ownKeys(obj)` Reflect.ownKeys返回一個數組，包含對象自身的所有鍵名，不管鍵名是 Symbol 或字符串，也不管是否可枚舉。 以上的 5 種方法遍歷對象的鍵名，都遵守同樣的屬性遍歷的次序規則。 首先遍歷所有數值鍵，按照數值升序排列。 其次遍歷所有字符串鍵，按照加入時間升序排列。 最后遍歷所有 Symbol 鍵，按照加入時間升序排列。 ~~~ Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 }) // ['2', '10', 'b', 'a', Symbol()] ~~~ 上面代碼中，Reflect.ownKeys方法返回一個數組，包含了參數對象的所有屬性。這個數組的屬性次序是這樣的，首先是數值屬性2和10，其次是字符串屬性b和a，最后是 Symbol 屬性。 ### 8. `Object.getOwnPropertyDescriptors()` 前面說過，Object.getOwnPropertyDescriptor方法會返回某個對象屬性的描述對象（descriptor）。ES2017 引入了Object.getOwnPropertyDescriptors方法，返回指定對象所有自身屬性（非繼承屬性）的描述對象。 ~~~ const obj = { foo: 123, get bar() { return 'abc' } }; Object.getOwnPropertyDescriptors(obj) // { foo: // { value: 123, // writable: true, // enumerable: true, // configurable: true }, // bar: // { get: [Function: get bar], // set: undefined, // enumerable: true, // configurable: true } } ~~~ 上面代碼中，Object.getOwnPropertyDescriptors方法返回一個對象，所有原對象的屬性名都是該對象的屬性名，對應的屬性值就是該屬性的描述對象。 該方法的實現非常容易。 ~~~ function getOwnPropertyDescriptors(obj) { const result = {}; for (let key of Reflect.ownKeys(obj)) { result[key] = Object.getOwnPropertyDescriptor(obj, key); } return result; } ~~~ 該方法的引入目的，主要是為了解決Object.assign()無法正確拷貝get屬性和set屬性的問題。 ~~~ const source = { set foo(value) { console.log(value); } }; const target1 = {}; Object.assign(target1, source); Object.getOwnPropertyDescriptor(target1, 'foo') // { value: undefined, // writable: true, // enumerable: true, // configurable: true } ~~~ 上面代碼中，source對象的foo屬性的值是一個賦值函數，Object.assign方法將這個屬性拷貝給target1對象，結果該屬性的值變成了undefined。這是因為Object.assign方法總是拷貝一個屬性的值，而不會拷貝它背后的賦值方法或取值方法。 這時，Object.getOwnPropertyDescriptors方法配合Object.defineProperties方法，就可以實現正確拷貝。 ~~~ const source = { set foo(value) { console.log(value); } }; const target2 = {}; Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source)); Object.getOwnPropertyDescriptor(target2, 'foo') // { get: undefined, // set: [Function: set foo], // enumerable: true, // configurable: true } ~~~ 上面代碼中，兩個對象合并的邏輯可以寫成一個函數。 ~~~ const shallowMerge = (target, source) => Object.defineProperties( target, Object.getOwnPropertyDescriptors(source) ); ~~~ Object.getOwnPropertyDescriptors方法的另一個用處，是配合Object.create方法，將對象屬性克隆到一個新對象。這屬于淺拷貝。 ~~~ const clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj)); // 或者 const shallowClone = (obj) => Object.create( Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj) ); ~~~ 上面代碼會克隆對象obj。 另外，Object.getOwnPropertyDescriptors方法可以實現一個對象繼承另一個對象。以前，繼承另一個對象，常常寫成下面這樣。 ~~~ const obj = { __proto__: prot, foo: 123, }; ~~~ ES6 規定__proto__只有瀏覽器要部署，其他環境不用部署。如果去除__proto__，上面代碼就要改成下面這樣。 ~~~ const obj = Object.create(prot); obj.foo = 123; // 或者 const obj = Object.assign( Object.create(prot), { foo: 123, } ); ~~~ 有了Object.getOwnPropertyDescriptors，我們就有了另一種寫法。 ~~~ const obj = Object.create( prot, Object.getOwnPropertyDescriptors({ foo: 123, }) ); Object.getOwnPropertyDescriptors也可以用來實現 Mixin（混入）模式。 let mix = (object) => ({ with: (...mixins) => mixins.reduce( (c, mixin) => Object.create( c, Object.getOwnPropertyDescriptors(mixin) ), object) }); // multiple mixins example let a = {a: 'a'}; let b = {b: 'b'}; let c = {c: 'c'}; let d = mix(c).with(a, b); d.c // "c" d.b // "b" d.a // "a" ~~~ 上面代碼返回一個新的對象d，代表了對象a和b被混入了對象c的操作。 出于完整性的考慮，Object.getOwnPropertyDescriptors進入標準以后，以后還會新增Reflect.getOwnPropertyDescriptors方法。 __proto__屬性，Object.setPrototypeOf()，Object.getPrototypeOf() JavaScript 語言的對象繼承是通過原型鏈實現的。ES6 提供了更多原型對象的操作方法。 __proto__屬性 __proto__屬性（前后各兩個下劃線），用來讀取或設置當前對象的prototype對象。目前，所有瀏覽器（包括 IE11）都部署了這個屬性。 // es5 的寫法 ~~~ const obj = { method: function() { ... } }; obj.__proto__ = someOtherObj; // es6 的寫法 var obj = Object.create(someOtherObj); obj.method = function() { ... }; ~~~ 該屬性沒有寫入 ES6 的正文，而是寫入了附錄，原因是__proto__前后的雙下劃線，說明它本質上是一個內部屬性，而不是一個正式的對外的 API，只是由于瀏覽器廣泛支持，才被加入了 ES6。標準明確規定，只有瀏覽器必須部署這個屬性，其他運行環境不一定需要部署，而且新的代碼最好認為這個屬性是不存在的。因此，無論從語義的角度，還是從兼容性的角度，都不要使用這個屬性，而是使用下面的Object.setPrototypeOf()（寫操作）、Object.getPrototypeOf()（讀操作）、Object.create()（生成操作）代替。 實現上，__proto__調用的是Object.prototype.__proto__，具體實現如下。 ~~~ Object.defineProperty(Object.prototype, '__proto__', { get() { let _thisObj = Object(this); return Object.getPrototypeOf(_thisObj); }, set(proto) { if (this === undefined || this === null) { throw new TypeError(); } if (!isObject(this)) { return undefined; } if (!isObject(proto)) { return undefined; } let status = Reflect.setPrototypeOf(this, proto); if (!status) { throw new TypeError(); } }, }); function isObject(value) { return Object(value) === value; } ~~~ 如果一個對象本身部署了__proto__屬性，該屬性的值就是對象的原型。 ~~~ Object.getPrototypeOf({ __proto__: null }) // null ~~~ ### 9. Object.setPrototypeOf() Object.setPrototypeOf方法的作用與__proto__相同，用來設置一個對象的prototype對象，返回參數對象本身。它是 ES6 正式推薦的設置原型對象的方法。 ~~~ // 格式 Object.setPrototypeOf(object, prototype) // 用法 const o = Object.setPrototypeOf({}, null); ~~~ 該方法等同于下面的函數。 ~~~ function (obj, proto) { obj.__proto__ = proto; return obj; } ~~~ 下面是一個例子。 ~~~ let proto = {}; let obj = { x: 10 }; Object.setPrototypeOf(obj, proto); proto.y = 20; proto.z = 40; obj.x // 10 obj.y // 20 obj.z // 40 ~~~ 上面代碼將proto對象設為obj對象的原型，所以從obj對象可以讀取proto對象的屬性。 如果第一個參數不是對象，會自動轉為對象。但是由于返回的還是第一個參數，所以這個操作不會產生任何效果。 ~~~ Object.setPrototypeOf(1, {}) === 1 // true Object.setPrototypeOf('foo', {}) === 'foo' // true Object.setPrototypeOf(true, {}) === true // true ~~~ 由于undefined和null無法轉為對象，所以如果第一個參數是undefined或null，就會報錯。 ~~~ Object.setPrototypeOf(undefined, {}) // TypeError: Object.setPrototypeOf called on null or undefined Object.setPrototypeOf(null, {}) // TypeError: Object.setPrototypeOf called on null or undefined ~~~ ### 10. Object.getPrototypeOf() 該方法與Object.setPrototypeOf方法配套，用于讀取一個對象的原型對象。 Object.getPrototypeOf(obj); 下面是一個例子。 ~~~ function Rectangle() { // ... } const rec = new Rectangle(); Object.getPrototypeOf(rec) === Rectangle.prototype // true Object.setPrototypeOf(rec, Object.prototype); Object.getPrototypeOf(rec) === Rectangle.prototype // false ~~~ 如果參數不是對象，會被自動轉為對象。 ~~~ // 等同于 Object.getPrototypeOf(Number(1)) Object.getPrototypeOf(1) // Number {[[PrimitiveValue]]: 0} // 等同于 Object.getPrototypeOf(String('foo')) Object.getPrototypeOf('foo') // String {length: 0, [[PrimitiveValue]]: ""} // 等同于 Object.getPrototypeOf(Boolean(true)) Object.getPrototypeOf(true) // Boolean {[[PrimitiveValue]]: false} Object.getPrototypeOf(1) === Number.prototype // true Object.getPrototypeOf('foo') === String.prototype // true Object.getPrototypeOf(true) === Boolean.prototype // true 如果參數是undefined或null，它們無法轉為對象，所以會報錯。 Object.getPrototypeOf(null) // TypeError: Cannot convert undefined or null to object Object.getPrototypeOf(undefined) // TypeError: Cannot convert undefined or null to object ~~~ ### 11. super 關鍵字 > 我們知道，this關鍵字總是指向函數所在的當前對象，ES6 又新增了另一個類似的關鍵字super，指向當前對象的原型對象。 ~~~ const proto = { foo: 'hello' }; const obj = { foo: 'world', find() { return super.foo; } }; Object.setPrototypeOf(obj, proto); obj.find() // "hello" ~~~ 上面代碼中，對象obj的find方法之中，通過super.foo引用了原型對象proto的foo屬性。 > 注意，super關鍵字表示原型對象時，只能用在對象的方法之中，用在其他地方都會報錯。 ~~~ // 報錯 const obj = { foo: super.foo } // 報錯 const obj = { foo: () => super.foo } // 報錯 const obj = { foo: function () { return super.foo } } ~~~ 上面三種super的用法都會報錯，因為對于 JavaScript 引擎來說，這里的super都沒有用在對象的方法之中。第一種寫法是super用在屬性里面，第二種和第三種寫法是super用在一個函數里面，然后賦值給foo屬性。目前，只有對象方法的簡寫法可以讓 JavaScript 引擎確認，定義的是對象的方法。 JavaScript 引擎內部，super.foo等同于Object.getPrototypeOf(this).foo（屬性）或Object.getPrototypeOf(this).foo.call(this)（方法）。 ~~~ const proto = { x: 'hello', foo() { console.log(this.x); }, }; const obj = { x: 'world', foo() { super.foo(); } } Object.setPrototypeOf(obj, proto); obj.foo() // "world" ~~~ 上面代碼中，super.foo指向原型對象proto的foo方法，但是綁定的this卻還是當前對象obj，因此輸出的就是world。 ### 12. Object.keys()，Object.values()，Object.entries() * Object.keys() ES5 引入了Object.keys方法，返回一個數組，成員是參數對象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵名。 var obj = { foo: 'bar', baz: 42 }; Object.keys(obj) // ["foo", "baz"] ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作為遍歷一個對象的補充手段，供for...of循環使用。 ~~~ let {keys, values, entries} = Object; let obj = { a: 1, b: 2, c: 3 }; for (let key of keys(obj)) { console.log(key); // 'a', 'b', 'c' } for (let value of values(obj)) { console.log(value); // 1, 2, 3 } for (let [key, value] of entries(obj)) { console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3] } ~~~ * Object.values() Object.values方法返回一個數組，成員是參數對象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵值。 ~~~ const obj = { foo: 'bar', baz: 42 }; Object.values(obj) // ["bar", 42] ~~~ 返回數組的成員順序，與本章的《屬性的遍歷》部分介紹的排列規則一致。 ~~~ const obj = { 100: 'a', 2: 'b', 7: 'c' }; Object.values(obj) // ["b", "c", "a"] ~~~ 上面代碼中，屬性名為數值的屬性，是按照數值大小，從小到大遍歷的，因此返回的順序是b、c、a。 Object.values只返回對象自身的可遍歷屬性。 ~~~ const obj = Object.create({}, {p: {value: 42}}); Object.values(obj) // [] ~~~ 上面代碼中，Object.create方法的第二個參數添加的對象屬性（屬性p），如果不顯式聲明，默認是不可遍歷的，因為p的屬性描述對象的enumerable默認是false，Object.values不會返回這個屬性。只要把enumerable改成true，Object.values就會返回屬性p的值。 ~~~ const obj = Object.create({}, {p: { value: 42, enumerable: true } }); Object.values(obj) // [42] ~~~ Object.values會過濾屬性名為 Symbol 值的屬性。 ~~~ Object.values({ [Symbol()]: 123, foo: 'abc' }); // ['abc'] ~~~ 如果Object.values方法的參數是一個字符串，會返回各個字符組成的一個數組。 ~~~ Object.values('foo') // ['f', 'o', 'o'] ~~~ 上面代碼中，字符串會先轉成一個類似數組的對象。字符串的每個字符，就是該對象的一個屬性。因此，Object.values返回每個屬性的鍵值，就是各個字符組成的一個數組。 如果參數不是對象，Object.values會先將其轉為對象。由于數值和布爾值的包裝對象，都不會為實例添加非繼承的屬性。所以，Object.values會返回空數組。 ~~~ Object.values(42) // [] Object.values(true) // [] ~~~ * Object.entries Object.entries方法返回一個數組，成員是參數對象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵值對數組。 ~~~ const obj = { foo: 'bar', baz: 42 }; Object.entries(obj) // [ ["foo", "bar"], ["baz", 42] ] ~~~ 除了返回值不一樣，該方法的行為與Object.values基本一致。 如果原對象的屬性名是一個 Symbol 值，該屬性會被忽略。 ~~~ Object.entries({ [Symbol()]: 123, foo: 'abc' }); // [ [ 'foo', 'abc' ] ] ~~~ 上面代碼中，原對象有兩個屬性，Object.entries只輸出屬性名非 Symbol 值的屬性。將來可能會有Reflect.ownEntries()方法，返回對象自身的所有屬性。 Object.entries的基本用途是遍歷對象的屬性。 ~~~ let obj = { one: 1, two: 2 }; for (let [k, v] of Object.entries(obj)) { console.log( `${JSON.stringify(k)}: ${JSON.stringify(v)}` ); } // "one": 1 // "two": 2 ~~~ Object.entries方法的另一個用處是，將對象轉為真正的Map結構。 ~~~ const obj = { foo: 'bar', baz: 42 }; const map = new Map(Object.entries(obj)); map // Map { foo: "bar", baz: 42 } ~~~ 自己實現Object.entries方法，非常簡單。 ~~~ // Generator函數的版本 function* entries(obj) { for (let key of Object.keys(obj)) { yield [key, obj[key]]; } } // 非Generator函數的版本 function entries(obj) { let arr = []; for (let key of Object.keys(obj)) { arr.push([key, obj[key]]); } return arr; } ~~~ ### 13. 對象的擴展運算符 《數組的擴展》一章中，已經介紹過擴展運算符（...）。 ~~~ const [a, ...b] = [1, 2, 3]; a // 1 b // [2, 3] ~~~ ES2018 將這個運算符引入了對象。 * 解構賦值 對象的解構賦值用于從一個對象取值，相當于將目標對象自身的所有可遍歷的（enumerable）、但尚未被讀取的屬性，分配到指定的對象上面。所有的鍵和它們的值，都會拷貝到新對象上面。 ~~~ let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; x // 1 y // 2 z // { a: 3, b: 4 } ~~~ 上面代碼中，變量z是解構賦值所在的對象。它獲取等號右邊的所有尚未讀取的鍵（a和b），將它們連同值一起拷貝過來。 由于解構賦值要求等號右邊是一個對象，所以如果等號右邊是undefined或null，就會報錯，因為它們無法轉為對象。 ~~~ let { x, y, ...z } = null; // 運行時錯誤 let { x, y, ...z } = undefined; // 運行時錯誤 ~~~ 解構賦值必須是最后一個參數，否則會報錯。 ~~~ let { ...x, y, z } = obj; // 句法錯誤 let { x, ...y, ...z } = obj; // 句法錯誤 ~~~ > 上面代碼中，解構賦值不是最后一個參數，所以會報錯。 注意，解構賦值的拷貝是淺拷貝，即如果一個鍵的值是復合類型的值（數組、對象、函數）、那么解構賦值拷貝的是這個值的引用，而不是這個值的副本。 ~~~ let obj = { a: { b: 1 } }; let { ...x } = obj; obj.a.b = 2; x.a.b // 2 ~~~ 上面代碼中，x是解構賦值所在的對象，拷貝了對象obj的a屬性。a屬性引用了一個對象，修改這個對象的值，會影響到解構賦值對它的引用。 另外，擴展運算符的解構賦值，不能復制繼承自原型對象的屬性。 ~~~ let o1 = { a: 1 }; let o2 = { b: 2 }; o2.__proto__ = o1; let { ...o3 } = o2; o3 // { b: 2 } o3.a // undefined ~~~ 上面代碼中，對象o3復制了o2，但是只復制了o2自身的屬性，沒有復制它的原型對象o1的屬性。 下面是另一個例子。 ~~~ const o = Object.create({ x: 1, y: 2 }); o.z = 3; let { x, ...newObj } = o; let { y, z } = newObj; x // 1 y // undefined z // 3 ~~~ 上面代碼中，變量x是單純的解構賦值，所以可以讀取對象o繼承的屬性；變量y和z是擴展運算符的解構賦值，只能讀取對象o自身的屬性，所以變量z可以賦值成功，變量y取不到值。ES6 規定，變量聲明語句之中，如果使用解構賦值，擴展運算符后面必須是一個變量名，而不能是一個解構賦值表達式，所以上面代碼引入了中間變量newObj，如果寫成下面這樣會報錯。 ~~~ let { x, ...{ y, z } } = o; // SyntaxError: ... must be followed by an identifier in declaration contexts ~~~ 解構賦值的一個用處，是擴展某個函數的參數，引入其他操作。 ~~~ function baseFunction({ a, b }) { // ... } function wrapperFunction({ x, y, ...restConfig }) { // 使用 x 和 y 參數進行操作 // 其余參數傳給原始函數 return baseFunction(restConfig); } ~~~ 上面代碼中，原始函數baseFunction接受a和b作為參數，函數wrapperFunction在baseFunction的基礎上進行了擴展，能夠接受多余的參數，并且保留原始函數的行為。 * 擴展運算符 對象的擴展運算符（...）用于取出參數對象的所有可遍歷屬性，拷貝到當前對象之中。 ~~~ let z = { a: 3, b: 4 }; let n = { ...z }; n // { a: 3, b: 4 } ~~~ 這等同于使用Object.assign方法。 ~~~ let aClone = { ...a }; // 等同于 let aClone = Object.assign({}, a); ~~~ 上面的例子只是拷貝了對象實例的屬性，如果想完整克隆一個對象，還拷貝對象原型的屬性，可以采用下面的寫法。 ~~~ // 寫法一 const clone1 = { __proto__: Object.getPrototypeOf(obj), ...obj }; // 寫法二 const clone2 = Object.assign( Object.create(Object.getPrototypeOf(obj)), obj ); // 寫法三 const clone3 = Object.create( Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj) ) ~~~ 上面代碼中，寫法一的__proto__屬性在非瀏覽器的環境不一定部署，因此推薦使用寫法二和寫法三。 擴展運算符可以用于合并兩個對象。 ~~~ let ab = { ...a, ...b }; // 等同于 let ab = Object.assign({}, a, b); ~~~ 如果用戶自定義的屬性，放在擴展運算符后面，則擴展運算符內部的同名屬性會被覆蓋掉。 ~~~ let aWithOverrides = { ...a, x: 1, y: 2 }; // 等同于 let aWithOverrides = { ...a, ...{ x: 1, y: 2 } }; // 等同于 let x = 1, y = 2, aWithOverrides = { ...a, x, y }; // 等同于 let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 }); ~~~ 上面代碼中，a對象的x屬性和y屬性，拷貝到新對象后會被覆蓋掉。 這用來修改現有對象部分的屬性就很方便了。 ~~~ let newVersion = { ...previousVersion, name: 'New Name' // Override the name property }; ~~~ 上面代碼中，newVersion對象自定義了name屬性，其他屬性全部復制自previousVersion對象。 如果把自定義屬性放在擴展運算符前面，就變成了設置新對象的默認屬性值。 ~~~ let aWithDefaults = { x: 1, y: 2, ...a }; // 等同于 let aWithDefaults = Object.assign({}, { x: 1, y: 2 }, a); // 等同于 let aWithDefaults = Object.assign({ x: 1, y: 2 }, a); ~~~ 與數組的擴展運算符一樣，對象的擴展運算符后面可以跟表達式。 ~~~ const obj = { ...(x > 1 ? {a: 1} : {}), b: 2, }; ~~~ 如果擴展運算符后面是一個空對象，則沒有任何效果。 ~~~ {...{}, a: 1} // { a: 1 } ~~~ 如果擴展運算符的參數是null或undefined，這兩個值會被忽略，不會報錯。 `let emptyObject = { ...null, ...undefined }; // 不報錯` 擴展運算符的參數對象之中，如果有取值函數get，這個函數是會執行的。 ~~~ // 并不會拋出錯誤，因為 x 屬性只是被定義，但沒執行 let aWithXGetter = { ...a, get x() { throw new Error('not throw yet'); } }; // 會拋出錯誤，因為 x 屬性被執行了 let runtimeError = { ...a, ...{ get x() { throw new Error('throw now'); } } }; ~~~