1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <script type="text/javascript"> 8 9 function Person(){ 10 11 } 12 13 /** 14 * 使用如下犯法来编写代码，当属性和方法特别多的时候，编写起来不是很方便， 15 * 可以通过json的格式 16 17 Person.prototype.name = "Leon"; 18 Person.prototype.age = 23; 19 Person.prototype.say = function(){ 20 console.info(this.name + " " + this.age); 21 } 22 */ 23 /** 24 * 以下方式将会重写原型 25 * 由于原型重写，而且没有通过Person.propotype来指定， 26 * 此时的constructor不会指向Person而是指向Object， 27 * 如果constructor真的比较重要，可以在json中说明原型的指向constructor : Person , 28 */ 29 Person.prototype = { 30 // constructor : Person ,//手动指定constructor 31 name : "Leon", 32 age : 23, 33 say : function(){ 34 console.info(this.name + " , " + this.age); 35 } 36 } 37 38 var p1 = new Person(); 39 p1.say(); //Leon , 23 40 console.info(p1.constructor == Person); //false 如果取消注释掉的constructor : Person , 此时结果为true 41 console.info(p1.constructor); // Object() 如果取消注释掉的constructor : Person , 此时结果为Person() 42 43 44 45 46 </script> 47 48 </head> 49 <body> 50 51 </body> 52 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <script type="text/javascript"> 8 9 function Person(){ 10 11 } 12 13 var p1 = new Person(); 14 15 Person.prototype.sayHi = function(){ 16 console.info(this.name + " : hi "); 17 for(var o in Person.prototype){ 18 console.info(o); 19 } 20 } 21 p1.sayHi(); //undefined : hi sayHi 22 23 24 /** 25 * 如果把重写放置在new Person（）之后，注意内存模型 26 */ 27 Person.prototype = { 28 // constructor : Person ,//手动指定constructor 29 name : "Leon", 30 age : 23, 31 say : function(){ 32 console.info(this.name + " , " + this.age); 33 } 34 } 35 p1.sayHi();////undefined : hi name age say 36 37 38 var p2 = new Person(); 39 p1.say(); //TypeError: p1.say is not a function 40 p2.say(); //Leon , 23 41 p2.sayHi(); //TypeError: p2.sayHi is not a function 42 43 44 45 46 </script> 47 48 </head> 49 <body> 50 51 </body> 52 </html>
但又存在另外一种问题：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <script type="text/javascript"> 8 9 /** 10 * 基于原型的创建虽然可以有效的完成封装，但是依然有一些问题 11 * 1 无法通过构造函数来设置属性值 12 * 2 当属性中的引用类型变量是可能存在变量值重复 13 */ 14 function Person(){ 15 16 } 17 Person.prototype = { 18 constructor : Person, 19 name : "Leon" , 20 age : 30 , 21 friends : ["Ada","Chris"], 22 say : function(){ 23 console.info(this.name + "[" + this.friends + "]"); 24 } 25 } 26 27 var p1 = new Person(); 28 p1.name = "Jhon"; 29 p1.say(); //Jhon[Ada,Chris] 30 31 console.info(p1.__proto__); 32 /** 33 * 输出结果： 34 * age 30 35 * friends ["Ada", "Chris", "Mike"] 36 * name "Leon" 37 * constructor Person() 38 * say function() 39 */ 40 41 var p2 = new Person(); 42 p2.say(); //Leon[Ada,Chris] 43 44 //会在原型中找friends，所有Mike是在原型中增加的 45 p1.friends.push("Mike"); //为p1增加了一个朋友 46 //此时原型汇总就多了一个mike，这就是原型带来的第二个问题 47 p1.say(); //Jhon[Ada,Chris,Mike] 48 p2.say(); //Leon[Ada,Chris,Mike] 49 console.info(p1.__proto__); 50 console.info(p2.__proto__); 51 /** 52 * 输出结果： 53 * age 30 54 * friends ["Ada", "Chris", "Mike"] 55 * name "Leon" 56 * constructor Person() 57 * say function() 58 */ 59 60 </script> 61 62 </head> 63 <body> 64 65 </body> 66 </html>