一：面向对象 1.说明 面向对象特性：封装，继承，多态 js不是面向对象的语言吗，但是可以模拟面向对象的思想 js是一门基于对象的语言 2.第一种方式 调用系统的构造函数创建对象
一：面向对象
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>
效果：