一：原型
1.说明
共享数据，可以减少空间的使用
2.程序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <input type="button" value="显示效果" id="btn"/> 11 <div id="dv"></div> 12 <script> 13 function ChangeStyle(btnObj, dvObj, json){ 14 this.btnObj=btnObj; 15 this.dvObj=dvObj; 16 this.json=json; 17 } 18 ChangeStyle.prototype.init=function(){ 19 var that=this; 20 this.btnObj.onclick=function(){ 21 for(var key in that.json){ 22 that.dvObj.style[key]=that.json[key]; 23 } 24 }; 25 }; 26 var json={"width":"300px","height":"200px","backgroundColor":"blue","opacity":"0.2"}; 27 var cs=new ChangeStyle(document.getElementById("btn"),document.getElementById("dv"),json); 28 cs.init(); 29 </script> 30 </body> 31 </html>
效果：
3.简单的原型语法
注意在语法中，要写constructor:构造函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <script> 11 function Student(name,age,sex){ 12 this.name=name; 13 this.age=age; 14 this.sex=sex; 15 } 16 Student.prototype={ 17 constructor: Student, 18 height: "189", 19 study: function(){ 20 console.log("study function"); 21 } 22 }; 23 var stu=new Student("tom",20,"M"); 24 stu.study(); 25 26 </script> 27 </body> 28 </html>
4.原型内的函数可以互相调用
在其中，需要使用this进行调用，不然将会报错
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <script> 11 function Student(name,age,sex){ 12 this.name=name; 13 this.age=age; 14 this.sex=sex; 15 } 16 Student.prototype={ 17 constructor: Student, 18 height: "189", 19 study: function(){ 20 console.log("study function"); 21 }, 22 eat: function(){ 23 console.log("eat function"); 24 this.study(); 25 } 26 27 }; 28 var stu=new Student("tom",20,"M"); 29 stu.eat(); 30 31 </script> 32 </body> 33 </html>
效果：
5.
原文：https://www.cnblogs.com/juncaoit/p/11333429.html