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 对象:
<!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对象的更多相关文章
- 08JavaScript数学与日期时间对象
JavaScript数学与日期时间对象 5.1.3数学(Math)对象 <script> //欧拉常量,自然对数的底(约等于2.718); document.write(Math.E+&q ...
- 如何一步一步用DDD设计一个电商网站(九)—— 小心陷入值对象持久化的坑
阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- 探究javascript对象和数组的异同,及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
- Asp.Net WebApi核心对象解析(下篇)
在接着写Asp.Net WebApi核心对象解析(下篇)之前,还是一如既往的扯扯淡,元旦刚过,整个人还是处于晕的状态,一大早就来处理系统BUG,简直是坑爹(好在没让我元旦赶过来该BUG),队友挖的坑, ...
- JS核心系列:浅谈原型对象和原型链
在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象(Object)和函数对象(Function). 一般而言,通过new Function产生的对象是函数对象,其他对 ...
- Chrome出了个小bug:论如何在Chrome下劫持原生只读对象
Chrome出了个小bug:论如何在Chrome下劫持原生只读对象 概述 众所周知,虽然JavaScript是个很灵活的语言,浏览器里很多原生的方法都可以随意覆盖或者重写,比如alert.但是为了保证 ...
- XStream将java对象转换为xml时,对象字段中的下划线“_”,转换后变成了两个的解决办法
在前几天的一个项目中,由于数据库字段的命名原因 其中有两项:一项叫做"市场价格"一项叫做"商店价格" 为了便于区分,遂分别将其命名为market ...
- ASP.NET内置对象的总结
1. Response对象可形象的称之为响应对象,用于将数据从服务器发送回浏览器. 实例源码:链接: http://pan.baidu.com/s/1dDCKQ8x 密码: ihq0 2. Requ ...
随机推荐
- SharePoint 2013 - Host-named Site Collection
1. 详细操作可参考此文章 的 Deployment and configuration for host-named site collections区域,简单来说,需要以下三行PowerShell ...
- 第三次Scrum
1.小组成员 周 斌舒 溢许嘉荣唐 浩黄欣欣廖帅元刘洋江薛思汝 2.小组第三次冲刺完成情况 github仓库小组的第三次任务是完成体系结构环境图和系统原型图.在体系结构设计中,分为上级系统----把目 ...
- ajax 请求调用问题
http://localhost/dev/list 和 http://127.0.0.1/dev/list 最近在架构整体常规通用系统的解决方案,遭遇AJAX请求不执行的问题,刚开始以为Spring ...
- spring-wind 搭建过程问题记录
最近想搭一个 shiro+ssm的快速开发框架,用于后台管理以及微信公众号的开发.后台主要是权限管理,于是选择有spring+shiro,微信公众号的前端页面搜了下有用velocity开发的,刚好看到 ...
- [翻译] 单例(Singleton)
英文原文: https://sourcemaking.com/design_patterns/singleton 意图 确保一个类只有一个实例,并提供一个访问其实例的全局点: 封装 “即时初始化” ( ...
- JBOSS参数调优
阅读目录 JBOSS参数调优 jvm调优讲解1 JVM调优讲解2 JVM常见配置汇总 JBOSS生产环境下JVM调优 JBOSS瘦身 JBoss性能优化:内存紧张的问题终于解决了(转载)--- ...
- SVN常用功能介绍(一)
简介 SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS. 互联网上很多版本控制服务已从CVS迁移到Subver ...
- [翻译] iOS开发工具的介绍(第一部分)
IOS DEVELOPMENT TIPS & TRICKS - PART I http://blog.trifork.com/2013/12/19/ios-development-tips-t ...
- 旋转动画用控件RotateView
旋转动画用控件RotateView 最终效果: 源码: RotateView.h 与 RotateView.m // // RotateView.h // RotateAnimationView // ...
- 数据库建模工具 PD的使用
1.1. 数据库建模工具 PD的使用 安装12.5版本,进行破解 PD 是最专业数据建模工具, 是 Sybase 公司一个 产品 PD 提供四种模型文件 PDM 物理数据模型,面向数据库表结构设计,直 ...