"面向?qū)ο缶幊?（Object Oriented Programming，縮寫為OOP）本身是一種編程的思維模式，它把世界的一切看作是對(duì)象的集合，世界的運(yùn)轉(zhuǎn)就是靠一個(gè)個(gè)對(duì)象分工、合作的結(jié)果。

有了這么一種宏觀維度的編程認(rèn)知，那么我們?cè)诰幊虝r(shí)也就不會(huì)困在代碼的死胡同了出不來(lái)。

給一段小代碼做初步解釋：
我們?cè)诰W(wǎng)頁(yè)開發(fā)中，經(jīng)常要進(jìn)行事件綁定。

var btn = document.getElementById("button");
btn.addEventListener("click",function(){console.log("click me")})

初學(xué)時(shí)，筆者也是無(wú)意識(shí)的看到addEventListener()方法可以進(jìn)行事件綁定以實(shí)現(xiàn)點(diǎn)擊特定元素后，就可以實(shí)現(xiàn)需求就沒(méi)有再往深層次去想太多；

隨著學(xué)習(xí)的深入，在進(jìn)入OOP的章節(jié)，我們就會(huì)發(fā)現(xiàn)“一切皆對(duì)象”這句話的深刻性。

上面的代碼中，btn本身就一個(gè)對(duì)象，點(diǎn)擊時(shí)該對(duì)象將會(huì)調(diào)用自身的方法addEventListener()去干事。

一個(gè)完整的解釋就是誰(shuí)（對(duì)象）干了什么（方法），btn被點(diǎn)擊時(shí)干了輸出‘click me ’。

當(dāng)然這只是其中一個(gè)案例，JS的編程中這種編程模式貫通始終，如：

//1、定義一個(gè)對(duì)象
var sheep = {
  color: white,
  echo: function(){
      console.log("mae~~~")
  }
} 
sheep.echo()
//這只羊發(fā)出mae的叫聲

//2.設(shè)置對(duì)象的樣式
$(".passage").css({
      width: "100px",
      color: "pink"
  }
)
//這個(gè)名為passge的jquery對(duì)象被設(shè)置寬和色
......

總之，JavaScript的編程無(wú)法脫離對(duì)象而獨(dú)存

說(shuō)了那么久，如果連對(duì)象是什么都沒(méi)一個(gè)清晰的界定，那么在編程過(guò)程中還是存在模糊地帶。

什么是對(duì)象
對(duì)象可以說(shuō)是對(duì)現(xiàn)實(shí)事物的抽象，對(duì)象封裝了屬性和方法，屬性值指的是對(duì)象的狀態(tài)，方法指的是對(duì)象的行為。

比如，我們把NBA的巨星kobe抽象為javascript里的對(duì)象：

var kobe = {
    team: "Los Angeles Lakers",
    position: "shooting guard",
    ability :  function(){
        console.log("impress those who like basketball")
  }
}

現(xiàn)實(shí)世界的科比抽象為js中kobe這一對(duì)象，效力于洛杉磯湖人和位置是得分后衛(wèi)是他的屬性，能力是影響許多愛好籃球的人是他的方法。

什么是"類"(構(gòu)造函數(shù))

按照圣經(jīng)的記載，在第一章的創(chuàng)世紀(jì)中寫道：“神按照著自己的形象造人?！?/p>

現(xiàn)實(shí)世界的萬(wàn)物（對(duì)象）的演化不是憑空誕生的，它需要按照一個(gè)模板去構(gòu)造出各種實(shí)例出來(lái)。

因此，類（構(gòu)造函數(shù)）就是提供這么一種模板的‘對(duì)象’（函數(shù)本身在js中就是對(duì)象），它是對(duì)象的抽象。

但是，js中并沒(méi)有類的概念，而是通過(guò)構(gòu)造函數(shù)替代了類的功能，為某一類的對(duì)象提供共同的屬性和方法。

通過(guò)構(gòu)造函數(shù)能夠創(chuàng)造各種具有特定類的屬性和方法的實(shí)例對(duì)象。

比如，定義一個(gè)籃球運(yùn)動(dòng)員的類(構(gòu)造函數(shù))：

//定義一個(gè)類，該類包含了一個(gè)籃球運(yùn)動(dòng)員應(yīng)有的屬性和方法
var BasketballPlayer = function(){
   this.height = "180+",
   this.muscle = true,
   this.ability = function(){
        console.log("shooting and passing ")
    }
}

//由類（構(gòu)造函數(shù)）創(chuàng)造出3個(gè)實(shí)例對(duì)象
var kobe = new BasketballPlayer();
var james =new BasketballPlayer();
var curry =new BasketballPlayer();

這里有個(gè)小問(wèn)題，構(gòu)造函數(shù)BasketballPlayer又是有誰(shuí)構(gòu)造出來(lái)呢？看了下面的代碼便知~~~

BasketballPlayer instanceof Object//true
構(gòu)造函數(shù)或者是函數(shù)在js中天生就是構(gòu)造函數(shù)Object的實(shí)例

所以說(shuō)，所有的實(shí)例對(duì)象都有類（構(gòu)造函數(shù)）創(chuàng)造出來(lái)，而所有的構(gòu)造函數(shù)都是由最為一般的類，即Object構(gòu)造出來(lái)，故一切皆對(duì)象。

【注】
類在js中表現(xiàn)為構(gòu)造函數(shù)，為了準(zhǔn)確起見，下面統(tǒng)一稱為構(gòu)造函數(shù)，我們只需要知道二者起到的作用是一致就行。

前面我們了解到，世間萬(wàn)物（實(shí)例對(duì)象）都是按照特定的模板（類或構(gòu)造函數(shù)）構(gòu)造的，而所有的構(gòu)造函數(shù)都是由最一般的構(gòu)造函數(shù)Object構(gòu)造的。

但是，我們或許看到下面的代碼會(huì)產(chǎn)生這么一種疑惑：
1.構(gòu)造函數(shù)中的Book的this是干嘛的，有什么門道？
2.利用構(gòu)造函數(shù)Book構(gòu)造實(shí)例javascript時(shí)new起到什么作用
3.為什么我構(gòu)造出一個(gè)實(shí)例對(duì)象后，這個(gè)構(gòu)造函數(shù)能夠返回一個(gè)對(duì)象給我
總結(jié)成一句就是：在整個(gè)造物的過(guò)程中，構(gòu)造函數(shù)的運(yùn)作機(jī)制是怎么樣的？？？

var Book = function(){
    this.material = "paper";
    this.color = "white";
    this.utility = function(){
       console.log("IQ+");
  }
    this.whoAmI = function(){
      console.log(this)
  }
}

var javascript = new Book()

this在構(gòu)造函數(shù)的作用

關(guān)鍵字this在js中顯得十分重要，它在不同的運(yùn)行環(huán)境（屬性和方法的調(diào)用者）指向的環(huán)境（對(duì)象）不同，也就是說(shuō)this的指向是動(dòng)態(tài)的，但是無(wú)論this的指向是誰(shuí)，只要清楚屬性和方法的調(diào)用者是誰(shuí)那么this就指向誰(shuí)。

//在瀏覽器全局環(huán)境下，即window對(duì)象下
var print = function(){
      console.log(this)
 }
print()//this指向Window，因?yàn)檫@是Window對(duì)象調(diào)用了print方法

//在特定對(duì)象的環(huán)境下
var o = {
    print: function(){
      console.log(this)
  }
}
o.print()//this指向o，因?yàn)檫@是o對(duì)象調(diào)用print方法

因此，回到構(gòu)造函數(shù)中的this來(lái)，當(dāng)執(zhí)行 var javascript = new Book()時(shí)，此時(shí)是javascript這個(gè)實(shí)例對(duì)象調(diào)用了構(gòu)造函數(shù)Book，函數(shù)內(nèi)部的this指向javascript這一實(shí)例對(duì)象

javascript.whoAmI()//this此時(shí)指向javascript對(duì)象

【注】更多this的知識(shí)詳見what"s this???

new命令的原理

接下來(lái)談一談new命令的原理。

new命令的作用，就是執(zhí)行構(gòu)造函數(shù)，返回一個(gè)實(shí)例對(duì)象

與普通的正常調(diào)用函數(shù)不同，在函數(shù)執(zhí)行前面附加new命令，函數(shù)執(zhí)行以下步驟：

1.創(chuàng)建一個(gè)空對(duì)象，作為將要返回的實(shí)例對(duì)象；
2.將這個(gè)空對(duì)象的原型``__proto__``指向構(gòu)造函數(shù)的prototype屬性以實(shí)現(xiàn)繼承機(jī)制
3.將這個(gè)空對(duì)象賦值給函數(shù)內(nèi)部的this關(guān)鍵字
4.開始執(zhí)行構(gòu)造函數(shù)內(nèi)部的代碼

原型對(duì)象

上面我們基本了解構(gòu)造函數(shù)在創(chuàng)造實(shí)例對(duì)象時(shí)的部分運(yùn)作機(jī)制，明白了this關(guān)鍵字和new命令在構(gòu)造實(shí)例時(shí)所起的作用。

現(xiàn)在有一個(gè)最最重要的疑問(wèn)是實(shí)例對(duì)象究竟是如何繼承構(gòu)造函數(shù)中設(shè)定好的屬于該類的共有的屬性和方法呢？

prototype object

JavaScript中每個(gè)實(shí)例對(duì)象繼承自另一個(gè)對(duì)象，后者被稱為原型對(duì)象，原型對(duì)象上的屬性和方法都能被派生對(duì)象共享，這就是JavaScript著名的繼承機(jī)制的基本設(shè)計(jì)。

先上一段代碼用于講解：

function Dog(name,color){
  this.name = name;
  this.color = color;
}

Dog.prototype.spark = function(){
    console.log("Wow~~~")
}
var tony = new Dog("tony","white")

1.通過(guò)構(gòu)造函數(shù)Dog生成的實(shí)例對(duì)象tony，會(huì)自動(dòng)為實(shí)例對(duì)象tony分配原型對(duì)象；

2.每一個(gè)構(gòu)造函數(shù)都有一個(gè)prototype屬性，該屬性就是實(shí)例對(duì)象的原型對(duì)象

3.實(shí)例對(duì)象內(nèi)部有一個(gè)__proto__屬性，該屬性在被構(gòu)造函數(shù)一創(chuàng)造出來(lái)就指向構(gòu)造函數(shù)的protype屬性

這樣一來(lái)，我們通過(guò)構(gòu)造函數(shù)Dog中的原型對(duì)象prototype實(shí)現(xiàn)了實(shí)例對(duì)象tony對(duì)Dog的共有屬性和方法的繼承。

因此，我們可以得出的思考是，原型對(duì)象定義所有實(shí)例對(duì)象的共有的屬性和方法，所有的實(shí)例對(duì)象無(wú)非是從原型對(duì)象衍生出的子對(duì)象，只不過(guò)在后來(lái)給它添加了特有的屬性和方法罷了。

prototype chain

實(shí)例對(duì)象tony的__proto__指向構(gòu)造函數(shù)Dog的prototype對(duì)象，因此繼承了Dog中prototype的屬性和方法；

而構(gòu)造函數(shù)本身也存在__proto__指向更一般的函數(shù)（本質(zhì)上也是對(duì)象）的prototype對(duì)象；

更進(jìn)一步，該函數(shù)也存在__proto__指向最一般的構(gòu)造函數(shù)Object的prototype對(duì)象

這種層層嵌套的關(guān)系形成一條原型鏈（prototype chain）。

一只名叫tony的狗，首先繼承了構(gòu)造函數(shù)Dog的原型對(duì)象，而Dog的原型對(duì)象中的__proto__有繼承了函數(shù)的原型對(duì)象，函數(shù)對(duì)象中的__proto__有繼承了Oject的原型對(duì)象。

這里再一次體現(xiàn)了構(gòu)造函數(shù)Object的威力，所有的對(duì)象無(wú)非都是Object的衍生，均繼承Object.prototype的屬性和方法,更加深刻表達(dá)“一切皆對(duì)象”的思想。

instanceof 運(yùn)算符
instanceof運(yùn)算符返回一個(gè)布爾值，表示指定對(duì)象是否為某個(gè)構(gòu)造函數(shù)的實(shí)例

tony instanceof Dog//true
or
Dog.prototype.isPrototypeOf(tony)//true

Object.getPrototypeOf()

Object.getPrototypeOf()返回一個(gè)對(duì)象的原型，這是獲取原型對(duì)象的標(biāo)準(zhǔn)方法

Object.setPrototypeOf()
Object.setPrototypeOf

方法可以為現(xiàn)有對(duì)象設(shè)置原型，返回一個(gè)新對(duì)象，該方法接受兩個(gè)參數(shù)，第一個(gè)是現(xiàn)有對(duì)象，第二個(gè)是原型對(duì)象。

var foo = { x:1 };
var bar = Object.setPrototypeOf({},foo)
bar.x === 1//true

我們之前以new命令去構(gòu)建實(shí)例對(duì)象，本質(zhì)上就是把一個(gè)空對(duì)象的proto指向構(gòu)造函數(shù)的prototype，然后在實(shí)例對(duì)象上執(zhí)行構(gòu)造函數(shù)

var  Person = function(){
    this.race = "monkey"
};
var Asian = new Person();
//等價(jià)于
var Asian = Object.setPrototypeOf({},Person.prototype);
Person.call(Asian)

Object.create()
Object.create方法用于從原型對(duì)象生成新的實(shí)例對(duì)象，可以替代new命令

var  Person = {
    race: "monkey"
}
var Asian = Object.create(Person)
//等價(jià)于
var Person = function(){
    this.race="monkey"
}
var Asian = new Person()

Object.isPrototypeOf()
對(duì)象實(shí)例的isPrototypeOf方法，用來(lái)判斷一個(gè)對(duì)象是否是另一個(gè)對(duì)象的原型。

var obj1 = {};
var obj2 = Object.create(obj1);
obj1.isPrototypeOf(obj2)//true

Object.prototype.hasOwnProperty()
對(duì)象實(shí)例的hasOwnProperty方法返回一個(gè)布爾值，用于判斷某個(gè)屬性定義在對(duì)象自身，還是定義在原型鏈上。

var o = {
  name:"teren"
}
o.hasOwnProperty("name")//true
o.hasOwnProperty("toString")//false
Object.getPrototypeOf(o).hasOwnProperty("toString")//true

參考文獻(xiàn)：

阮一峰-JavaScript標(biāo)準(zhǔn)參考教程
饑人谷學(xué)習(xí)筆記