摘要：主要知識點有對象類別屬性速記法方法簡寫需計算屬性名方法方法可允許重復的屬性自有屬性的枚舉順序方法引用方法定義深入理解筆記目錄對象類別普通對象擁有對象所有默認的內部行為。奇異對象其內部行為在某些方面有別于默認行為。所有的標準對象都是內置對象。

主要知識點有對象類別、屬性速記法、方法簡寫、需計算屬性名、Object.is()方法、Object.assign()方法、可允許重復的屬性、自有屬性的枚舉順序、Object.setPrototypeOf()方法、super引用、方法定義

《深入理解ES6》筆記 目錄

普通對象：擁有 JS 對象所有默認的內部行為。

奇異對象：其內部行為在某些方面有別于默認行為。

標準對象：在 ES6 中被定義的對象，例如 Array 、 Date ，等等。標準對象可以是普通的，也可以是奇異的。

內置對象：在腳本開始運行時由 JS 運行環境提供的對象。所有的標準對象都是內置對象。

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

ES5 及更早版本中：

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

ES6簡寫：

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

在對象字面量的寫法中，為一個對象添加一個方法，需要指定對象的屬性以及具體的函數聲明。ES6提供了一種方法簡寫語法，通過省略function關鍵字，能夠讓為對象添加方法的語法更加簡潔。
ES5中的寫法：

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

ES6簡寫語法：

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

需計算屬性名規則允許對象字面量中屬性名是變量、字符串字面量或者由變量計算而得的，具體寫法是通過方括號[]包含屬性名。

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中比較兩個值是否相同的時候會使用嚴格等于運算符===，但是，使用嚴格運算符式，+0和-0會認為這兩者是相等的，而NaN===NaN是不相等的，使用Object.is()方法來判斷這兩者情況與使用嚴格相等符會有所不同，其他情況和使用嚴格相等運算符基本一致；

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 中組合對象時最流行的模式。在一次混入中，一個對象會從另一個對象中接收屬性與方法。
下面是一個mixin方法的實現，這個方法實現的是淺拷貝。將b對象的屬性拷貝到了a對象，合并成一個新的對象。

//mixin不只有這一種實現方法。
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}}

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

假設要實現上面的mixin方法，你只需要給Object.assign()傳入參數即可。

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

ES5 嚴格模式為重復的對象字面量屬性引入了一個檢查，若找到重復的屬性名，就會拋出錯誤。

"use strict";
var person = {
    name: "Nicholas",
    name: "Greg" // 在 ES5 嚴格模式中是語法錯誤
};

ES6 移除了重復屬性的檢查，嚴格模式與非嚴格模式都不再檢查重復的屬性。當存在重復屬性時，排在后面的屬性的值會成為該屬性的實際值：

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

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

所有的數字類型鍵，按升序排列。

所有的字符串類型鍵，按被添加到對象的順序排列。

所有的符號類型（詳見第六章）鍵，也按添加順序排列。

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  循環的枚舉順序仍未被明確規定，因為并非所有的 JS 引擎都采用相同的方式。而  Object.keys()  和  JSON.stringify()  也使用了與  for-in  一樣的枚舉順序。

一般來說，對象的原型會在通過構造器或 Object.create() 方法創建該對象時被指定。
ES5 添加了 Object.getPrototypeOf() 方法來從任意指定對象中獲取其原型；
缺少在初始化之后更改對象原型的標準方法。

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

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
// 將原型設置為 dog
Object.setPrototypeOf(friend, dog);
console.log(friend.getGreeting()); // "Woof"
console.log(Object.getPrototypeOf(friend) === dog); // true

能夠使用super引用，來訪問原型中的方法：

const proto = {
  foo: "hello"
};

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

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

注意，super關鍵字表示原型對象時，只能用在對象的簡寫方法之中，用在其他地方都會報錯。

// 報錯
const obj = {
  foo: super.foo
}

// 報錯
const obj = {
  foo: () => super.foo
}

// 報錯
const obj = {
  foo: function () {
    return super.foo
  }
}

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。

ES6 則正式做出了定義：方法是一個擁有 [[HomeObject]] 內部屬性的函數，此內部屬性指向該方法所屬的對象。

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

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

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