JavaScript 对象

对象 (Object) 是面向对象编程的核心概念，javascript也可以对象化，即把相关的数据和方法组织为一个整体来看待，从更高的层次来进行系统建模，更贴近事物的自然运行模式。

在 JavaScript 中，对象是由 new 运算符生成，生成对象的函数被称为类（或称为构造函数、对象类型）。生成的对象被称为类的实例，简称为对象。

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

在真实生活中，可以将汽车看作是是一个对象。

它有诸如车重和颜色等属性，也有诸如启动和停止的方法：

对象	属性	方法
	car.name = maserati car.model = president car.length = 4499mm car.color = white	car.start() car.drive() car.brake() car.stop()

对象

属性

方法

car.name = maserati

car.model = president

car.length = 4499mm

car.color = white

car.start()

car.drive()

car.brake()

car.stop()

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

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

JavaScript 对象

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

这段代码把一个单一值（maserati）赋给名为 car 的变量：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 变量</h2>
<p id="demo">
<script>
// 创建并显示变量：
var car = "maserati";
document.getElementById("demo").innerHTML = car;
</script>
</body>
</html>

运行一下

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

这段代码把多个值（maserati, president, white）赋值给 car 变量：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象</h1>
<p id="demo">
<script>
// 创建对象：
var car = {type:"玛莎拉蒂", model:"总裁", color:"白色"};
// 显示对象中的数据：
document.getElementById("demo").innerHTML = car.type;
</script>
</body>
</html>

运行一下

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

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

对象属性

（JavaScript 对象中的）名称:值对被称为属性。

var person = {firstName:"比尔", lastName:"盖茨", age:62, eyeColor:"蓝色"};

属性	属性值
姓氏	比尔
名称	盖茨
年龄	62
眼睛	蓝色

对象方法

对象也可以有方法。

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

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

属性	属性值
姓氏	比尔
名称	盖茨
年龄	62
眼睛	蓝色
fullName	function() {return this.firstName + " " + this.lastName;}

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

var person = {
  firstName: "比尔",
  lastName : "盖茨",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

this 关键词

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

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

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

对象定义

我们定义（创建）了一个 JavaScript 对象：

实例

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象创建</h1>
<p id="demo">
<script>
// 创建对象：
var person = {firstName:"比尔", lastName:"盖茨", age:62, eyeColor:"蓝色"};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>
</body>
</html>

运行一下

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象创建</h1>
<p id="demo">
<script>
// 创建对象：
var person = {
    firstName : "比尔",
    lastName  : "盖茨",
    age       : 62,
    eyeColor  : "蓝色"
};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>
</body>
</html>

运行一下

访问对象属性

您能够以两种方式访问属性：objectName.propertyName或者objectName["propertyName"]

例子 1

objectName.propertyName

例子 2

objectName["propertyName"]

访问对象方法

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

objectName
methodName()

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象属性</h1>
<p>有两种不同的方法来访问对象属性。</p>
<p>您可以使用 person.property 或 person["property"]。</p>
<p id="demo">
<script>
// 创建对象：
var person = {
    firstName: "比尔",
    lastName : "盖茨",
    id       :  12345
};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>
</body>
</html>

运行一下

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象属性</h1>
<p>有两种不同的方法来访问对象属性。</p>
<p>您可以使用 person.property 或 person["property"]。</p>
<p id="demo">
<script>
// 创建对象：
var person = {
    firstName: "比尔",
    lastName : "盖茨",
    id       :  12345
};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>
</body>
</html>

运行一下

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

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

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

objectName.methodName()

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

JavaScript 对象

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

JavaScript 对象

对象属性

对象方法

this 关键词

对象定义

实例

访问对象属性

例子 1

例子 2

访问对象方法

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

分类导航