寫在前面：
JS 面向?qū)ο?在前端學(xué)習(xí)來說 一直是個重點和難點决记，不過在前端學(xué)習(xí)中 是很重要的思想 在es6 還有框架中 都有廣泛的使用，所以是前端開發(fā)者必須要學(xué)會的知識
我在工作中用面向?qū)ο蟮臅r候比較少 所以基本學(xué)完之后就廢棄了 基本忘的差不多了 最近開始學(xué)習(xí)react了 發(fā)現(xiàn)react上來就開始用es6的class定義類（class是一個語法糖 能簡化構(gòu)造函數(shù)原型的寫法更加清晰）里面就涉及到了面向?qū)ο蟮闹R倍踪，發(fā)現(xiàn)自己已經(jīng)忘的差不多了 構(gòu)造函數(shù) 原型 實例的關(guān)系也搞不明白了 所以我就抽時間又查閱了一些資料 自己用我的理解總結(jié)一下 希望對大家能有所幫助
面向?qū)ο蟮母拍睿?/h2>
在js的j世界里一般會把構(gòu)造函數(shù)看成一個面向?qū)ο笙倒鋵嵜嫦驅(qū)ο髲谋砻嬉馑祭斫馐敲嫦蛉值囊粋€對象，構(gòu)造函數(shù)就是那個面向全局的對象（函數(shù)本身就是一個對象）
說到構(gòu)造函數(shù) 不得不先說下創(chuàng)建對象的方式：
ps：萬物皆對象
1. 最簡單的方式就是通過new Object()或者直接用簡寫形式 對象字面量 直接創(chuàng)建就好：
var person = new Object()
person.name = 'Jack'
person.age = 18
person.sayName = function () {
console.log(this.name)
}
或者直接 ↓ （推薦）
var person = {
name: 'Jack',
age: 18,
sayName: function () {
console.log(this.name)
}
}
對于上面的寫法固然沒有問題建车，但是假如我們要生成兩個 person 實例對象呢扩借？
var person1 = {
name: 'Jack',
age: 18,
sayName: function () {
console.log(this.name)
}
}
var person2 = {
name: 'Mike',
age: 16,
sayName: function () {
console.log(this.name)
}
}
通過上面的代碼我們不難看出，這樣寫的代碼太過冗余缤至，重復(fù)性太高潮罪。
2. 簡單方式的改進(jìn)——工廠模式：
我們可以寫一個函數(shù)，解決代碼重復(fù)問題：
function createPerson (name, age) {
return {
name: name,
age: age,
sayName: function () {
console.log(this.name)
}
}
}
然后生成實例對象：
var p1 = createPerson('Jack', 18)
var p2 = createPerson('Mike', 18)
這樣封裝確實爽多了凄杯，通過工廠模式我們解決了創(chuàng)建多個相似對象代碼冗余的問題错洁。
3. 更優(yōu)雅的工廠函數(shù)：構(gòu)造函數(shù)
一種更優(yōu)雅的工廠函數(shù)就是下面這樣，構(gòu)造函數(shù)：
function Person (name, age) {
this.name = name
this.age = age
this.sayName = function () {
console.log(this.name)
}
}
var p1 = new Person('Jack', 18)
p1.sayName() // => Jack
var p2 = new Person('Mike', 23)
p2.sayName() // => Mike
構(gòu)造函數(shù)戒突、原型屯碴、實例之間的關(guān)系
下面的話濃縮的都是精華
- 這里的 function Person(){} 就是構(gòu)造函數(shù)
- 構(gòu)造函數(shù) new 出來的 person就是它的實例（對象）
- 構(gòu)造函數(shù)都有一個
prototype屬性，指向另一個對象（就是它的原型（對象））膊存，這個對象的所有屬性和方法导而，都會被構(gòu)造函數(shù)的實例繼承——就是說構(gòu)造函數(shù)的原型和構(gòu)造函數(shù)的實例 屬性和方法可以共享 - 這也就意味著，我們可以把所有對象實例需要共享的屬性和方法直接定義在
prototype對象上
拿Person舉例
function Person(name, age) {
this.name = name;
this.age = age;
this.getName = function() {
console.log('this is lokka.');
}
}
var p1 = new Person('tom', 5);
console.log(p1.name); // tom
console.log(p1.age); // 5
p1.getName(); // this is lokka.
構(gòu)造函數(shù)
1. Person 就是構(gòu)造函數(shù)（其實就是一個函數(shù)）
實例
1. 構(gòu)造函數(shù)Person通過 var person = new Person(); 生成的person就是構(gòu)造函數(shù)的實例 實例繼承原型上的屬性和方法
2. 實例上有個屬性__proto__ (雙下劃線) 指向原型
person.__proto__指向的就是構(gòu)造函數(shù)Person的原型隔崎，即： person.__proto__ === Person.prototype
原型
1. 每寫一個構(gòu)造函數(shù) 就會同時生成個原型（沒有構(gòu)造函數(shù)中的屬性或者方法今艺，可以理解為空對象）
2. 構(gòu)造函數(shù)都有一個 `prototype` 屬性，指向另一個對象（就是它的原型）爵卒，這個對象的所有屬性和方法虚缎，都會被`構(gòu)造函數(shù)的實例繼承`〉鲋辏——`就是說構(gòu)造函數(shù)的原型和構(gòu)造函數(shù)的實例 屬性和方法可以共享`
3. 原型上有constructor屬性指向構(gòu)造函數(shù) 原型.constructor === 構(gòu)造函數(shù)
構(gòu)造函數(shù)和原型的關(guān)系：
- 每個構(gòu)造函數(shù)都有一個
prototype屬性实牡，指向另一個對象（就是它的原型）陌僵，用白話講就是每寫一個構(gòu)造函數(shù) 就會同時生成個原型（沒有構(gòu)造函數(shù)中的屬性或者方法，可以理解為空對象）通過 構(gòu)造函數(shù).prototype可以設(shè)置和訪問原型中的屬性和方法 - 同時原型中也有個constructor屬性可以指向構(gòu)造函數(shù)
構(gòu)造函數(shù)和實例的關(guān)系：
用 new 關(guān)鍵字創(chuàng)建 Person 實例時创坞，內(nèi)部執(zhí)行了4個操作：
1. 創(chuàng)建一個新對象
2. 將構(gòu)造函數(shù)的作用域賦給新對象（因此 this 就指向了這個新對象）
3. 執(zhí)行構(gòu)造函數(shù)中的代碼
4. 返回新對象
所以就把構(gòu)造函數(shù)中的指針this 指向了新創(chuàng)建的實例中 實例中就可以調(diào)用構(gòu)造函數(shù)中的屬性和方法了
實例和原型的關(guān)系：
實例上有個屬性proto (雙下劃線) 指向原型
person.proto指向的就是構(gòu)造函數(shù)Person的原型碗短，即： person.proto === Person.prototype
實例繼承原型上的屬性和方法
更簡單的原型寫法
根據(jù)前面例子的寫法，如果我們要在原型上添加更多的方法题涨，可以這樣寫：
function Person() {}
Person.prototype.getName = function() {}
Person.prototype.getAge = function() {}
Person.prototype.sayHello = function() {}
... ...
function Person() {}
Person.prototype = {
constructor: Person,
getName: function() {},
getAge: function() {},
sayHello: function() {}
}
這種字面量的寫法看上去簡單很多偎谁，但是有一個需要特別注意的地方。Person.prototype = {}實際上是重新創(chuàng)建了一個{}對象并賦值給Person.prototype纲堵，這里的{}并不是最初的那個原型對象巡雨。因此它里面并不包含constructor屬性。為了保證正確性席函，我們必須在新創(chuàng)建的{}對象中顯示的設(shè)置constructor的指向鸯隅。即上面的constructor: Person。
完整的原型鏈：
1. 首先我們先看左上角的 Function 向挖，F(xiàn)unction 比較特殊
-
我們要知道所有函數(shù)都是 Function 的實例，所有函數(shù)的原型都指向 Function.prototype,
Function 即是構(gòu)造函數(shù) 同時也是 Function 的實例炕舵，就是 Function 實例化了自己本身何之，所以我們可以得出：
Function.__proto == Function.prototype
- 因為 Object 也是函數(shù)，所以我們可以得出：
Object.__proto == Function.prototype
- 一切對象都最終繼承自O(shè)bject對象咽筋，Object對象直接繼承自根源對象null
其中 person 是 Person 構(gòu)造函數(shù)對象的實例溶推。而 Person 的原型對象同時又是構(gòu)造函數(shù)對象 Object 的實例。這樣就構(gòu)成了一條原型鏈奸攻。原型鏈的訪問蒜危，其實跟作用域鏈有很大的相似之處，他們都是一次單向的查找過程睹耐。因此實例對象能夠通過原型鏈辐赞，訪問到處于原型鏈上對象的所有屬性與方法。這也是 person1 最終能夠訪問到處于 Object 構(gòu)造函數(shù)對象上的方法的原因硝训。
基于原型鏈的特性响委，我們可以很輕松的實現(xiàn)繼承。
2. 再說一下 Funtion 和 Object 的關(guān)系
從圖上我們可以知道 Function 和 Object 是互相繼承關(guān)系窖梁，因為
Function 通過原型鏈繼承了 Object.prototype赘风，而 Object 又繼承了 Function.prototype 所以說 Function 和 Object 是互相繼承關(guān)系
3. 我們再看這個等式
Function.constructor == Function
剛開始看到這個等式我也很疑惑，看了 MDN 也沒看明白纵刘，后來看了好多文檔才理解
因為 .constructor 屬性是原型上的屬性邀窃，構(gòu)造函數(shù)上沒有就去原型鏈上查找，所以：
Function.constructor == Function.prototype.constructor
又由于
Function.prototype.constructor == Function
所以
Function.constructor == Function
所以我們可以得出結(jié)論 Function 繼承自己
原型鏈繼承
有關(guān)原型鏈繼承的內(nèi)容可以參考我的這篇文檔——ES5中的繼承和ES6中的類繼承模式詳解
寫在后面：
面向?qū)ο笾械闹R點一直都是很難理解的假哎，這篇文章是我很用心寫的一篇文章瞬捕，用我自己能理解的話術(shù)來解釋構(gòu)造函數(shù) 原型 實例 原型鏈 繼承等 可能涉及到的底層原理沒有那么深刻 不過通過仔細(xì)理解文章中的重點 就應(yīng)該可以很好地使用面向?qū)ο罅?大家都加油 文章中有什么不對的 也請大家?guī)臀抑刚鰜?大家共同進(jìn)步鞍历！?( ′???` )比心
