JavaScript設計模式-3.原型模式
阿新 • • 發佈：2017-07-16
掛載 r+ eof style 數據 默認 per blog script
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js高級語法3-原型模式 </title> 6 </head> 7 <body> 8 <script> 9 /* 10 javascript原型模式（prototype）： 11 1. 原型是一個對象，其他對象可以通過它實現屬性的繼承，所有的對象在默認的情況下都有一個原型。12 因為原型的本身也是對象。所以一個類的真正原型是被類的內部的prototype屬性所持有。 13 2.什麽可以稱之為對象？ 14 在javascript中，一個對象就是任何的無序的鍵值對的集合。 15 如果他不是一個主數據類型（undefined，null，boolean，number，string） 16 其他的通通叫做對象 17 */ 18 19 /* 20 javascript中的原型是和函數緊密連接的；21 var o ={} 他不是用function定義的，他有原型嗎？ 22 有。 23 每個通過函數和new操作符生成出來的對象都持有一個屬性 __proto__,這個屬性 24 保存了創建他的構造函數的prototype的原型引用。 25 * */ 26 /* 27 function Person(){} // 定義一個空對象 28 Person.prototype.name="張三"; 29 Person.prototype.showName=function(){30 //這個this表示調用本函數的一個具體實例化的類 31 alert(this.name); 32 } 33 new Person().showName(); 34 35 36 var cat = {}; 37 // cat.prototype.name="112";//報錯，prototype未定義 38 //默認隱藏的調用下面的代碼： 39 Object.getPrototypeOf(cat).name="zhangdan"; //這是獲取隱藏原型的方法，瀏覽器支持度不好 40 cat.__proto__.master = "javascript"; 41 //上邊兩個是顯式調用，下面是隱式調用，作用是一樣的 42 cat.age=2; 43 cat[‘sex‘]="man"; 44 45 alert(cat.name+" "+cat.master+" "+cat.age+" "+cat["sex"]); 46 */ 47 //利用原型模式實現簡單繼承 48 function per(){ 49 this.getName = function(str){ 50 alert(str); 51 } 52 } 53 per.prototype.getAge = function(age){ 54 alert(age); 55 } 56 //不完全繼承 57 var a = {};//空類 58 a.__proto__ = per.prototype; 59 //把要被繼承的原型引用，賦值給要繼承的類，相當於一個掛載 60 //如果要繼承的類是一個空類，那麽就會完全繼承 61 a.getAge(3); 62 //a.getName("張丹"); //這個方法 報錯，因為繼承的是原型，也就是上一級的所有東西， 63 //但是不包括被繼承類自身定義的屬性和方法 64 65 66 //簡單方式實現繼承（js中無法實現多繼承） 67 //完全繼承 68 var b = {}; 69 b.__proto__ = new per(); 70 b.__proto__.constructor = b; 71 b.getAge(9); 72 b.getName("xiaowang"); 73 74 //串聯繼承 75 function m(){ 76 this.showM = function(){ 77 alert("I am is M ") 78 } 79 } 80 function n(){ 81 this.showN = function(){ 82 alert("I am is N ") 83 } 84 } 85 86 function k(){}; 87 n.prototype = new m(); 88 n.prototype.constructor = n; 89 90 k.prototype = new n(); 91 k.prototype.constructor = k; 92 var boo = new k(); 93 boo.showM(); 94 boo.showN(); 95 </script> 96 </body> 97 </html>
JavaScript設計模式-3.原型模式