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

(一) ES5中對象的創(chuàng)建

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

1. 使用對象字面量的方式

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

var student1 = {  
name: '阿輝',  
age: 22,  
subject: '前端開發(fā)'  
};  
var student2 = {  
name: '阿傻',  
age: 22,  
subject: '大數(shù)據(jù)開發(fā)'  
}; 

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

• 在生成多個實例對象時， 我們需要每次重復寫name,age,subject屬性，寫起來特別的麻煩
• 雖然都是學生的對象， 但是看不出student1和student2之間有什么聯(lián)系。

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

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

構(gòu)造函數(shù)就其實就是一個普通的函數(shù)，當對構(gòu)造函數(shù)使用new進行實例化時，會將其內(nèi)部this的指向綁定實例對象上，下面我們來創(chuàng)建一個Student構(gòu)造函數(shù)（構(gòu)造函數(shù)約定使用大寫開頭，和普通函數(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ù)， 那么我們使用普通函數(shù)的調(diào)用方式嘗試調(diào)用Student。

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

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

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

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

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

(二) ES5中對象的繼承

1. prototype的原型繼承

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

為什么要使用prototype？

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

function Student (name, age, subject) {  
  this.name = name;  
  this.age = age;  
  this.subject = subject;  
  this.study = function() { 
    console.log('我在學習' + this.subject);  
  }  
} 

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

let student1 = new Student('阿輝', 22, '前端開發(fā)');  
let student2 = new Student('阿傻', 22, '大數(shù)據(jù)開發(fā)');  
student1.study(); //我在學習前端開發(fā)  
student2.study(); //我在學習大數(shù)據(jù)開發(fā) 

這樣生成的實例對象表面上看沒有任何問題， 但是其實是有很大的性能問題！我們來看下面一段代碼：

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

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

那么我們在MDN中看一下在JavaScript中我們使用的String實例對象有多少方法？

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

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

function Student (name, age, subject) {  
  this.name = name;  
  this.age = age;  
  this.subject = subject;  
}  
Student.prototype.study = function() {  
  console.log('我在學習' + this.subject);  
} 

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

let student1 = new Student('阿輝', 22, '前端開發(fā)');  
let student2 = new Student('阿傻', 22, '大數(shù)據(jù)開發(fā)');  
student1.study(); //我在學習前端開發(fā)  
student2.study(); //我在學習大數(shù)據(jù)開發(fā)  
console.log(student1.study === student2.study); //true 

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

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

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

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

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

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

代碼的***行， 我們將Pupil的原型對象（Pupil.prototype）指向了Student的實例對象。

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

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

Pupil.prototype.constructor = Pupil; 

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

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

而且， pupil1.constructor會默認調(diào)用Pupil.prototype.constructor， 這個時候pupil1.constructor指向了Student：

Pupil.prototype = new Student('小輝', 8, '小學義務(wù)教育課程');  
let pupil1 = new Pupil('北大附小');  
console.log(pupil1.constructor === Student); //true 

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

Pupil.prototype = new Student('小輝', 8, '小學義務(wù)教育課程');  
//修正constructor的指向錯誤  
Pupil.prototype.constructor = Pupil;  
let pupil1 = new Pupil('北大附小');  
console.log(pupil1.constructor === Student); //false  
console.log(pupil1.constructor === Pupil); //ture 

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

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

使用call和apply是我個人比較喜歡的繼承方式， 因為只需要一行代碼就可以實現(xiàn)繼承。但是該方法也有其局限性，call和apply不能繼承原型上的屬性和方法， 下面會有詳細說明。

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

同樣對于上面的Student構(gòu)造函數(shù)， 我們使用call實現(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實現(xiàn)繼承  
Student.call(this, name, age, subject);  
this.school = school;  
}  
//實例化Pupil  
let pupil2 = new Pupil('小輝', 8, '小學義務(wù)教育課程', '北大附小'); 

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

//父類構(gòu)造函數(shù)  
function Student (name, age, subject) {  
this.name = name;  
this.age = age;  
this.subject = subject;  
}  
//原型上掛載study方法  
Student.prototype.study = function() {  
console.log('我在學習' + this.subject);  
}  
//子類構(gòu)造函數(shù)  
function Pupil(name, age, subject, school) {  
//使用call實現(xiàn)繼承  
Student.call(this, name, age, subject);  
this.school = school;  
}  
let pupil2 = new Pupil('小輝', 8, '小學義務(wù)教育課程', '北大附小');  
//報錯  
pupil2.study(); //Uncaught TypeError: pupil2.study is not a function 

使用apply實現(xiàn)繼承

使用apply實現(xiàn)繼承的方式和call類似， 唯一的不同只是參數(shù)需要使用數(shù)組的方法。下面我們使用apply來實現(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實現(xiàn)繼承  
Student.apply(this, [name, age, subject]);  
this.school = school;  
}  
//實例化Pupil  
let pupil2 = new Pupil('小輝', 8, '小學義務(wù)教育課程', '北大附小'); 

3. 其他繼承方式

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

三. ES6中的面向?qū)ο?/strong>

//定義類  
class Student {  
//構(gòu)造方法  
constructor(name, age, subject) {  
this.name = name;  
this.age = age;  
this.subject = subject;  
}  
//類中的方法  
study(){  
console.log('我在學習' + this.subject);  
}  
}  
//實例化類  
let student3 = new Student('阿輝', 24, '前端開發(fā)');  
student3.study(); //我在學習前端開發(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, '小學義務(wù)教育課程', '北大附小');  
pupil.study(); //我在學習小學義務(wù)教育課程