手册

目录

对象

收藏538

阅读848

更新时间2025-08-07

真实生活中的对象、属性和方法

在真实生活中,汽车是一个对象

汽车有诸如车重和颜色等属性,也有诸如启动和停止的方法

对象 属性 方法

car.name = porsche

car.model = 911

car.length = 4499mm

car.color = white

car.start()

car.drive()

car.brake()

car.stop()

所有汽车都拥有同样的属性,但属性值因车而异。

所有汽车都拥有相同的方法,但是方法会在不同时间被执行。

JavaScript 对象

您之前已经学到,JavaScript 变量是数据值的容器。

这段代码把一个单一值(porsche)赋给名为 car 的变量

var car = "porsche";
运行实例 »

点击 "运行实例" 按钮查看在线实例

对象也是变量。但是对象包含很多值。

这段代码把多个值(porsche, 911, white)赋给名为 car 的变量

var car = {type:"porsche", model:"911", color:"white"};
运行实例 »

点击 "运行实例" 按钮查看在线实例

值以名称:值对的方式来书写(名称和值由冒号分隔)。

JavaScript 对象是被命名值的容器。

对象属性

(JavaScript 对象中的)名称:值对被称为属性

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
属性 属性值
firstName Bill
lastName Gates
age 62
eyeColor blue

对象方法

对象也可以有方法

方法是在对象上执行的动作

方法以函数定义被存储在属性中。

属性 属性值
firstName Bill
lastName Gates
age 62
eyeColor blue
fullName function() {return this.firstName + " " + this.lastName;}

方法是作为属性来存储的函数。

实例

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

this 关键词

在函数定义中,this 引用该函数的“拥有者”。

在上面的例子中,this 指的是“拥有” fullName 函数的 person 对象

换言之,this.firstName 的意思是 this 对象的 firstName 属性。

请在 JS this 关键词这一章学习更多有关 this 关键词的知识。

对象定义

我们定义(创建)了一个 JavaScript 对象:

实例

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
运行实例 »

点击 "运行实例" 按钮查看在线实例

空格和折行都是允许的。对象定义可横跨多行:

实例

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
};
运行实例 »

点击 "运行实例" 按钮查看在线实例

访问对象属性

您能够以两种方式访问属性:

objectName.propertyName

或者

objectName["propertyName"]

例子 1

person.lastName;
运行实例 »

点击 "运行实例" 按钮查看在线实例

例子 2

person["lastName"];
运行实例 »

点击 "运行实例" 按钮查看在线实例

访问对象方法

您能够通过如下语法访问对象方法:

objectName.methodName()

实例

name = person.fullName();
运行实例 »

点击 "运行实例" 按钮查看在线实例

如果您不使用 () 访问 fullName 方法,则将返回函数定义

实例

name = person.fullName;
运行实例 »

点击 "运行实例" 按钮查看在线实例

方法实际上是以属性值的形式存储的函数定义。

请不要把字符串、数值和布尔值声明为对象!

如果通过关键词 "new" 来声明 JavaScript 变量,则该变量会被创建为对象:

var x = new String();        // 把 x 声明为 String 对象
var y = new Number();        // 把 y 声明为 Number 对象
var z = new Boolean();       //	把 z 声明为 Boolean 对象

请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。

您将在本教程的稍后章节学到更多有关对象的知识。

课外书

如需更多有关 JavaScript 对象的知识,请阅读 JavaScript 高级教程中的相关内容:

ECMAScript 面向对象技术
本节简要介绍了面向对象技术的术语、面向对象语言的要求以及对象的构成。
ECMAScript 对象应用
本节讲解了如何声明和实例化对象,如何引用和废除对象,以及绑定的概念。
ECMAScript 对象类型
本节介绍了 ECMAScript 的三种类型:本地对象、内置对象和宿主对象,并提供了指向相关参考手册的链接。
ECMAScript 对象作用域
本节讲解了 ECMAScript 作用域以及 this 关键字。
ECMAScript 定义类或对象
本节详细讲解了创建 ECMAScript 对象或类的各种方式。
ECMAScript 修改对象
本节讲解了如何通过创建新方法或重定义已有方法来修改对象。

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.8万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.4万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

71.1万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.7万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

34万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号