面向?qū)ο蟮恼Z言都有一個類的概念，通過類可以創(chuàng)建多個具有相同方法和屬性的對象，ES6之前并沒有類的概念，在ES6中引入類class.

ES5 面向?qū)ο?/b>

創(chuàng)建對象（四種模式簡介，此外還有動態(tài)原型模式、寄生構(gòu)造函數(shù)模式、穩(wěn)妥構(gòu)造函數(shù)模式等）

一、工廠模式

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");

優(yōu)點：解決了多個相似對象的創(chuàng)建問題

缺點： ①? 對象識別問題無法解決（即怎么知道一個對象的類型）

二、構(gòu)造函數(shù)模式

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操作符直接調(diào)用函數(shù)，那么其屬性和方法都會被添加到window對象里面（因為在全局作用域調(diào)用一個方法時，this總是指向window對象）

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

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

? ? ? ? ? window.name? ? ? ? ? ? //? "Erric"

? ? ? ? ? window.age? ? ? ? ? ? ? //? 26

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

? ? ? ? ? ① 創(chuàng)建一個新的對象

? ? ? ? ? ② 將構(gòu)造函數(shù)的作用域賦給新對象（this指向了這個新的對象）

? ? ? ? ? ③ 執(zhí)行構(gòu)造函數(shù)中的代碼（為這個新對象添加屬性）

? ? ? ? ? ④ 返回這個新的對象

優(yōu)點：① 不用顯式的創(chuàng)建對象

? ? ? ? ? ? ② 將屬性和方法賦給了this對象

? ? ? ? ? ? ③ 沒有return語句

缺點：①? 每個方法都要在每個實例上重新創(chuàng)建一遍（personOne和personTwo中的sayName方法不是同一個方法，每個函數(shù)都是一個對象，故每? 定義了一個函數(shù)就實例化了一個對象）。

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

? ? ? ? ? ? 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)

}

優(yōu)點：①? 解決了函數(shù)共用的問題，不用每個實例都創(chuàng)建一遍方法。

缺點：①? 不能傳參

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

四、構(gòu)造函數(shù)+原型組合模式

function Person (Name,Age,Job) {

? ? ? ? ? this.name= Name

? ? ? ? ? this.age= Age

? ? ? ? ? this.job= Job

}

Person.prototype.sayName= function () {

? ? ? ? ? alert(this.name)

}

// 上面往原型上添加屬性和方法的也可如下寫，但是此時原型的constructor不指向Person構(gòu)造函數(shù)，而是指向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.首先得明白以下三點：

① 每個函數(shù)（含構(gòu)造函數(shù)）都有一個prototype屬性，指向Person原型

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

③ 每個原型都有一個constructor屬性，指向其對應(yīng)的構(gòu)造函數(shù)

構(gòu)造函數(shù)、實例、原型三者關(guān)系如下圖：

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

類的繼承（兩種方式）

一、原型鏈繼承

? ? ? ? 對于什么是原型鏈？

? ? ? ? 每個構(gòu)造函數(shù)都有一個原型對象，原型對象的constructor指向這個構(gòu)造函數(shù)本身，而實例的__proto__屬性又指向原型對象。這個假設(shè)一個實例的__proto__內(nèi)部指針指向其原型，而它的原型又是另一個類型的實例，那么它的原型又將指向另一個原型，另一個原型也包含一個指向它的構(gòu)造函數(shù)的指針，假設(shè)另一個原型又是另一個類型的實例，這樣層層遞進，就構(gòu)成了實例與原型的鏈條，這就是原型鏈的基本概念。

實現(xiàn)原型鏈的繼承方式基本如下：

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]

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

二、借助構(gòu)造函數(shù)繼承(利用calll和apply改變this指針)

基本思路：在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型的構(gòu)造函數(shù)。

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? ? ? ? ? ? ? ? // 沒有反應(yīng)，原型上的方法和屬性不會繼承
child.hobby? ? ? ? ? ? ? ? ? ? ? //? "Play Games"

借助構(gòu)造函數(shù)繼承的缺點：①? 方法都在構(gòu)造函數(shù)中定義，函數(shù)的復(fù)用無從談起? ? ②? 超類中的方法對子類不可見。

三、組合繼承（也叫經(jīng)典繼承，將原型鏈和借助構(gòu)造函數(shù)繼承相結(jié)合）

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

? ? ? ? ? ? 2.構(gòu)造函數(shù)實現(xiàn)對實例屬性的繼承，且調(diào)用基類的構(gòu)造函數(shù)；

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()

Child.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

判斷一個構(gòu)造函數(shù)是否在實例的原型鏈中出現(xiàn)過：

personOne instanceof Person? ? ? ? ? ? ? ? //? true

personOne instanceof Object? ? ? ? ? ? ? ? //? true

ES6 面向?qū)ο?/b>

ES6中引入了Class(類)這個概念，通過關(guān)鍵字class可以創(chuàng)建一個類。類的數(shù)據(jù)類型就是函數(shù)，類的所有方法都定義在prototype屬性上。

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

注： 可以理解為constuctor中的屬性和方法為ES5中的構(gòu)造函數(shù)部分，和constructor同級的是ES5中原型上的方法和屬性。

ES6的繼承通過extends關(guān)鍵字實現(xiàn)

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

上面代碼中，constructor方法和toString方法之中，都出現(xiàn)了super關(guān)鍵字，它在這里表示父類的構(gòu)造函數(shù)，用來新建父類的this對象。

子類必須在constructor方法中調(diào)用super方法，否則新建實例時會報錯。這是因為子類沒有自己的this對象，而是繼承父類的this對象，然后對其進行加工。如果不調(diào)用super方法，子類就得不到this對象。

類的prototype和__proto__屬性

Class作為構(gòu)造函數(shù)的語法唐，同時有prototype和__proto__屬性，因此存在兩條繼承鏈：

①? 子類的__proto__，表示構(gòu)造函數(shù)的繼承，總是指向父類

②? 子類的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