08JavaScript对象
Posted Yubaba丶
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了08JavaScript对象相关的知识，希望对你有一定的参考价值。
javascript 对象是拥有属性和方法的数据。
注：在 JavaScript 中，对象是非常重要的，当你理解了对象，就可以了解 JavaScript 。
1.JavaScript 对象
在 JavaScript中，几乎所有的事物都是对象。
以下代码为变量 car 设置值为 "Fiat" :
var car = "Fiat";
对象也是一个变量，但对象可以包含多个值（多个变量）。
var car = {type:"Fiat", model:500, color:"white"};
在以上实例中，3 个值 ("Fiat", 500, "white") 赋予变量 car。
在以上实例中，3 个变量 (type, model, color) 赋予变量 car。
2.对象定义
你可以使用字符来定义和创建 JavaScript 对象:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Yubaba</title> 6 </head> 7 <body> 8 9 <p>创建 JavaScript 对象。</p> 10 <p id="demo"></p> 11 <script> 12 var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"蓝色"}; 13 document.getElementById("demo").innerHTML = 14 person.firstName + " 现在 " + person.age + " 岁了，"+"他的眼睛是" 15 +person.eyeColor+"的。"; 16 </script> 17 18 </body> 19 </html>
3.对象定义
你可以使用字符来定义和创建 JavaScript 对象:
对象键值对的写法类似于：
- php 中的关联数组
- Python 中的字典
- C 语言中的哈希表
- Java 中的哈希映射
- Ruby 和 Perl 中的哈希表
4.访问对象属性
我们可以通过两种方式访问对象属性:
1.person.lastName;
实例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Yubaba</title> 6 </head> 7 <body> 8 9 <p> 10 有两种方式可以访问对象属性： 11 </p> 12 <p> 13 可以使用 .property 或 ["property"]. 14 </p> 15 <p id="demo"></p> 16 <script> 17 var person = { 18 firstName : "John", 19 lastName : "Doe", 20 id : 5566 21 }; 22 document.getElementById("demo").innerHTML = 23 person.firstName + "." + person.lastName; 24 </script> 25 26 </body> 27 </html>
2.person.["lastName"];
实例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Yubaba</title> 6 </head> 7 <body> 8 9 <p> 10 有两种方式可以访问对象属性： 11 </p> 12 <p> 13 你可以使用 .property 或 ["property"]. 14 </p> 15 <p id="demo"></p> 16 <script> 17 var person = { 18 firstName : "John", 19 lastName : "Doe", 20 id : 5566 21 }; 22 document.getElementById("demo").innerHTML = 23 person["firstName"] + "," + person["lastName"]; 24 </script> 25 26 </body> 27 </html>
两种方法都可以，运行结果一样。
5.对象方法
对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
该实例访问了 person 对象的 fullName() 方法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>创建和使用对象方法。</p> <p>对象方法作为一个函数定义存储在对象属性中。</p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + "," + this.lastName +",id为" + this.id; } }; //直接访问对象方法 fullName（）； document.getElementById("demo").innerHTML = person.fullName(); </script> </body> </html>
如果你要访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回：
实例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Yubaba</title> 6 </head> 7 <body> 8 9 <p>创建和使用对象方法。</p> 10 <p>对象方法是一个函数定义,并作为一个属性值存储。</p> 11 <p id="demo1"></p> 12 <p id="demo2"></p> 13 <script> 14 var person = { 15 firstName: "John", 16 lastName : "Cena", 17 id : 5566, 18 fullName : function() 19 { 20 return this.firstName + " " + this.lastName; 21 } 22 }; 23 document.getElementById("demo1").innerHTML = "不加括号（输出函数表达式）：" + person.fullName; 24 document.getElementById("demo2").innerHTML = "加括号（输出函数执行结果）：" + person.fullName(); 25 </script> 26 27 </body> 28 </html>
运行结果：
创建和使用对象方法。
对象方法是一个函数定义,并作为一个属性值存储。
不加括号（输出函数表达式）：function() { return this.firstName + " " + this.lastName; }
加括号（输出函数执行结果）：John Cena
以上是关于08JavaScript对象的主要内容，如果未能解决你的问题，请参考以下文章