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之面向对象学习七(动态原型模式和寄生构造函数模式创建自定义类型)