【Javascript】- Prototype 原型
阿新 • • 發佈:2019-03-02
JS Prototype 原型
prototype:原型:如果物件B是建立在物件A的基礎上,那麼A為B的原型,類似Java裡面的父類和子類的關係,B不僅可以使用A定義的屬性和方法,還可以進行額外的功能擴充套件,經常應用在js框架裡面。
定義基礎物件:
function People(name){ //物件屬性 this.name=name; //物件方法:類似java中的public方法(只能由物件例項呼叫) this.show=function(){ console.log(name+"is a common person......"); }; } //物件方法:類似java中的靜態方法,只能由類本身呼叫 People.run = function(){ console.log("People can run................."); } //定義物件的原型方法,類似非靜態方法 People.prototype.showSelf = function(){ //原型方法 console.log("I am a optimistic people......."); } //物件例項化測試 var people=new People("Squirrel"); People.run(); //呼叫類方法 people.show(); people.showSelf();
效果:
JS 實現物件繼承
實現:繼承的原理通過原型實現,每個Javascript物件都具備prototype屬性。
測試程式碼
<script> var baseClass = function(){ //父類 this.name="baseClass:name--->baseClass"; this.showMsg = function(){ console.log("baseClass::showMsg"); } } var extendClass = function(){ //子類 this.age = "extendClass:age--->20"; this.showMsg = function(){ console.log("extendClass::showMsg"); }; } extendClass.prototype = new baseClass(); var instance = new extendClass(); instance.showMsg(); //類似方法被重寫 console.log(instance.name) console.log(instance.age) </script>
分析:
baseClass類為extendClass類的原型,extendClass可以使用所有的原型的方法,實現功能和屬性擴充套件(類似java裡面的繼承)如果方法名一致,js引擎掃描從自身掃描開始,如果掃描到則不進行向下掃描(