012 原型
Posted juncaoit
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了012 原型相关的知识，希望对你有一定的参考价值。
一：原型
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>
以上是关于012 原型的主要内容，如果未能解决你的问题，请参考以下文章
08.22 javaScript 原型的定义 原型链 获取原型 操作原型的属性 判断原型是自有的还是继承的 各种方法
JavaScript高级原型和继承相关：原型对象函数原型原型链和继承继承的优化对象判断相关方法