物件導向(ES5與ES6類的繼承解析)

物件導向的語言都有一個類的概念，通過類可以建立多個具有相同方法和屬性的物件，ES6之前並沒有類的概念，在ES6中引入類class.

ES5 物件導向

建立物件（四種模式簡介，此外還有動態原型模式、寄生建構函式模式、穩妥建構函式模式等）

一、工廠模式

function createPerson (Name,Age,Job) {

var man= new Object();

man.name= Name;

man.age= Age;

man.job= Job;

man.sayName= function () {

alert(this.name)

}

return man;

}

var personOne= createPerson ("Erric",26,"Engineer");

var personTwo= createPerson ("Lori",26,"teacher");

優點：解決了多個相似物件的建立問題

缺點： ① 物件識別問題無法解決（即怎麼知道一個物件的型別）

二、建構函式模式

function Person (Name,Age,Job) {

this.name = Name;

this.age = Age;

this.job= Job;

this.sayName= function () {

alert(this.name)

}

var personOne= new Person("Erric",26,"Engineer");

var personTwo= new Person("Lori",26,"teacher");

注一：若不使用new操作符直接呼叫函式，那麼其屬性和方法都會被新增到window物件裡面（因為在全域性作用域呼叫一個方法時，this總是指向window物件）

如： Person("Erric",26,"Enginee")

window.sayName() // 彈出 "Erric"

window.name // "Erric"

window.age // 26

注二： new 操作符實際上進行了以下操作

① 建立一個新的物件

② 將建構函式的作用域賦給新物件（this指向了這個新的物件）

③ 執行建構函式中的程式碼（為這個新物件新增屬性）

④ 返回這個新的物件

優點：① 不用顯式的建立物件

② 將屬性和方法賦給了this物件

③ 沒有return語句

缺點：① 每個方法都要在每個例項上重新建立一遍（personOne和personTwo中的sayName方法不是同一個方法，每個函式都是一個物件，故每定義了一個函式就例項化了一個物件）。

此問題也可以通過將方法單獨抽出來解決(但是方法一多，都移到全域性的話封裝性就無從談起)，如下：

function Person (Name,Age,Job) {

this.name = Name;

this.age = Age;

this.job= Job;

this.sayName= sayName

}

function sayName() {

alert(this.name)

}

var personOne= new Person("Erric",26,"Engineer");

var personTwo= new Person("Lori",26,"teacher");

② 若是將公共的sayName方法移到全域性，那麼又沒有封裝性可言了。

三、原型模式

function Person () {

}

Person.prototype.name= "Erric"

Person.prototype.age= "28"

Person.prototype.job= "Job"

Person.prototype.sayName= function () {

alert(this.sayName)

}

優點：① 解決了函式共用的問題，不用每個例項都建立一遍方法。

缺點：① 不能傳參

② 如果例項中修改了原型中的屬性（引用型別）或方法，那麼這個屬性或方法會被徹底的修改，而影響到其他例項。

四、建構函式+原型組合模式

function Person (Name,Age,Job) {

this.name= Name

this.age= Age

this.job= Job

}

Person.prototype.sayName= function () {

alert(this.name)

}

// 上面往原型上新增屬性和方法的也可如下寫，但是此時原型的constructor不指向Person建構函式，而是指向Object，因為Person.prototype就像一個新的物件例項，它的__proto__指向Object原型。

// Person.prototype= {

constructor： Person, // 重新再例項中定義constructor的指向，覆蓋Object原型中的constructor指向

sayName: function () {

alert(this.name)

}

var personOne= new Person("Erric",26,"Engineer");

var personTwo= new Person("Lori",26,"teacher");

原型物件的理解（重要）

1.首先得明白以下三點：

① 每個函式（含建構函式）都有一個prototype屬性，指向Person原型

② 每個例項都有一個__proto__屬性，也指向Person原型

③ 每個原型都有一個constructor屬性，指向其對應的建構函式

建構函式、例項、原型三者關係如下圖：

2.萬物皆物件，說明原型鏈的最開始點都是Object,所以任何一個引用型別的 instanceof Object都會返回true。

類的繼承（兩種方式）

一、原型鏈繼承

對於什麼是原型鏈？

每個建構函式都有一個原型物件，原型物件的constructor指向這個建構函式本身，而例項的__proto__屬性又指向原型物件。這個假設一個例項的__proto__內部指標指向其原型，而它的原型又是另一個型別的例項，那麼它的原型又將指向另一個原型，另一個原型也包含一個指向它的建構函式的指標，假設另一個原型又是另一個型別的例項，這樣層層遞進，就構成了例項與原型的鏈條，這就是原型鏈的基本概念。

實現原型鏈的繼承方式基本如下：

function Father () {

this.appearance = "beautiful"

}

Father.prototype.sayHappy = function () {

alert("快樂")

}

function Child () {

this.name= "Jhon"

}

Child.prototype= new Father() // 繼承了父類的方法和屬性

Child.prototype.addArr= [1,2,3,4,5]

var child= new Child()
child.sayHappy() // 彈出“快樂”
child.appearance // "beautiful"

child.addArr // [1,2,3,4,5]

原型鏈繼承的缺點：① 不能傳參 ② 若原型上的方法時引用型別的話，不小心被修改了的話會影響其他例項。

二、藉助建構函式繼承(利用calll和apply改變this指標)

基本思路：在子型別建構函式的內部呼叫超型別的建構函式。

function Father (Hobby){

this.hobby= Hobby

}

Father.prototype.sayHappy = function () {

alert("快樂")

}

function Child () {

this.name= "Jhon"

Father.call(this,"Play Games") // 或者Father.apply(this,["Play Games"])，繼承了Father的屬性和方法

}

var child = new Child()
child.sayHappy // 沒有反應，原型上的方法和屬性不會繼承
child.hobby // "Play Games"

藉助建構函式繼承的缺點：① 方法都在建構函式中定義，函式的複用無從談起 ② 超類中的方法對子類不可見。

三、組合繼承（也叫經典繼承，將原型鏈和藉助建構函式繼承相結合）

思路：1.原型鏈實現對原型屬性和方法的繼承；

2.建構函式實現對例項屬性的繼承，且呼叫基類的建構函式；

function Father(Hobby) {

this.hobby= Hobby;

this.exGF = ['cuihua', 'erya']

}

Father.prototype.sayHappy = function () {

alert("快樂")

}

function Child () {

this.name= "Jhon"

Father.call(this,"Play Games") // 或者Father.apply(this,["Play Games"])，繼承了Father的屬性和方法

}

Child.prototype= new Father()

Student.prototype.sayName= function () {

alert(this.name);

}

var liHua= new Child()

liHua.sayHappy()

liHua.sayName()

檢測物件屬性的兩種方法：

object.hasOwnProperty(屬性名)，這個方法檢測的是物件例項的屬性(若是返回true)，不能檢測原型上的屬性。

in操作符，檢測物件所有的屬性，包含原型和例項上的額，有的話就返回true.

判斷一個原型是否在某個例項的原型鏈上：

Person.prototype.isPropotypeOf(personOne) // true

Object.prototype.isPropotypeOf(personOne) // true

判斷一個建構函式是否在例項的原型鏈中出現過：

personOne instanceof Person // true

personOne instanceof Object // true

ES6 物件導向

ES6中引入了Class(類)這個概念，通過關鍵字class可以建立一個類。類的資料型別就是函式，類的所有方法都定義在prototype屬性上。

class Person () {
constructor (x,y) {
this.name= x
this.age= y
}
sayName () {
alert("快樂")
}
}
var liHua= new Person("張俊澤",26)

注：可以理解為constuctor中的屬性和方法為ES5中的建構函式部分，和constructor同級的是ES5中原型上的方法和屬性。

ES6的繼承通過extends關鍵字實現

class Father(){}
class Child extends Father {
constructor(x,y,color){
super(x,y)
this.color= color
}
toString() {
retunr "世界和平！"
}
}

上面程式碼中，constructor方法和toString方法之中，都出現了super關鍵字，它在這裡表示父類的建構函式，用來新建父類的this物件。

子類必須在constructor方法中呼叫super方法，否則新建例項時會報錯。這是因為子類沒有自己的this物件，而是繼承父類的this物件，然後對其進行加工。如果不呼叫super方法，子類就得不到this物件。

類的prototype和__proto__屬性

Class作為建構函式的語法唐，同時有prototype和__proto__屬性，因此存在兩條繼承鏈：

① 子類的__proto__，表示建構函式的繼承，總是指向父類

② 子類的prototype屬性的__proto__屬性，表示方法的繼承，總是指向父類的prototype屬性。

class Father {

}

class Child extends Father{

constructor () {

super()

}

var childOne= new Child()

Child.__proto__ == Father // true

childOne.__proto__ == Child.prototype // true

Child.prototype.__proto__ == Fahter.prototype // true

物件導向(ES5與ES6類的繼承解析)

ES5 物件導向

建立物件（四種模式簡介，此外還有動態原型模式、寄生建構函式模式、穩妥建構函式模式等）

類的繼承（兩種方式）

ES6 物件導向

相關文章