JavaScript也具有对象,用于将属性和函数放在一起,虽然他是面向对象的语言,但是不具备类和接口。
1、对象的定义
(1)字面量方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Java Script</title> <script type="text/javascript"> </script> </head> <body bgcolor="aquamarine"> <script> var Person = { name: "Li",//属性 age: 12, per: function() {//函数 alert("你好"); } } console.log(Person.name); console.log(Person.age); Person.per(); </script> </body> </html>
(2)var 变量名=new Object()方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Java Script</title> <script type="text/javascript"> </script> </head> <body bgcolor="aquamarine"> <script> var Person = new Object(); Person.name="Li"; Person.age=12; Person.per= function() { alert("你好"); } console.log(Person.name); console.log(Person.age); Person.per(); </script> </body> </html>
(3)构造函数方式创建对象
构造函数是一种特殊的函数,主要用来初始化对象,可以把一些公共的属性和方法抽取出来,然后封装到函数内
<script> function User(username,password){ this.username=username; this.password=password; this.hobby=function(hobby){ console.log(hobby); } } var u1= new User('zhai','123456'); u1.hobby("rap"); var u2= new User('zhang','666666'); u2.hobby("篮球"); console.log(u1); console.log(typeof u1); console.log(u2); </script>
2、对象属性的访问
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Java Script</title> <script type="text/javascript"> </script> </head> <body bgcolor="aquamarine"> <script> var Person = new Object(); Person.name="Li"; Person.age=12; Person.per= function() { alert("你好"); } console.log(Person["name"]); console.log(Person.age); </script> </body> </html>
一共有两中访问方法:
(1)直接加点访问
(2)采用方括号访问,此方法对于属性名不规则的情况依旧适用。
3、对象的基本操作
(1)添加
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Java Script</title> <script type="text/javascript"> </script> </head> <body bgcolor="aquamarine"> <script> var Person = new Object(); Person.name="Li"; Person.age=12; Person.per= function() { alert("你好"); } Person.sex="男"; console.log(Person.sex); </script> </body> </html>
(2)修改
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Java Script</title> <script type="text/javascript"> </script> </head> <body bgcolor="aquamarine"> <script> var Person = new Object(); Person.name="Li"; Person.age=12; Person.per= function() { alert("你好"); } Person.name="zhai"; console.log(Person.name); </script> </body> </html>
4、遍历对象
(1)for... in
输出属性名:
<script> var Person = new Object(); Person.name="Li"; Person.age=12; Person.per= function() { alert("你好"); } Person.name="zhai"; for(var a in Person){ console.log(a); } </script>
输出属性值:
<script> var Person = new Object(); Person.name="Li"; Person.age=12; Person.per= function() { alert("你好"); } Person.name="zhai"; for(var a in Person){ console.log(Person[a]); } </script>