摘要：主要知識(shí)點(diǎn)有對(duì)象類(lèi)別屬性速記法方法簡(jiǎn)寫(xiě)需計(jì)算屬性名方法方法可允許重復(fù)的屬性自有屬性的枚舉順序方法引用方法定義深入理解筆記目錄對(duì)象類(lèi)別普通對(duì)象擁有對(duì)象所有默認(rèn)的內(nèi)部行為。奇異對(duì)象其內(nèi)部行為在某些方面有別于默認(rèn)行為。所有的標(biāo)準(zhǔn)對(duì)象都是內(nèi)置對(duì)象。

主要知識(shí)點(diǎn)有對(duì)象類(lèi)別、屬性速記法、方法簡(jiǎn)寫(xiě)、需計(jì)算屬性名、Object.is()方法、Object.assign()方法、可允許重復(fù)的屬性、自有屬性的枚舉順序、Object.setPrototypeOf()方法、super引用、方法定義

《深入理解ES6》筆記 目錄

普通對(duì)象：擁有 JS 對(duì)象所有默認(rèn)的內(nèi)部行為。

奇異對(duì)象：其內(nèi)部行為在某些方面有別于默認(rèn)行為。

標(biāo)準(zhǔn)對(duì)象：在 ES6 中被定義的對(duì)象，例如 Array 、 Date ，等等。標(biāo)準(zhǔn)對(duì)象可以是普通的，也可以是奇異的。

內(nèi)置對(duì)象：在腳本開(kāi)始運(yùn)行時(shí)由 JS 運(yùn)行環(huán)境提供的對(duì)象。所有的標(biāo)準(zhǔn)對(duì)象都是內(nèi)置對(duì)象。

屬性初始化器的速記法可以用來(lái)消除屬性名和本地變量的重復(fù)情況，可以使用作用域內(nèi)的變量值賦值給同名屬性：

ES5 及更早版本中：

function createPerson(name, age) {
    return {
        name: name,
        age: age
    };
}

ES6簡(jiǎn)寫(xiě)：

function createPerson(name, age) {
    return {
        name,
        age
    };
}

在對(duì)象字面量的寫(xiě)法中，為一個(gè)對(duì)象添加一個(gè)方法，需要指定對(duì)象的屬性以及具體的函數(shù)聲明。ES6提供了一種方法簡(jiǎn)寫(xiě)語(yǔ)法，通過(guò)省略function關(guān)鍵字，能夠讓為對(duì)象添加方法的語(yǔ)法更加簡(jiǎn)潔。
ES5中的寫(xiě)法：

var person = {
    name: "Nicholas",
    sayName: function() {
        console.log(this.name);
    }
};

ES6簡(jiǎn)寫(xiě)語(yǔ)法：

var person = {
    name: "Nicholas",
    sayName() {
        console.log(this.name);
    }
};

需計(jì)算屬性名規(guī)則允許對(duì)象字面量中屬性名是變量、字符串字面量或者由變量計(jì)算而得的，具體寫(xiě)法是通過(guò)方括號(hào)[]包含屬性名。

var lastName = "last name";
var person = {
    "first name": "Nicholas",
    [lastName]: "Zakas"
};
console.log(person["first name"]); // "Nicholas"
console.log(person[lastName]); // "Zakas"

var suffix = " name";
var person = {
    ["first" + suffix]: "Nicholas",
    ["last" + suffix]: "Zakas"
};
console.log(person["first name"]); // "Nicholas"
console.log(person["last name"]); // "Zakas"

const id = 5
const obj = {
  [`my-${id}`]: id
}
console.log(obj["my-5"]) // 5

JS中比較兩個(gè)值是否相同的時(shí)候會(huì)使用嚴(yán)格等于運(yùn)算符===，但是，使用嚴(yán)格運(yùn)算符式，+0和-0會(huì)認(rèn)為這兩者是相等的，而NaN===NaN是不相等的，使用Object.is()方法來(lái)判斷這兩者情況與使用嚴(yán)格相等符會(huì)有所不同，其他情況和使用嚴(yán)格相等運(yùn)算符基本一致；

console.log(+0 == -0); // true
console.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false
console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true
console.log(5 == 5); // true
console.log(5 == "5"); // true
console.log(5 === 5); // true
console.log(5 === "5"); // false
console.log(Object.is(5, 5)); // true
console.log(Object.is(5, "5")); // false

混入（ Mixin ）是在 JS 中組合對(duì)象時(shí)最流行的模式。在一次混入中，一個(gè)對(duì)象會(huì)從另一個(gè)對(duì)象中接收屬性與方法。
下面是一個(gè)mixin方法的實(shí)現(xiàn)，這個(gè)方法實(shí)現(xiàn)的是淺拷貝。將b對(duì)象的屬性拷貝到了a對(duì)象，合并成一個(gè)新的對(duì)象。

//mixin不只有這一種實(shí)現(xiàn)方法。
function mixin(receiver, supplier) {
  Object.keys(supplier).forEach((key) => {
    receiver[key] = supplier[key]
  })
  return receiver
}

let a = {name: "sb"};
let b = {
  c: {
    d: 5
    }
  }
console.log(mixin(a, b)) // {"name":"sb","c":{"d":5}}

寫(xiě)這樣一個(gè)mixin方法是不是很煩，而且每個(gè)項(xiàng)目都得引入這個(gè)方法，現(xiàn)在，ES6給我們提供了一個(gè)現(xiàn)成的方法Object.assign()來(lái)做mixin的事情。

假設(shè)要實(shí)現(xiàn)上面的mixin方法，你只需要給Object.assign()傳入?yún)?shù)即可。

console.log(Object.assign(a, b))// {"name":"sb","c":{"d":5}}

ES5 嚴(yán)格模式為重復(fù)的對(duì)象字面量屬性引入了一個(gè)檢查，若找到重復(fù)的屬性名，就會(huì)拋出錯(cuò)誤。

"use strict";
var person = {
    name: "Nicholas",
    name: "Greg" // 在 ES5 嚴(yán)格模式中是語(yǔ)法錯(cuò)誤
};

ES6 移除了重復(fù)屬性的檢查，嚴(yán)格模式與非嚴(yán)格模式都不再檢查重復(fù)的屬性。當(dāng)存在重復(fù)屬性時(shí)，排在后面的屬性的值會(huì)成為該屬性的實(shí)際值：

"use strict";
var person = {
    name: "Nicholas",
    name: "Greg" // 在 ES6 嚴(yán)格模式中不會(huì)出錯(cuò)
};
console.log(person.name); // "Greg"

ES5 并沒(méi)有定義對(duì)象屬性的枚舉順序，而是把該問(wèn)題留給了 JS 引擎廠(chǎng)商。而 ES6 則嚴(yán)格定義了對(duì)象自有屬性在被枚舉時(shí)返回的順序。這對(duì) Object.getOwnPropertyNames() 與Reflect.ownKeys）如何返回屬性造成了影響，還同樣影響了Object.assign() 處理屬性的順序。
自有屬性枚舉時(shí)基本順序如下：

所有的數(shù)字類(lèi)型鍵，按升序排列。

所有的字符串類(lèi)型鍵，按被添加到對(duì)象的順序排列。

所有的符號(hào)類(lèi)型（詳見(jiàn)第六章）鍵，也按添加順序排列。

const state = {
  id: 1,
  5: 5,
  name: "eryue",
  3: 3
}

Object.getOwnPropertyNames(state) 
//["3","5","id","name"] 枚舉key

Object.assign(state, null)
//{"3":3,"5":5,"id":1,"name":"eryue"} 

for-in  循環(huán)的枚舉順序仍未被明確規(guī)定，因?yàn)椴⒎撬械?JS 引擎都采用相同的方式。而  Object.keys()  和  JSON.stringify()  也使用了與  for-in  一樣的枚舉順序。

一般來(lái)說(shuō)，對(duì)象的原型會(huì)在通過(guò)構(gòu)造器或 Object.create() 方法創(chuàng)建該對(duì)象時(shí)被指定。
ES5 添加了 Object.getPrototypeOf() 方法來(lái)從任意指定對(duì)象中獲取其原型；
缺少在初始化之后更改對(duì)象原型的標(biāo)準(zhǔn)方法。

ES6 通過(guò)添加 Object.setPrototypeOf() 方法而改變了這種假定，此方法允許你修改任意指定對(duì)象的原型。它接受兩個(gè)參數(shù)：需要被修改原型的對(duì)象，以及將會(huì)成為前者原型的對(duì)象。

let person = {
    getGreeting() {
        return "Hello";
    }
};
let dog = {
    getGreeting() {
        return "Woof";
    }
};
// 原型為 person
let friend = Object.create(person);
console.log(friend.getGreeting()); // "Hello"
console.log(Object.getPrototypeOf(friend) === person); // true
// 將原型設(shè)置為 dog
Object.setPrototypeOf(friend, dog);
console.log(friend.getGreeting()); // "Woof"
console.log(Object.getPrototypeOf(friend) === dog); // true

能夠使用super引用，來(lái)訪(fǎng)問(wèn)原型中的方法：

const proto = {
  foo: "hello"
};

const obj = {
  foo: "world",
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

注意，super關(guān)鍵字表示原型對(duì)象時(shí)，只能用在對(duì)象的簡(jiǎn)寫(xiě)方法之中，用在其他地方都會(huì)報(bào)錯(cuò)。

// 報(bào)錯(cuò)
const obj = {
  foo: super.foo
}

// 報(bào)錯(cuò)
const obj = {
  foo: () => super.foo
}

// 報(bào)錯(cuò)
const obj = {
  foo: function () {
    return super.foo
  }
}

javaScript 引擎內(nèi)部，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指向原型對(duì)象proto的foo方法，但是綁定的this卻還是當(dāng)前對(duì)象obj，因此輸出的就是world。

ES6 則正式做出了定義：方法是一個(gè)擁有 [[HomeObject]] 內(nèi)部屬性的函數(shù)，此內(nèi)部屬性指向該方法所屬的對(duì)象。

let person = {
// 方法
    getGreeting() {
        return "Hello";
    }
};
// 并非方法
function shareGreeting() {
    return "Hi!";
}

大多數(shù)情況下，這種差異并不重要，然而使用 super 引用時(shí)就完全不同了。

let person = {
    getGreeting() {
        return "Hello";
    }
};
// 原型為 person
let friend = {
    getGreeting() {
        return super.getGreeting() + ", hi!";
    }
};
Object.setPrototypeOf(friend, person);
console.log(friend.getGreeting()); // "Hello, hi!"