在 JavaScript 中,对象为王。如果你了解对象,你就了解了 JavaScript。
在 JavaScript 中,几乎“一切”都是对象。
布尔值可以是对象(如果使用 new
关键字定义)
数字可以是对象(如果使用 new
关键字定义)
字符串可以是对象(如果使用 new
关键字定义)
日期始终是对象
数学始终是对象
正则表达式始终是对象
数组始终是对象
函数始终是对象
对象始终是对象
所有 JavaScript 值(除了原语)都是对象。
原始值是没有属性或方法的值。
3.14 是一个原始值
原始数据类型是具有原始值的数据。
JavaScript 定义了 7 种基本数据类型:
string
number
boolean
null
undefined
symbol
bigint
原始值是不可变的(它们是硬编码的并且无法更改)。
如果 x=3.14,则可以更改 x 的值,但不能更改 3.14 的值。
Value | Type | Comment |
---|---|---|
"Hello" | string | "Hello" is always "Hello" |
3.14 | number | 3.14 is always 3.14 |
true | boolean | true is always true |
false | boolean | false is always false |
null | null (object) | null is always null |
undefined | undefined | undefined 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 对象中的命名值称为属性。
约翰
美国能源部
50
蓝色的
以名称值对形式编写的对象类似于:
PHP 中的关联数组
Python 中的字典
C 中的哈希表
Java 中的哈希映射
Ruby 和 Perl 中的哈希
方法是可以对对象执行的操作。
对象属性可以是原始值、其他对象和函数。
对象方法是包含函数的对象属性 定义。
约翰
美国能源部
50
蓝色的
function() {return this.firstName + " " + this.lastName;}
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 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()
。
为了可读性、简单性和执行速度,请使用对象字面量方法。
对象是可变的:它们是通过引用而不是值来寻址的。
如果 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>