JS高级学习历程-7

【面向(基于)对象】

1 创建对象

在php里边，需要先找到一个类别，在通过类创建具体对象

在javascript里边，可以直接创建具体对象，后期可以再给对象丰富许多属性或方法。

1. 字面量方式创建对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>21-创建对象</title>
 6     <script type="text/javascript">
 7       //① 创建对象，字面量方式
 8       var cat = {};
 9 
10       //给对象声明相关的属性 和 方法
11       cat.color = "yellow";
12       cat.age = 5;
13       cat.run = function(){
14           console.log('走直线');
15       }
16       console.log(cat);
17     </script>
18 </head>
19 <body>
20     
21 </body>
22 </html>
21-创建对象

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>22-创建对象</title>
 6     <script type="text/javascript">
 7       //① 创建对象，字面量方式（json数据格式）
 8       //成员名称是否设置引导都没有关系
 9       var dog = {name:'哈巴','age':1,hobby:function(){console.log('看家护林')}};
10       console.log(dog);
11 
12       //对象访问自己的成员：对象.成员 对象[成员名称]
13       console.log(dog.name);  //哈巴
14       console.log(dog.age);  //1
15       console.log(dog['age']);  //1
16       dog.hobby();  //看家护林
17   
18     </script>
19 
20 </head>
21 <body>
22     
23 </body>
24 </html>
22-创建对象

2. 构造函数方式创建对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>24-创建对象</title>
 6     <script type="text/javascript">
 7       //②构造函数 创建对象
 8       /*
 9         在javascript里面可以通过一个“函数”创建具体对象，通过new关键字即可
10         这个创建对象的函数称为“构造函数”，这个函数在创建对象的同时会自动
11         执行
12       */
13       function Animal(){
14           this.color = "yellow";
15           this.age = 3;
16           this.run = function(){
17               console.log('在跑步');
18           }
19       }
20       var dog = new Animal();
21       var cat = new Animal();
22       /*
23         构造函数创建对象的步骤
24         ① 创建this关键字，this指向null
25         ② 创建dog变量
26         ③ 把this关键字指向dog
27         ④ 为this丰富成员变量信息，也就是为dog丰富成员
28       */
29       console.log(dog);//Animal { color="yellow", age=3, run=function()}
30     </script>
31 </head>
32 <body>
33     
34 </body>
35 </html>
24-创建对象

3. 通过Object创建对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>25-创建对象</title>
 6     <script type="text/javascript">
 7       //③ Object创建对象
 8       var cat = {name:'kitty',age:3};
 9       console.log(cat);//Object { name="kitty", age=3 }
10       // 以上cat是通过Object构造函数创建出来的对象
11       // 之后又维护了两个属性：name和age
12 
13       var dog = new Object();
14       dog.weight = 40;
15       dog.addr = "德国";
16       console.log(dog);//Object { weight=40, addr="德国"}
17     </script>
18 </head>
19 <body>
20     
21 </body>
22 </html>
25-创建对象

posted @ 2015-05-26 19:25  竹立荷塘  阅读(219)  评论(0)  编辑  收藏  举报