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 对象:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Yubaba</title>
</head>
<body> <p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"蓝色"};
document.getElementById("demo").innerHTML =
person.firstName + " 现在 " + person.age + " 岁了,"+"他的眼睛是"
+person.eyeColor+"的。";
</script> </body>
</html>

3.对象定义

你可以使用字符来定义和创建 JavaScript 对象:

对象键值对的写法类似于:

  • PHP 中的关联数组
  • Python 中的字典
  • C 语言中的哈希表
  • Java 中的哈希映射
  • Ruby 和 Perl 中的哈希表

4.访问对象属性

我们可以通过两种方式访问对象属性:

1.person.lastName;

实例:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Yubaba</title>
</head>
<body> <p>
有两种方式可以访问对象属性:
</p>
<p>
可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
id : 5566
};
document.getElementById("demo").innerHTML =
person.firstName + "." + person.lastName;
</script> </body>
</html>

2.person.["lastName"];

实例:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Yubaba</title>
</head>
<body> <p>
有两种方式可以访问对象属性:
</p>
<p>
你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
id : 5566
};
document.getElementById("demo").innerHTML =
person["firstName"] + "," + person["lastName"];
</script> </body>
</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 属性,它将作为一个定义函数的字符串返回:

实例:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Yubaba</title>
</head>
<body> <p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
firstName: "John",
lastName : "Cena",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo1").innerHTML = "不加括号(输出函数表达式):" + person.fullName;
document.getElementById("demo2").innerHTML = "加括号(输出函数执行结果):" + person.fullName();
</script> </body>
</html>

运行结果:

创建和使用对象方法。

对象方法是一个函数定义,并作为一个属性值存储。

不加括号(输出函数表达式):function() { return this.firstName + " " + this.lastName; }

加括号(输出函数执行结果):John Cena

08JavaScript对象的更多相关文章

  1. 08JavaScript数学与日期时间对象

    JavaScript数学与日期时间对象 5.1.3数学(Math)对象 <script> //欧拉常量,自然对数的底(约等于2.718); document.write(Math.E+&q ...

  2. 如何一步一步用DDD设计一个电商网站(九)—— 小心陷入值对象持久化的坑

    阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...

  3. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  4. 探究javascript对象和数组的异同,及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  5. Asp.Net WebApi核心对象解析(下篇)

    在接着写Asp.Net WebApi核心对象解析(下篇)之前,还是一如既往的扯扯淡,元旦刚过,整个人还是处于晕的状态,一大早就来处理系统BUG,简直是坑爹(好在没让我元旦赶过来该BUG),队友挖的坑, ...

  6. JS核心系列:浅谈原型对象和原型链

    在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象(Object)和函数对象(Function). 一般而言,通过new Function产生的对象是函数对象,其他对 ...

  7. Chrome出了个小bug:论如何在Chrome下劫持原生只读对象

    Chrome出了个小bug:论如何在Chrome下劫持原生只读对象 概述 众所周知,虽然JavaScript是个很灵活的语言,浏览器里很多原生的方法都可以随意覆盖或者重写,比如alert.但是为了保证 ...

  8. XStream将java对象转换为xml时,对象字段中的下划线“_”,转换后变成了两个的解决办法

            在前几天的一个项目中,由于数据库字段的命名原因 其中有两项:一项叫做"市场价格"一项叫做"商店价格" 为了便于区分,遂分别将其命名为market ...

  9. ASP.NET内置对象的总结

    1. Response对象可形象的称之为响应对象,用于将数据从服务器发送回浏览器. 实例源码:链接: http://pan.baidu.com/s/1dDCKQ8x 密码: ihq0  2. Requ ...

随机推荐

  1. 【转】My App Crashed, Now What? – Part 1

    原文地址:http://www.raywenderlich.com/10209/my-app-crashed-now-what-part-1  By Matthijs Hollemans on Mar ...

  2. IONIC调用原生的等待对话框

    ngCordova提供了progressIndicator插件,用以方便的显示等待对话框,但是目前版本仅支持安卓版本.为了让苹果版本也显示,可以到以下地址下载通用的插件,JS部分的代码无需改变: ht ...

  3. 查询组成员(group)

    查询组成员 $groupname = "groupname" $members = (get-adgroup $groupname -properties member).memb ...

  4. Mysql学习---视图/触发器/存储过程/函数/执行计划/sql优化 180101

    视图 视图: 视图是一个虚拟表(非真实存在),动态获取数据,仅仅能做查询操作 本质:[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用.由 ...

  5. Exchange 2016 体系结构简介

    一.Exchange 2016简介 现在,CPU计算能力的成本显著降低,不再成为约束因素.随着此约束因素的消失,Exchange2016的主要设计目标是简化扩展.提高硬件利用率和实现故障隔离:在Exc ...

  6. ZT Android布局】在程序中设置android:gravity 和 android:layout_Gravity属性

    Android布局]在程序中设置android:gravity 和 android:layout_Gravity属性 分类: [Android基础] 2011-04-19 16:06 54739人阅读 ...

  7. PHP 字符串补0

    转自:https://www.cnblogs.com/bluebirds/archive/2016/11/22/6091099.html#undefined 概述:项目中经常会使用到在一串编码左边.右 ...

  8. 使用combineReducers注意事项

    一.从‘redux’包中引入combineReducers方法: import { combineReducers } from 'redux'; 二.针对state的不同属性写不同的reducer, ...

  9. datetime.datetime.now()时间格式转化是碰到的问题

    import datetime print datetime.datetime.now() # 2016-03-28 17:16:00.812000 a = ‘2016-03-28 17:16:00. ...

  10. 【深入理解JVM】:Java内存模型JMM

    多任务和高并发的内存交互 多任务和高并发是衡量一台计算机处理器的能力重要指标之一.一般衡量一个服务器性能的高低好坏,使用每秒事务处理数(Transactions Per Second,TPS)这个指标 ...