JavaScript 对象


目录

    显示目录


在 JavaScript 中,对象为王。如果你了解对象,你就了解了 JavaScript。


在 JavaScript 中,几乎“一切”都是对象。

  • 布尔值可以是对象(如果使用 new 关键字定义)

  • 数字可以是对象(如果使用 new 关键字定义)

  • 字符串可以是对象(如果使用 new 关键字定义)

  • 日期始终是对象

  • 数学始终是对象

  • 正则表达式始终是对象

  • 数组始终是对象

  • 函数始终是对象

  • 对象始终是对象

所有 JavaScript 值(除了原语)都是对象。


JavaScript 基元

原始值是没有属性或方法的值。

3.14 是一个原始值

原始数据类型是具有原始值的数据。

JavaScript 定义了 7 种基本数据类型:

例子

  • string
  • number
  • boolean
  • null
  • undefined
  • symbol
  • bigint

不可变的

原始值是不可变的(它们是硬编码的并且无法更改)。

如果 x=3.14,则可以更改 x 的值,但不能更改 3.14 的值。

ValueTypeComment
"Hello"string"Hello" is always "Hello"
3.14number3.14 is always 3.14
truebooleantrue is always true
falsebooleanfalse is always false
nullnull (object)null is always null
undefinedundefinedundefined is always undefined

对象是变量

JavaScript 变量可以包含单个值:

例子

let person = "John Doe";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p id="demo"></p>

<script>
// Create and display a variable:
let person = "John Doe";
document.getElementById("demo").innerHTML = person;
</script>

</body>
</html>

JavaScript 变量还可以包含许多值。

对象也是变量。但对象可以包含很多 价值观。

对象值被写为名称:值对(名称和值用a分隔) 冒号)。

例子

let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>

<p id="demo"></p>

<script>
let person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>
</html>

JavaScript 对象是命名值的集合

使用 const 关键字声明对象是一种常见的做法。

例子

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>

<p id="demo"></p>

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>
</html>


对象属性

JavaScript 对象中的命名值称为属性

firstName

约翰

lastName

美国能源部

age

50

eyeColor

蓝色的

以名称值对形式编写的对象类似于:

  • PHP 中的关联数组

  • Python 中的字典

  • C 中的哈希表

  • Java 中的哈希映射

  • Ruby 和 Perl 中的哈希


对象方法

方法是可以对对象执行的操作

对象属性可以是原始值、其他对象和函数。

对象方法是包含函数的对象属性 定义。

firstName

约翰

lastName

美国能源部

age

50

eyeColor

蓝色的

fullName

function() {return this.firstName + " " + this.lastName;}

JavaScript 对象是命名值的容器,称为属性和方法。

您将在接下来的章节中了解有关方法的更多信息。


创建 JavaScript 对象

使用 JavaScript,您可以定义和创建自己的对象。

创建新对象有不同的方法:

  • 使用对象字面量创建单个对象。

  • 使用关键字 new 创建单个对象。

  • 定义一个对象构造函数,然后创建该构造类型的对象。

  • 使用 Object.create() 创建一个对象。


使用对象文字

这是创建 JavaScript 对象的最简单方法。

使用对象字面量,您可以同时定义和创建一个对象 陈述。

对象字面量是大括号 {} 内的名称:值对(例如年龄:50)的列表。

以下示例创建一个具有四个属性的新 JavaScript 对象:

例子

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

<p id="demo"></p>

<script>
const person = {firstName:"John", lastName:"Doe", age:50,eyeColor:"blue"};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

空格和换行符并不重要。一个对象定义可以跨越多行:

例子

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

此示例创建一个空的 JavaScript 对象, 然后添加4个属性:

例子

const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

<p id="demo"></p>

<script>
const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"; 

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

使用 JavaScript 关键字 new

以下示例创建一个新的 JavaScript 对象 使用new Object(), 然后添加4个属性:

例子

const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

<p id="demo"></p>

<script>
const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"; 

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

上面的例子的作用完全相同。

但没有必要使用new Object()

为了可读性、简单性和执行速度,请使用对象字面量方法。


JavaScript 对象是可变的

对象是可变的:它们是通过引用而不是值来寻址的。

如果 person 是一个对象,则以下语句不会创建 person 的副本:

const x = person;  // Will not create a copy of person.

对象 x 不是 person 的副本。它 人。 x 和 person 都是同一个对象。

对 x 的任何更改也会更改 person,因为 x 和 person 是同一个对象。

例子

const person = {
  firstName:"John",
  lastName:"Doe",
  age:50, eyeColor:"blue"
}
 
const x = person;
x.age = 10;      // Will change both x.age and person.age

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JavaScript objects are mutable.</p>
<p>Any changes to a copy of an object will also change the original object:</p>

<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  age:50,
  eyeColor: "blue"
};

const x = person;
x.age = 10;

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>