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

有了這么一種宏觀維度的編程認(rèn)知，那么我們在編程時也就不會困在代碼的死胡同了出不來。

給一段小代碼做初步解釋：
我們在網(wǎng)頁開發(fā)中，經(jīng)常要進行事件綁定。

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

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

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

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

一個完整的解釋就是誰（對象）干了什么（方法），btn被點擊時干了輸出‘click me ’。

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

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

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

總之，JavaScript的編程無法脫離對象而獨存

說了那么久，如果連對象是什么都沒一個清晰的界定，那么在編程過程中還是存在模糊地帶。

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

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

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

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

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

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

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

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

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

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

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

//定義一個類，該類包含了一個籃球運動員應(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個實例對象
var kobe = new BasketballPlayer();
var james =new BasketballPlayer();
var curry =new BasketballPlayer();

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

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

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

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

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

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

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中顯得十分重要，它在不同的運行環(huán)境（屬性和方法的調(diào)用者）指向的環(huán)境（對象）不同，也就是說this的指向是動態(tài)的，但是無論this的指向是誰，只要清楚屬性和方法的調(diào)用者是誰那么this就指向誰。

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

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

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

javascript.whoAmI()//this此時指向javascript對象

【注】更多this的知識詳見what"s this???

new命令的原理

接下來談一談new命令的原理。

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

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

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

原型對象

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

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

prototype object

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

先上一段代碼用于講解：

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

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

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

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

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

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

因此，我們可以得出的思考是，原型對象定義所有實例對象的共有的屬性和方法，所有的實例對象無非是從原型對象衍生出的子對象，只不過在后來給它添加了特有的屬性和方法罷了。

prototype chain

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

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

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

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

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

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

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

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

Object.getPrototypeOf()

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

Object.setPrototypeOf()
Object.setPrototypeOf

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

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

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

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

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

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

Object.isPrototypeOf()
對象實例的isPrototypeOf方法，用來判斷一個對象是否是另一個對象的原型。

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

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

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

參考文獻：

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