你是否理解js的Object與Function與原型鏈

itvincent 發布于2019-08-20 17:51 / 2544人閱讀

摘要：原型對象是由創建的，因此原型對象的構造函數是構造函數也可以是稱為對象，原型對象也就繼承了其生父構造函數中的數據，也同時繼承了原型對象的數據。當然這條原型鏈中的數據，會被還是還是這類構造函數繼承，但是不會被這些繼承，他們不處于同一個鏈條上。

js中，Function的本質是什么？
Object的本質又是什么？
js中有幾條原型鏈？

javascript的語言基于原型鏈，而實際上js的有兩條原型鏈。開發者主要用到的是圖中的紅色原型鏈，如給Array.prototype.xxx=yyy，那么就可以[...].xxx，數組實例對象就繼承了其構造函數原型對象中的數據，當然實踐一般不會給修改Array這類構造函數的原型對象，最多的就是自定義構造函數，然后給自定義的構造函數定義原型對象，那么這個構造函數的所有實例對象也就都繼承了原型對象中的數據。這就是圖中紅色原型鏈的所表示的。

那么Array.prototype和自定義構造函數function f(){}的prototype的原型對象是從哪里來的，是誰創造了它？

諸如Array.prototype.xxx=yyy，這實際上就是引用了Array的原型對象prototype而已，也就是它的原型對象就已經存在了，然后才讓其能夠被引用到。

包括Array.prototype，還是String.prototype，還是Object.prototype，還是Function.prototype，還是自定義構造函數function f(){}的prototype，它們都不是開發者創建的，而是Function構造函數在創建其他構造函數時，用Object()創建的。

可以說Function構造函數是javascript世界中的萬物之主，像盤古開天辟地創建了javascript的語言世界和運行機制。而OBject的本質就是用于創建原型對象。

Function構造函數內部有一個this.prototype=new Object()，當Function造物時，就同時通過這句this.prototype=new Object()，給這個物賦予了靈魂。而Object在javascript中的本質也就在于此，作為Function手中的魂燈，賦予其創建的物體靈魂，也就是給予它原型對象，讓它能夠通過原型對象，能夠從上面繼承和吸收能量。

Function構造函數，創建了Array構造函數，同時通過new Object()給其創建了prototype對象，因此有Array.prototype。然后[1,2,3]就是由Array構造函數創建，因此[1,2,3]數組實例對象，繼承了Array構造函數中的數據，同時繼承了Array.prototype中的數據。

Array.prototype原型對象是由this.prototyoe=new Object()創建的，因此Array.prototype原型對象的構造函數是Object構造函數（也可以是稱為對象），Array.prototype原型對象也就繼承了其生父Object構造函數中的數據，也同時繼承了Object.prototype原型對象的數據。

因此，你可以看到，toString()這個方法追根溯源，實際上是Object.prototype.toString，在Function創建Array的時候，Object就跟著創建了Array.prototype，它就繼承了Object和Object.prototype中的數據，[1,2,3]數組對象由Array創建，因此[1,2,3]也就繼承了Array、Array.prototype、Object、Object.prototype中的數據，因此最終才可以調用[1,2,3].toString()。

對于String、Boolean等構造函數，還是自定義構造函數function f(){...}也都是這樣。

function f(){...}，看上去是你寫了這個普通的構造函數，實際上這個普通的函數是Function創建的，你寫的這個f函數，由于是Function()實例化出來的（也就是函數的f的構造函數就是Function），那么普通函數f作為Function構造函數的實例對象，那么普通函數f也就會繼承Function構造函數和Function.prototype中的數據。

說來詭異的是，也是Function自己創建了自己，正是在在創建自己的時候，通過this.prototype=new Object()給自己也創建了原型對象，就是圖中藍色的原型對象，這個原型對象由于是new Object實例化的，因此這個藍色的原型對象，也就繼承了Object和Object.prototype原型對象中的數據，這樣說來，Object的原型對象是原型鏈條中的最頂層的一個對象，然后原型鏈往下揪分裂成了兩條。

Function.prototype原型對象雖然繼承了Object.prototype中的數據，但是它自己還擴展了自己專有的屬性和方法，分別是name、length、call()、apply()、bind()這五個，然后由于普通函數f就是由Funciton創建出來的，因此這個普通函數也就繼承了Function和Function.prototype中的數據，因此你才可以使用f.apply()還是f.bind(this)，也因此才可以使用Array.apply()，這就是圖中的第二條藍色的原型鏈。當然這條原型鏈中的數據，會被Array還是String還是Boolean這類構造函數繼承，但是不會被[1,2,3]這些繼承，他們不處于同一個鏈條上。

雖然Function創建了它自己，也創建了Object，但到底它是先創建自己還是先創建Object就無從得知了。如果Function先創建了自己，那么在它創建自己的時候，還在使用this.prototype=new Object()給自己創建原型對象時，這個Object又是哪里來的，難道Object就已經先存在了？如果Object先于Function存在了，但Funciton都還沒有存在，它怎么去創建Object？這到底是雞生蛋還是蛋生雞無從得知，這也反映了javascript語言底層機制就是混亂的。

也許這一切都很繞，但是只有理解了Function與Object，才能更清晰高屋建瓴的理解原本繁蕪繁雜和混亂的javascript。

GPU云服務器云服務器 js原型鏈的繼承你理解的html function object 深度學習與理解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83923.html

理解js的原型與繼承

摘要：相當于在用原型繼承編寫復雜代碼前理解原型繼承模型十分重要。同時，還要清楚代碼中原型鏈的長度，并在必要時結束原型鏈，以避免可能存在的性能問題。 js是一門動態語言,js沒有類的概念,ES6 新增了class 關鍵字，但只是語法糖，JavaScript 仍舊是基于原型。至于繼承,js的繼承與java這種傳統的繼承不一樣.js是基于原型鏈的繼承. 在javascript里面,每個對象都有一...

wthee 2019-08-20 12:25 評論0 收藏0
js內功修煉之九陽神功--原型鏈

摘要：寫在前面如果說是一本武學典籍，那么原型鏈就是九陽神功。那么，如何修煉好中的九陽神功呢真正的功法大成的技術是從底層上去理解，那種工程師和碼農的區別就在于對底層的理解，當你寫完一行代碼，或者你遇見一個解決的速度取決于你對底層的理解。寫在前面如果說JavaScript是一本武學典籍，那么原型鏈就是九陽神功。在金庸的武俠小說里面，對九陽神功是這樣描述的：練成「九陽神功」后，會易筋洗髓；生出...

蘇丹 2019-08-30 11:10 評論0 收藏0
js內功修煉之九陽神功--原型鏈

摘要：寫在前面如果說是一本武學典籍，那么原型鏈就是九陽神功。那么，如何修煉好中的九陽神功呢真正的功法大成的技術是從底層上去理解，那種工程師和碼農的區別就在于對底層的理解，當你寫完一行代碼，或者你遇見一個解決的速度取決于你對底層的理解。寫在前面如果說JavaScript是一本武學典籍，那么原型鏈就是九陽神功。在金庸的武俠小說里面，對九陽神功是這樣描述的：練成「九陽神功」后，會易筋洗髓；生出...

Profeel 2019-08-02 15:18 評論0 收藏0
js內功修煉之九陽神功--原型鏈

摘要：寫在前面如果說是一本武學典籍，那么原型鏈就是九陽神功。那么，如何修煉好中的九陽神功呢真正的功法大成的技術是從底層上去理解，那種工程師和碼農的區別就在于對底層的理解，當你寫完一行代碼，或者你遇見一個解決的速度取決于你對底層的理解。寫在前面如果說JavaScript是一本武學典籍，那么原型鏈就是九陽神功。在金庸的武俠小說里面，對九陽神功是這樣描述的：練成「九陽神功」后，會易筋洗髓；生出...

morgan 2019-08-23 18:07 評論0 收藏0