首页 > 代码库 > JavaScript设计模式-3.原型模式

JavaScript设计模式-3.原型模式

2024-10-28 02:54:39   206人阅读

 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.原型模式


联系
我们