*這里的ES5并不特指ECMAScript 5， 而是代表ECMAScript 6 之前的ECMAScript！

在ES5中創(chuàng)建對(duì)象有兩種方式， 第一種是使用對(duì)象字面量的方式， 第二種是使用構(gòu)造函數(shù)的方式。該兩種方法在特定的使用場(chǎng)景分別有其優(yōu)點(diǎn)和缺點(diǎn)， 下面我們來(lái)分別介紹這兩種創(chuàng)建對(duì)象的方式。

1. 使用對(duì)象字面量的方式

我們通過(guò)對(duì)象字面量的方式創(chuàng)建兩個(gè)student對(duì)象，分別是student1和student2。

var student1 = {
  name: "阿輝",
  age: 22,
  subject: "前端開(kāi)發(fā)"
};

var student2 = {
  name: "阿傻",
  age: 22,
  subject: "大數(shù)據(jù)開(kāi)發(fā)"
};

上面的代碼就是使用對(duì)象字面量的方式創(chuàng)建實(shí)例對(duì)象， 使用對(duì)象字面量的方式在創(chuàng)建單一簡(jiǎn)單對(duì)象的時(shí)候是非常方便的。但是，它也有其缺點(diǎn)：

在生成多個(gè)實(shí)例對(duì)象時(shí)， 我們需要每次重復(fù)寫(xiě)name,age,subject屬性，寫(xiě)起來(lái)特別的麻煩

雖然都是學(xué)生的對(duì)象， 但是看不出student1和student2之間有什么聯(lián)系。

為了解決以上兩個(gè)問(wèn)題， JavaScript提供了構(gòu)造函數(shù)創(chuàng)建對(duì)象的方式。

2. 使用構(gòu)造函數(shù)的方式

構(gòu)造函數(shù)就其實(shí)就是一個(gè)普通的函數(shù)，當(dāng)對(duì)構(gòu)造函數(shù)使用new進(jìn)行實(shí)例化時(shí)，會(huì)將其內(nèi)部this的指向綁定實(shí)例對(duì)象上，下面我們來(lái)創(chuàng)建一個(gè)Student構(gòu)造函數(shù)（構(gòu)造函數(shù)約定使用大寫(xiě)開(kāi)頭，和普通函數(shù)做區(qū)分）。

function Student (name, age, subject) {
  this.name = name;
  this.age = age; 
  this.subject = subject;
  console.log(this);
}

我特意在構(gòu)造函數(shù)中打印出this的指向。上面我們提到，構(gòu)造函數(shù)其實(shí)就是一個(gè)普通的函數(shù)， 那么我們使用普通函數(shù)的調(diào)用方式嘗試調(diào)用Student。

Student("阿輝", 22, "前端開(kāi)發(fā)"); //window{}

采用普通方式調(diào)用Student時(shí)， this的指向是window。下面使用new來(lái)實(shí)例化該構(gòu)造函數(shù)， 生成一個(gè)實(shí)例對(duì)象student1。

let student1 = new Student("阿輝", 22, "前端開(kāi)發(fā)"); //Student?{name: "阿輝", age: 22, subject: "前端開(kāi)發(fā)"}

當(dāng)我們采用new生成實(shí)例化對(duì)象student1時(shí)， this不再指向window, 而是指向的實(shí)例對(duì)象本身。這些， 都是new幫我們做的。上面的就是采用構(gòu)造函數(shù)的方式生成實(shí)例對(duì)象的方式， 并且當(dāng)我們生成其他實(shí)例對(duì)象時(shí)，由于都是采用Student這個(gè)構(gòu)造函數(shù)實(shí)例化而來(lái)的， 我們能夠清楚的知道各實(shí)例對(duì)象之間的聯(lián)系。

let student1 = new Student("阿輝", 22, "前端開(kāi)發(fā)");
let student2 = new Student("阿傻", 22, "大數(shù)據(jù)開(kāi)發(fā)");
let student3 = new Student("阿呆", 22, "Python");
let student4 = new Student("阿笨", 22, "Java");

1. prototype的原型繼承

prototype是JavaScript這類基于原型繼承的核心， 只要弄明白了原型和原型鏈， 就基本上完全理解了JavaScript中對(duì)象的繼承。下面我將著重的講解為什么要使用prototype和使用prototype實(shí)現(xiàn)繼承的方式。

為什么要使用prototype？

我們給之前的Student構(gòu)造函數(shù)新增一個(gè)study方法

function Student (name, age, subject) {
  this.name = name;
  this.age = age; 
  this.subject = subject;
  this.study = function() {
    console.log("我在學(xué)習(xí)" + this.subject);
  }
}

現(xiàn)在我們來(lái)實(shí)例化Student構(gòu)造函數(shù)， 生成student1和`student2, 并分別調(diào)用其study方法。

let student1 = new Student("阿輝", 22, "前端開(kāi)發(fā)");
let student2 = new Student("阿傻", 22, "大數(shù)據(jù)開(kāi)發(fā)");

student1.study(); //我在學(xué)習(xí)前端開(kāi)發(fā)
student2.study(); //我在學(xué)習(xí)大數(shù)據(jù)開(kāi)發(fā)

這樣生成的實(shí)例對(duì)象表面上看沒(méi)有任何問(wèn)題， 但是其實(shí)是有很大的性能問(wèn)題！我們來(lái)看下面一段代碼：

console.log(student1.study === student2.study); //false

其實(shí)對(duì)于每一個(gè)實(shí)例對(duì)象studentx，其study方法的函數(shù)體是一模一樣的，方法的執(zhí)行結(jié)果只根據(jù)其實(shí)例對(duì)象決定，然而生成的每個(gè)實(shí)例都需要生成一個(gè)study方法去占用一份內(nèi)存。這樣是非常不經(jīng)濟(jì)的做法。新手可能會(huì)認(rèn)為， 上面的代碼中也就多生成了一個(gè)study方法， 對(duì)于內(nèi)存的占用可以忽略不計(jì)。

那么我們?cè)贛DN中看一下在JavaScript中我們使用的String實(shí)例對(duì)象有多少方法？

上面的方法只是String實(shí)例對(duì)象中的一部分方法（我一個(gè)屏幕截取不完！）， 這也就是為什么我們的字符串能夠使用如此多便利的原生方法的原因。設(shè)想一下， 如果這些方法不是掛載在String.prototype上， 而是像上面Student一樣寫(xiě)在String構(gòu)造函數(shù)上呢？那么我們項(xiàng)目中的每一個(gè)字符串，都會(huì)去生成這幾十種方法去占用內(nèi)存，這還沒(méi)考慮Math,Array,Number,Object等對(duì)象！

現(xiàn)在我們應(yīng)該知道應(yīng)該將study方法掛載到Student.prototype原型對(duì)象上才是正確的寫(xiě)法，所有的studentx實(shí)例都能繼承該方法。

function Student (name, age, subject) {
  this.name = name;
  this.age = age; 
  this.subject = subject;
}
Student.prototype.study = function() {
  console.log("我在學(xué)習(xí)" + this.subject);
}

現(xiàn)在我們實(shí)例化student1和student2

let student1 = new Student("阿輝", 22, "前端開(kāi)發(fā)");
let student2 = new Student("阿傻", 22, "大數(shù)據(jù)開(kāi)發(fā)");

student1.study(); //我在學(xué)習(xí)前端開(kāi)發(fā)
student2.study(); //我在學(xué)習(xí)大數(shù)據(jù)開(kāi)發(fā)

console.log(student1.study === student2.study); //true

從上面的代碼我們可以看出， student1和student2的study方法執(zhí)行結(jié)果沒(méi)有發(fā)生變化，但是study本身指向了一個(gè)內(nèi)存地址。這就是為什么我們要使用prototype進(jìn)行掛載方法的原因。接下來(lái)我們來(lái)講解一下如何使用prototype來(lái)實(shí)現(xiàn)繼承。

如何使用prototype實(shí)現(xiàn)繼承？

“學(xué)生”這個(gè)對(duì)象可以分為小學(xué)生， 中學(xué)生和大學(xué)生等。我們現(xiàn)在新建一個(gè)小學(xué)生的構(gòu)造函數(shù)Pupil。

function Pupil(school) {
  this.school = school;
}

那么如何讓Pupil使用prototype繼承Student呢? 其實(shí)我們只要將Pupil的prototype指向Student的一個(gè)實(shí)例即可。

Pupil.prototype = new Student("小輝", 8, "小學(xué)義務(wù)教育課程");
Pupil.prototype.constructor = Pupil;

let pupil1 = new Pupil("北大附小");

代碼的第一行， 我們將Pupil的原型對(duì)象（Pupil.prototype）指向了Student的實(shí)例對(duì)象。

Pupil.prototype = new Student("小輝", 8, "小學(xué)義務(wù)教育課程");

代碼的第二行也許有的讀者會(huì)不能理解是什么意思。

Pupil.prototype.constructor = Pupil;

Pupil作為構(gòu)造函數(shù)有一個(gè)protoype屬性指向原型對(duì)象Pupil.prototype，而原型對(duì)象Pupil.prototype也有一個(gè)constructor屬性指回它的構(gòu)造函數(shù)Pupil。如下圖所示：

然而， 當(dāng)我們使用實(shí)例化Student去覆蓋Pupil.prototype后， 如果沒(méi)有第二行代碼的情況下， Pupil.prototype.constructor指向了Student構(gòu)造函數(shù)， 如下圖所示：

而且， pupil1.constructor會(huì)默認(rèn)調(diào)用Pupil.prototype.constructor， 這個(gè)時(shí)候pupil1.constructor指向了Student：

Pupil.prototype = new Student("小輝", 8, "小學(xué)義務(wù)教育課程");
let pupil1 = new Pupil("北大附小");

console.log(pupil1.constructor === Student); //true

這明顯是錯(cuò)誤的， pupil1明明是用Pupil構(gòu)造函數(shù)實(shí)例化出來(lái)的， 怎么其constructor指向了Student構(gòu)造函數(shù)呢。所以， 我們就需要加入第二行， 修正其錯(cuò)誤：

Pupil.prototype = new Student("小輝", 8, "小學(xué)義務(wù)教育課程");

//修正constructor的指向錯(cuò)誤
Pupil.prototype.constructor = Pupil;

let pupil1 = new Pupil("北大附小");

console.log(pupil1.constructor === Student); //false
console.log(pupil1.constructor === Pupil); //ture

上面就是我們的如何使用prototype實(shí)現(xiàn)繼承的例子， 需要特別注意的: 如果替換了prototype對(duì)象， 必須手動(dòng)將prototype.constructor重新指向其構(gòu)造函數(shù)。

2. 使用call和apply方法實(shí)現(xiàn)繼承

使用call和apply是我個(gè)人比較喜歡的繼承方式， 因?yàn)橹恍枰恍写a就可以實(shí)現(xiàn)繼承。但是該方法也有其局限性，call和apply不能繼承原型上的屬性和方法， 下面會(huì)有詳細(xì)說(shuō)明。

使用call實(shí)現(xiàn)繼承

同樣對(duì)于上面的Student構(gòu)造函數(shù)， 我們使用call實(shí)現(xiàn)Pupil繼承Student的全部屬性和方法：

//父類構(gòu)造函數(shù)
function Student (name, age, subject) {
  this.name = name;
  this.age = age; 
  this.subject = subject;
}

//子類構(gòu)造函數(shù)
function Pupil(name, age, subject, school) {
  //使用call實(shí)現(xiàn)繼承
  Student.call(this, name, age, subject);
  this.school = school;
}

//實(shí)例化Pupil
let pupil2 = new Pupil("小輝", 8, "小學(xué)義務(wù)教育課程", "北大附小");

需要注意的是， call和apply只能繼承本地屬性和方法， 而不能繼承原型上的屬性和方法，如下面的代碼所示, 我們給Student掛載study方法，Pupil使用call繼承Student后， 調(diào)用pupil2.study()會(huì)報(bào)錯(cuò)：

//父類構(gòu)造函數(shù)
function Student (name, age, subject) {
  this.name = name;
  this.age = age; 
  this.subject = subject;
}
//原型上掛載study方法
Student.prototype.study = function() {
  console.log("我在學(xué)習(xí)" + this.subject);
}

//子類構(gòu)造函數(shù)
function Pupil(name, age, subject, school) {
  //使用call實(shí)現(xiàn)繼承
  Student.call(this, name, age, subject);
  this.school = school;
}

let pupil2 = new Pupil("小輝", 8, "小學(xué)義務(wù)教育課程", "北大附小");

//報(bào)錯(cuò)
pupil2.study(); //Uncaught TypeError: pupil2.study is not a function

使用apply實(shí)現(xiàn)繼承
使用apply實(shí)現(xiàn)繼承的方式和call類似， 唯一的不同只是參數(shù)需要使用數(shù)組的方法。下面我們使用apply來(lái)實(shí)現(xiàn)上面Pupil繼承Student的例子。

//父類構(gòu)造函數(shù)
function Student (name, age, subject) {
  this.name = name;
  this.age = age; 
  this.subject = subject;
}

//子類構(gòu)造函數(shù)
function Pupil(name, age, subject, school) {
  //使用applay實(shí)現(xiàn)繼承
  Student.apply(this, [name, age, subject]);
  this.school = school;
}

//實(shí)例化Pupil
let pupil2 = new Pupil("小輝", 8, "小學(xué)義務(wù)教育課程", "北大附小");

3. 其他繼承方式

JavaScript中的繼承方式不僅僅只有上面提到的幾種方法， 在《JavaScript高級(jí)程序設(shè)計(jì)》中， 還有實(shí)例繼承，拷貝繼承，組合繼承，寄生組合繼承等眾多繼承方式。在寄生組合繼承中， 就很好的彌補(bǔ)了call和apply無(wú)法繼承原型屬性和方法的缺陷，是最完美的繼承方法。這里就不詳細(xì)的展開(kāi)論述，感興趣的可以自行閱讀《JavaScript高級(jí)程序設(shè)計(jì)》。

//定義類
class Student {
  //構(gòu)造方法
  constructor(name, age, subject) {
    this.name = name;
    this.age = age;
    this.subject = subject;
  }

  //類中的方法
  study(){
    console.log("我在學(xué)習(xí)" + this.subject);
  }
}

//實(shí)例化類
let student3 = new Student("阿輝", 24, "前端開(kāi)發(fā)");
student3.study(); //我在學(xué)習(xí)前端開(kāi)發(fā)

console.log(student3.__proto__.study === Student.prototype.study); //true
console.log(student3.hasOwnProperty("study")); // false

//子類
class Pupil extends Student{
  constructor(name, age, subject, school) {
    //調(diào)用父類的constructor
    super(name, age, subject); 
    this.school = school;
  }
}

let pupil = new Pupil("小輝", 8, "小學(xué)義務(wù)教育課程", "北大附小");
pupil.study(); //我在學(xué)習(xí)小學(xué)義務(wù)教育課程