JavaScript面向对象

1.创建对象

1.1、字面量

 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>

View Code

1.2、new Object

 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>

View Code

1.3构造函数

 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>

View Code

2.继承

2.1原型链

 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>

View Code

2.2原型对象

 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>

View Code

2.3共享变量问题

 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>

View Code