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

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

創(chuàng)建對(duì)象（四種模式簡介，此外還有動(dò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)點(diǎn)：解決了多個(gè)相似對(duì)象的創(chuàng)建問題

缺點(diǎn)： ①? 對(duì)象識(shí)別問題無法解決（即怎么知道一個(gè)對(duì)象的類型）

二篓吁、構(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ù)，那么其屬性和方法都會(huì)被添加到window對(duì)象里面（因?yàn)樵谌肿饔糜蛘{(diào)用一個(gè)方法時(shí)蚪拦，this總是指向window對(duì)象）

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

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

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

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

注二： new 操作符實(shí)際上進(jìn)行了以下操作

? ? ? ? ? ① 創(chuàng)建一個(gè)新的對(duì)象

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

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

? ? ? ? ? ④ 返回這個(gè)新的對(duì)象

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

? ? ? ? ? ? ② 將屬性和方法賦給了this對(duì)象

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

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

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

? ? ? ? ? ? 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)點(diǎn)：①? 解決了函數(shù)共用的問題锹锰，不用每個(gè)實(shí)例都創(chuàng)建一遍方法芥炭。

缺點(diǎn)：①? 不能傳參

? ? ? ? ? ? ② 如果實(shí)例中修改了原型中的屬性（引用類型）或方法，那么這個(gè)屬性或方法會(huì)被徹底的修改恃慧，而影響到其他實(shí)例园蝠。

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

function Person (Name,Age,Job) {

? ? ? ? ? this.name= Name

? ? ? ? ? this.age= Age

? ? ? ? ? this.job= Job

}

Person.prototype.sayName= function () {

? ? ? ? ? alert(this.name)

}

// 上面往原型上添加屬性和方法的也可如下寫痢士，但是此時(shí)原型的constructor不指向Person構(gòu)造函數(shù)彪薛，而是指向Object，因?yàn)镻erson.prototype就像一個(gè)新的對(duì)象實(shí)例，它的__proto__指向Object原型善延。

//? Person.prototype= {

? ? ? ? ? constructor： Person,? ? ? ? ? ? // 重新再實(shí)例中定義constructor的指向训唱，覆蓋Object原型中的constructor指向

? ? ? ? ? sayName: function () {

? ? ? ? ? ? ? ? ? alert(this.name)

? ? ? ? ? }

}

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

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

原型對(duì)象的理解（重要）

1.首先得明白以下三點(diǎn)：

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

② 每個(gè)實(shí)例都有一個(gè)__proto__屬性挚冤，也指向Person原型

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

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

2.萬物皆對(duì)象澳骤，說明原型鏈的最開始點(diǎn)都是Object,所以任何一個(gè)引用類型的 instanceof Object都會(huì)返回true。

類的繼承（兩種方式）

一澜薄、原型鏈繼承

? ? ? ? 對(duì)于什么是原型鏈思恐？

? ? ? ? 每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象木西，原型對(duì)象的constructor指向這個(gè)構(gòu)造函數(shù)本身变擒，而實(shí)例的__proto__屬性又指向原型對(duì)象投队。這個(gè)假設(shè)一個(gè)實(shí)例的__proto__內(nèi)部指針指向其原型，而它的原型又是另一個(gè)類型的實(shí)例忘分，那么它的原型又將指向另一個(gè)原型棋枕，另一個(gè)原型也包含一個(gè)指向它的構(gòu)造函數(shù)的指針，假設(shè)另一個(gè)原型又是另一個(gè)類型的實(shí)例妒峦，這樣層層遞進(jìn)重斑，就構(gòu)成了實(shí)例與原型的鏈條，這就是原型鏈的基本概念肯骇。

實(shí)現(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]

原型鏈繼承的缺點(diǎn)：①? 不能傳參? ② 若原型上的方法時(shí)引用類型的話窥浪，不小心被修改了的話會(huì)影響其他實(shí)例。

二笛丙、借助構(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)胚鸯，原型上的方法和屬性不會(huì)繼承
child.hobby? ? ? ? ? ? ? ? ? ? ? //? "Play Games"

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

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

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

? ? ? ? ? ? 2.構(gòu)造函數(shù)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承傲须，且調(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()

檢測(cè)對(duì)象屬性的兩種方法：

object.hasOwnProperty(屬性名)泰讽，這個(gè)方法檢測(cè)的是對(duì)象實(shí)例的屬性(若是返回true)，不能檢測(cè)原型上的屬性。

in操作符已卸，檢測(cè)對(duì)象所有的屬性佛玄，包含原型和實(shí)例上的額，有的話就返回true.

判斷一個(gè)原型是否在某個(gè)實(shí)例的原型鏈上：

Person.prototype.isPropotypeOf(personOne)? ? //? true

Object.prototype.isPropotypeOf(personOne)? ? ? //? true

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

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

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

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

ES6中引入了Class(類)這個(gè)概念累澡，通過關(guān)鍵字class可以創(chuàng)建一個(gè)類梦抢。類的數(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同級(jí)的是ES5中原型上的方法和屬性。

ES6的繼承通過extends關(guān)鍵字實(shí)現(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對(duì)象。

子類必須在constructor方法中調(diào)用super方法甘改，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)旅东。這是因?yàn)樽宇悰]有自己的this對(duì)象，而是繼承父類的this對(duì)象十艾，然后對(duì)其進(jìn)行加工玉锌。如果不調(diào)用super方法，子類就得不到this對(duì)象疟羹。

類的prototype和__proto__屬性

Class作為構(gòu)造函數(shù)的語法唐主守，同時(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