一：原型
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>
二：原型链
1.说明
是一种关系，是实例对象和原型对象之间的关系
关系是通过原型__proto__来联系的
2.原型链可以改变
实例对象的原型__proto__指向的是该对象所在的构造函数的原型对象
构造函数的原型对象protoytpe指向如果变了，实例对象的原型__proto__指向也会变化。
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 Person(name){ 12 this.name=name; 13 } 14 Person.prototype.eat=function(){ 15 console.log("person eat"); 16 } 17 18 function Student(){} 19 20 Student.prototype=new Person(10); 21 var stu = new Student(); 22 stu.eat(); 23 24 </script> 25 </body> 26 </html>
效果：
3.改变原型对象中属性的值
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 Person(name){ 12 this.name=name; 13 } 14 Person.prototype.age=10; 15 16 Person.prototype.age=20; 17 18 var person = new Person("tom"); 19 console.log(person.age); 20 21 </script> 22 </body> 23 </html>
效果：
三：继承
1.程序
· 使用原型进行继承，因为这些方法可以共享。
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 //例子: 12 //人,都有姓名,性别,年龄, 吃饭, 睡觉, 玩 13 //学生,都有姓名,性别,年龄, 成绩, 吃饭, 睡觉, 玩 ,学习的行为 14 15 16 //js中通过原型来实现继承 17 18 function Person(name,age,sex) { 19 this.name=name; 20 this.sex=sex; 21 this.age=age; 22 } 23 Person.prototype.eat=function () { 24 console.log("人可以吃东西"); 25 }; 26 Person.prototype.sleep=function () { 27 console.log("人在睡觉"); 28 }; 29 Person.prototype.play=function () { 30 console.log("生活就是不一样的玩法而已"); 31 }; 32 33 34 function Student(score) { 35 this.score=score; 36 } 37 //改变学生的原型的指向即可==========>学生和人已经发生关系 38 Student.prototype=new Person("小明",10,"男"); 39 Student.prototype.study=function () { 40 console.log("学习很累很累的哦."); 41 }; 42 43 //相同的代码太多,造成了代码的冗余(重复的代码) 44 45 var stu=new Student(100); 46 console.log(stu.name); 47 console.log(stu.age); 48 console.log(stu.sex); 49 stu.eat(); 50 stu.play(); 51 stu.sleep(); 52 console.log("下面的是学生对象中自己有的"); 53 console.log(stu.score); 54 stu.study(); 55 </script> 56 </body> 57 </html>
效果：
2.构造函数继承
上面的缺陷：因为直接初始化了属性。
做法：只能调用对象.属性=xxx，进行重新复制。这种做法特别不好。
解决方案：使用构造函数继承，但是，这种方式不能继承函数。
3.组合继承
原型继承+借用构造函数继承
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>title</title> 6 <script> 7 8 9 //原型实现继承 10 //借用构造函数实现继承 11 //组合继承:原型继承+借用构造函数继承 12 13 function Person(name,age,sex) { 14 this.name=name; 15 this.age=age; 16 this.sex=sex; 17 } 18 Person.prototype.sayHi=function () { 19 console.log("阿涅哈斯诶呦"); 20 }; 21 function Student(name,age,sex,score) { 22 //借用构造函数:属性值重复的问题 23 Person.call(this,name,age,sex); 24 this.score=score; 25 } 26 //改变原型指向----继承 27 Student.prototype=new Person();//不传值 28 Student.prototype.eat=function () { 29 console.log("吃东西"); 30 }; 31 var stu=new Student("小黑",20,"男","100分"); 32 console.log(stu.name,stu.age,stu.sex,stu.score); 33 stu.sayHi(); 34 stu.eat(); 35 36 </script> 37 </head> 38 <body> 39 40 41 </body> 42 </html>
效果：
4.拷贝继承
基本的属性与函数都会被拷贝过来
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 Person() { 12 } 13 Person.prototype.age=10; 14 Person.prototype.sex="男"; 15 Person.prototype.height=100; 16 Person.prototype.play=function () { 17 console.log("玩的好开心"); 18 }; 19 20 var obj2={}; 21 22 //Person的构造中有原型prototype,prototype就是一个对象,那么里面,age,sex,height,play都是该对象中的属性或者方法 23 for(var key in Person.prototype){ 24 obj2[key]=Person.prototype[key]; 25 } 26 console.dir(obj2); 27 obj2.play(); 28 </script> 29 </body> 30 </html>
效果：
四：this指向
* 普通函数中的this是谁?-----window
* 对象.方法中的this是谁?----当前的实例对象
* 定时器方法中的this是谁?----window
* 构造函数中的this是谁?-----实例对象
* 原型对象方法中的this是谁?---实例对象
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
