003 对象

一：面向对象

1.说明

　　面向对象特性：封装，继承，多态

　　js不是面向对象的语言吗，但是可以模拟面向对象的思想

　　js是一门基于对象的语言

2.第一种方式

　　调用系统的构造函数创建对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         //第一种方式
 8        var obj = new Object();
 9        obj.name = "tom";
10        obj.age = 19;
11        obj.sex = "F";
12        obj.eat=function () {
13            console.log("======")
14        }
15 
16        console.log(obj.age);
17        obj.eat();
18     </script>
19 </head>
20 <body>
21     <h1>CJ</h1>
22 </body>
23 </html>

3.一次性创建多个对象【工厂模式创建】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         //第二种方式
 8         function create() {
 9             var obj = new Object();
10             obj.name = "tom";
11             obj.age = 19;
12             obj.sex = "F";
13             obj.eat=function () {
14                 console.log("======"+this.name)
15             }
16             return obj;
17         }
18 
19         var pre = create();
20         pre.eat();
21     </script>
22 </head>
23 <body>
24     <h1>CJ</h1>
25 </body>
26 </html>

4.第二种方式，自定义构造函数

　　与函数有点不同，主要是首字母是大写。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         //第二种方式
 8         function Person() {
 9             this.name = "tom";
10             this.age = 19;
11             this.sex = "F";
12             this.eat=function () {
13                 console.log("======"+this.age);
14             }
15         }
16 
17         var pre = new Person();
18         pre.eat();
19     </script>
20 </head>
21 <body>
22     <h1>CJ</h1>
23 </body>
24 </html>

5.字面量的方式创建对象

　　缺陷：一次性对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         //第三种方式
 8         var pre = {};
 9         pre.name="tom";
10         pre.age=19;
11         pre.eat=function () {
12             console.log("====")
13         }
14 
15         //优化
16         var pp={
17             name:"lily",
18             age:20,
19             eat:function () {
20                 console.log("-----")
21             }
22         };
23 
24 
25     </script>
26 </head>
27 <body>
28     <h1>CJ</h1>
29 </body>
30 </html>

二：操作

1.设置与获取属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         //
 8         function Person(name) {
 9             this.name=name;
10         }
11         var person=new Person("tom");
12         console.log(person.name)
13 
14         //
15         person.name="aaa";
16         console.log(person.name)
17 
18         person["name"]="nnn";
19         console.log(person.name)
20 
21     </script>
22 </head>
23 <body>
24     <h1>CJ</h1>
25 </body>
26 </html>

　　效果：

三:Json

1.遍历

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         //
 8        var json={
 9            "name":"tom",
10            "age":10
11        }
12 
13        for (var key in json){
14            console.log(key+"===="+json[key]);
15        }
16     </script>
17 </head>
18 <body>
19     <h1>CJ</h1>
20 </body>
21 </html>

　　效果：

猜你喜欢