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

Posted 橙云生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript设计模式-3.原型模式相关的知识,希望对你有一定的参考价值。

 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.原型模式的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript设计模式-原型模式

架构师内功心法,只是单纯听说过的原型模式详解

架构师内功心法,只是单纯听说过的原型模式详解

JavaScript之面向对象学习七(动态原型模式和寄生构造函数模式创建自定义类型)

深入理解JavaScript系列(46):代码复用模式(推荐篇)

JavaScript 创建对象 (工厂模式构造函数模式原型模式组合使用构造函数模式与原型模式)