阿裡巴巴前端工程師逸翾對JavaScript中的對象進行了詳細講解。首先從了解對象談起，說明了對象中的兩個關鍵點key和prototype，其次介紹了對建立對象的三種方式，包括字面量、構造函數、Object.create和class person，最後對JavaScript的繼承進行了詳細解析。
數十款阿裡雲産品限時折扣中， 趕快點選這裡 ，領券開始雲上實踐吧！ 直播視訊精彩回顧以下是精彩視訊内容整理：
了解對象
對象是無序屬性的集合，其屬性可以包含基本值、對象或者函數，對象的每個屬性或者方法都有一個Key，而每個名字都映射到一個Value。
對象結構中比較關鍵的兩個點是key和prototype，key有自己的資料屬性，比如writable、value以及設定或讀取key值的方法等；prototype是JavaScript與其它語言最大不同的地方，繼承主要是通過原型特性來實作的。如圖所示，定義一個對象，在原型上綁定了一個key，這個key列印出“say hi”。
建立對象
在日常工作中常用的JavaScript建立對象的常用方式有很多，JavaScript是怎樣建立對象的呢？
最簡單的方式是直接用字面量建立，定義一個變量，變量中有key-value，value可以是函數、可以是其它對象，能夠定義出一個對象，列印出來如圖的三個key（action、name和son），son中又有兩個key，_proto_叫做隐式原型。
建立對象還有一種方式就是通過構造函數來建立，建立對象和繼承關系很緊密。如圖所示，建立一個構造函數person，有兩個構造屬性name和age，建立對象person1和person2，最後生成列印出來。Person1和person2這兩個方法做的事情是完全相同的，浪費了資源，通過原型方式，讓它們共用同一個方法，person1的隐式原型指向了person原型，person原型的構造函數是person，person指向person原型。
我們還可以通過Object.create建立對象，Object.create相當于Object.prototype的一個文法糖，可以節省很多資源，隻生成了中轉對象，所有對象都會指向Object.prototype，Object.prototype指向null。
在ES6中出現什麼樣的建立對象方式呢？建立一個簡單方法即是class person，如圖所示。ES6中的class可以看作構造函數的另一種寫法；構造函數的prototype屬性，在ES6的“class”上面繼續存在；class中定義的方法實際上也是挂載到原型上，而static靜态屬性則是挂載到構造函數本身上；class中定義的方法預設是不可枚舉的。
JavaScript中的繼承
JavaScript中最簡單的繼承是從構造函數通過new指令生成執行個體，比如：
function Dog(name){
this.name =
name;
}
Var bigdog = new Dog(‘金毛’);
Console.log(biglog.name);
金毛;
Bindog直接繼承了Dog的屬性，列印出bindog在父類中的key，這種方法的缺點是每一個執行個體對象都有自己的屬性和副本，不僅無法共享屬性和方法，而且造成極大浪費資源。
在ES6之前，最通用的方式是引入prototype屬性，通過原型鍊實作繼承，這也是最複雜的實作繼承方式。prototype屬性包含一個對象(prototype對象)，所有執行個體對象需要共享的屬性和方法，都放在這個對象裡面，不需要共享的屬性和方法，就放在構造函數裡。如圖所示，首先定義了supertype，在supertype的原型上挂載了一個方法getsupervalue，它會傳回supertype的property屬性。接着又定義了另外一個構造函數subtype，它的subproperty屬性為false，使得supertype.prototype等于new supertype，supertype的隐式原型指向supertype的原型，supertype的原型對象構造函數是supertype，supertype的proto指向supertype的原型對象。然後将subtype的原型屬性挂載getsubvalue的方法，此處原理與上面supertype一樣。然後又執行個體化subtype對象，instance從supertype這裡繼承來了getsupervalue方法。此時，subtype prototype指向了subtype原型對象，instance隐式原型指向了subtype原型。
在ES6中引入了extends關鍵字，但extends其實也是ES6衆多文法糖之一而已，其本質仍是原型鍊，隻是看起來清晰友善了很多。
ES5先建立子類的執行個體對象，ES6先建立父類的執行個體對象，然後再通過子類的構造函數修改this。如圖所示，左側代碼中兩個class中，stu繼承了person全部的屬性和方法，person中有一個構造函數和一個方法，stu也有自己的構造函數和方法，其中super關鍵字可以當作函數使用，代表父類的構造函數，繼承父類name的屬性，super也可以當作對象使用，指向父類的原型對象。
本文由雲栖志願小組毛鶴整理，編輯百見