JavaScript面向对象
1.创建对象
1.1、字面量
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <script> 10 var flower={ 11 name:"末端", 12 area:"地址", 13 showName:function () { 14 alert(this.name); 15 } 16 } 17 18 flower.showName(); 19 </script> 20 </body> 21 </html>
1.2、new Object
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script> 9 var flower = new Object(); 10 11 flower.name = "ab"; 12 flower.genera = "切克"; 13 flower.area = "一点"; 14 flower.showName = function () { 15 alert(this.name); 16 } 17 18 flower.showName(); 19 20 </script> 21 22 </body> 23 </html>
1.3构造函数
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script> 9 function Flower(name,age) { 10 this.name=name; 11 this.age =age; 12 this.showName=myShow; 13 } 14 15 function myShow() { 16 alert(this.name); 17 } 18 19 var f1=new Flower("牡丹花",100); 20 f1.showName(); 21 22 </script> 23 </body> 24 </html>
2.继承
2.1原型链
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script> 9 function Humens() { 10 this.foot = 2; 11 } 12 13 Humens.prototype.getFoot = function () { 14 return this.foot; 15 } 16 function Man() { 17 this.head = 1; 18 } 19 20 Man.prototype = new Humens(); 21 22 Man.prototype.getHead = function () { 23 return this.head; 24 } 25 var man1 = new Man(); 26 alert(man1.foot) 27 28 29 </script> 30 31 </body> 32 </html>
2.2原型对象
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script> 9 function Flower() { 10 } 11 12 Flower.prototype.name = "ab"; 13 Flower.prototype.genera = "切克"; 14 Flower.prototype.area = "一点"; 15 Flower.prototype.showName = function () { 16 alert(this.name); 17 } 18 19 var flower1 = new Flower(); 20 flower1.showName(); 21 22 var flower2 = new Flower(); 23 flower2.showName(); 24 alert(flower1.showName == flower2.showName) 25 26 if (Flower.prototype == flower1.__proto__) { 27 alert("==================="); 28 } 29 30 </script> 31 </body> 32 </html>
2.3共享变量问题
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script> 9 function Humens() { 10 this.sport=["s","b","t","k"]; 11 } 12 function Man() { 13 //call和apply都是解决共享变量的问题 14 // Humens.call(this); 15 Humens.apply(this) 16 17 } 18 Man.prototype=new Humens(); 19 var man1=new Man(); 20 man1.sport.push("aaaaaaaaaa"); 21 alert(man1.sport); 22 23 var man2=new Man(); 24 alert(man2.sport); 25 26 </script> 27 </body> 28 </html>