2019獨角獸企業重金招聘Python工程師標準>>>

?js的原型&原型鏈&閉包，在很多人看來是區分JS程序員水平的關鍵知識點，當然對這句話我不是十分贊同。但是掌握這幾個核心知識點總是沒錯滴！

????直接上代碼：

<script type="text/javascript">//全部為函數對象類型（function） function f1(){} var f2 = function(){} var f3 = new Function() //全部都是普通對象類型（object） var o1 = {} var o2 = new Object() var o3 = new f1()console.info(typeof f1,typeof f2,typeof f3,typeof o1,typeof o2,typeof o3 )//function function function object object objectvar obj = new f1(); f1.prototype.name = 'banyoukang'; console.info(obj.__proto__.name)//banyoukang console.info(f1.prototype)// f1 { name="banyoukang"} console.info(obj.__proto__)//f1 { name="banyoukang"}</script>

你可以自己試試這段代碼，并想一下其輸出結果，為什么？下面讓我們掰扯掰扯這段代碼：

關于JavaScript對象
在JavaScript中，一切都是對象，但是和Java不同的是：這些對象是分類型的。主要分為function（函數對象）和object（普通對象）。

//全部為函數對象類型（function） function f1(){} var f2 = function(){} var f3 = new Function()//全部都是普通對象類型（object） var o1 = {} var o2 = new Object() var o3 = new f1()

<1>在這里，f1應該是我們開發中最常用法，f2用的應該也挺多，只是多了一個引用罷了。但是，f3這種寫法倒是不多見的，其實f1,f2在創建的時候，JS會自動通過new Function()的方式來構建這些對象，所以都是f1,f2,f3本質上并沒有什么區別。注：（

var f3 = new Function('var temp = 100; this.temp = 200; return temp + this.temp;');

?

alert(f3())

//彈出300，（）將會執行引號中的內容，類似于eval函數）

<2>關于o1和o2我們都可以理解（對象字面量、使用new表達式來創建對象），但是o3雖然是f1函數new出來的，但是和f1缺不是一個類型的，看打印結果可以發現，一個是函數對象一個是普通對象。

關于原型和原型鏈

? ? ??在JavaScript中，每一個對象都有一些屬性，包括prototype和__proto__，其中prototype就是原型對象（prototype其實就是函數的一個屬性），其作用就是保存對象的一些屬性和方法（你可以通過f1.prototype.show = function(){} 給f1的prototype賦值一個方法），但是prototype對于對象本身是隱藏起來的,因為它是原型對象prototype的屬性而不是對象本身的屬性（你可以通過f1.prototype.show()來調用，但是不能通過f1.show()來調用）。關于__proto__，這才是原型鏈真正起作用的地方，它在普通對象和函數對象中都存在， 它的作用就是保存父類的prototype對象，JS在通過new 表達式創建一個對象的時候，通常會把父類的prototype賦值給新對象的__proto__屬性，這樣，就形成了一代代傳承...??

function f2(){} f2.prototype.name='banyoukang'; var test = new f2();console.info(test.name)//banyoukang

????注：可以通過test.__proto__來查看原型鏈

????????

????????_proto_保存著父類的prototype的屬性，當查找一個屬性的時候，先看看自己有沒有這個屬性，如果沒有就順著原型鏈往上依次查找（注：不會查找自身的prototype屬性）。

3.總結

????????<1>prototype就是對象的一個屬性，這個屬性也是一個對象（類似Java類中把其他類的對象定義成一個成員變量），專門用于儲存準備傳遞到子類的方法和屬性。

????????<2>__proto__就是prototype中屬性和方法的實際傳遞者，當你new一個對象的時候，會把父類的prototype賦值給新對象的__proto__屬性，這樣你在子類的__proto__屬性中就可以拿到父類傳給你的屬性和方法。

????????<3>不同的對象的原型鏈是截然不同的，比如父類和子類：

????????????function f1(){}

????????????var test = new f1()

????????f1的原型鏈：f1->Function.prototype->Object.prototype->null

????????test的原型鏈：test->f1.prototype->Object.prototype->null

????????從上面的實例我們可以看到：對象的prototype屬性是為子類服務的，是子類創建的核心，決定了子類的數據類型

?

????????這篇博文是自己試驗加上閱讀其他大神的博客總結出來的，如果您閱讀的過程中發現其中存在問題或者有指教的地方，歡迎拍磚，共同進步！

?

轉載于:https://my.oschina.net/u/3460260/blog/1928074

總結

以上是生活随笔為你收集整理的JS难点剖析-原型原型链的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。