1. 程式人生 > >37.淺談js原型的理解

37.淺談js原型的理解

技術 理論 名詞 dev cnblogs 面向對象 ocs scrip cto

淺談Js原型的理解

一、js中的原型毫無疑問一個難點,學習如果不深入很容易就暈了!
在參考了多方面的資料後,發現解釋都太過專業,對於很多還沒有接觸過面向對象
語言的小白來說,有理解不了裏面的專有名詞!如果你沒學過c++或者Java之類的更接觸底層的語言,那就不要太深究,理解會用自然可以了,當接觸到更多語言時慢慢的會理解越來越深刻!


下面我就舉例分享一下prototype的概念!知道對於初學者知道這些就足夠了!

技術分享圖片

分析一下,上面這個例子!我們可以知道 People的類型是一個對象!
按照javascript的說法,function定義的這個Person就是一個Object(對象),而且還是一個很特殊的對象,這個使用function定義的對象與使用new操作符生成的對象之間有一個重要的區別。這個區別就是function定義的對象有一個prototype屬性,使用new生成的對象就沒有這個prototype屬性,我們一般稱為普通對象!
我們需要理解記憶以下的邏輯順序:
Person是一個對象,它有一個prototype的原型屬性(因為所有的對象都一prototype原型!)prototype屬性有自己的prototype對象,而pototype對象肯定也有自己的constuct屬性,construct屬性有自己的constuctor對象,神奇的事情要發生了,這最後一個constructor對象就是我們構造出來的function函數本身!

二、這樣繞人的邏輯,總想一探究竟,要記得這是一種規定的邏輯思維,我們要做的是慢慢接受這種邏輯思維!我們不理論研究,用實例說話:

技術分享圖片

三、下面我們不免有了疑問,學這麽繞的東西幹什麽,它給我們最實際的用處就是我們可以用原型來創建對象的屬性和方法!我們不用它不也是可以創建屬性和方法!這裏是有區別的,既然不一樣就有存在的價值!
我們可以通過給原型添加屬性和方法來給給對象添加屬性或方法!
Hero.prototype.name;
Hero.prototype.sayMe = function(){"添加對象的方法其實就是添加函數"}

讓我們再深一步:當我們給對象添加了同名的屬性或方法時會發生什麽?

技術分享圖片

我們驗證了這個例子得到得到了一些結論:
當函數對象本身的屬性或方法與原型的屬性或方法同名的時候:
1、默認調用的是函數對象本身的屬性或方法.
2、通過原型增加的屬性或方法的確是存在的.
3、函數對象本身的屬性或方法的優先級要高於原型的屬性或方法.

對象原型鏈接:https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes

37.淺談js原型的理解