08JavaScript对象

2019-01-15 07:04:04来源：博客园阅读 ()

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

原文链接:https://www.cnblogs.com/lmyupupblogs/p/10265751.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：01 HelloWorld

下一篇：CentOS redis安装配置

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签