标签：document mat val init log UNC nbsp device 注意
一：原型
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.将局部变量变成全局变量
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(win){ 12 var num=10; 13 win.num=num; 14 })(window); 15 console.log(num); 16 </script> 17 </body> 18 </html>
6.在原型中添加方法
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(win){ 12 function Random(){} 13 //给原型添加函数 14 Random.prototype.getRandom=function(){ 15 return Math.floor(Math.random()*5); 16 } 17 win.random=new Random(); 18 var random=new Random(); 19 var num = random.getRandom(); 20 win.num=num; 21 })(window); 22 23 console.log(num); 24 25 26 </script> 27 </body> 28 </html>
标签：document mat val init log UNC nbsp device 注意
原文地址：https://www.cnblogs.com/juncaoit/p/11333429.html
