JavaScript 对象是一种非原始数据类型,用于以键值对的形式存储数据。这些键值对通常被称为属性。在一个键值对中,键也称为“属性名”,是一个字符串,而值可以是任何类型。如果属性的值是一个函数,则该属性被称为方法。
对象使用花括号创建,每个属性之间用逗号分隔。每个属性写成属性名后跟冒号(:),然后是属性值。键:值对在对象中并不是按照特定顺序存储的,因此对象是一个无序的属性集合,这些属性写成键:值对的形式。
JavaScript 是一种面向对象编程(OOP)语言。如果一种编程语言提供了以下四种基本能力,则可以称之为面向对象的语言。
封装 — 将相关的信息(无论是数据还是方法)一起存储在一个对象中的能力。
抽象 — 隐藏对象实现细节的能力。
继承 — 一个类依赖另一个类(或多个类)的某些属性和方法的能力。
多态 — 编写一个可以在多种不同方式下工作的函数或方法的能力。
让我们详细了解一下 JavaScript 对象。
对象属性
对象属性可以是任何原始数据类型、对象或函数。对象属性通常是对象方法内部使用的变量,但也可以是页面中全局可见的变量。
向对象添加属性的语法如下:
objectName.objectProperty = propertyValue;
例如 — 下面的代码使用文档对象的 "title" 属性获取文档标题。
var str = document.title;
对象方法
方法是允许对象做某事或让某事发生在对象上的函数。函数和方法之间有一个小小的区别 — 函数是一个独立的语句单元,而方法是附加到对象上的,并且可以通过 this 关键字引用。
方法对于从将对象的内容显示到屏幕上到对一组本地属性和参数执行复杂的数学运算都有用。
例如 — 下面是一个简单的示例,演示如何使用文档对象的 write() 方法将任何内容写入文档。
document.write("这是一个测试");
创建新对象
所有用户定义的对象和内置对象都是从一个名为 Object 的对象派生出来的。
我们可以使用对象字面量来创建一个新的用户定义的对象。或者,我们可以创建一个构造函数,然后使用 new 关键字调用此函数以实例化一个对象。
在 JavaScript 中创建对象有多种方式。下面我们将学习所有的方式。
JavaScript 对象字面量
在 JavaScript 中,‘{}’ 表示对象字面量。你可以在花括号之间添加键值对来定义一个对象。
使用对象字面量定义对象的语法如下:
const obj = {
key: val,
}
你可以在花括号之间添加键值对。每个键值对之间用逗号分隔,并且键和值之间需要添加一个冒号(:)。
示例
在下面的示例中,我们定义了一个包含 4 个属性的 wall 对象。每个属性包含不同类型的不同值。
在输出中,你可以观察到对象属性及其值。
<html>
<body>
<p id="output"> </p>
<script>
const myBook = {
title: "Perl",
author: "Mohtashim",
pages: 355,
}
document.getElementById("output").innerHTML =
"书名是 : " + myBook.title + "<br>" +
"作者是 : " + myBook.author + "<br>" +
"总页数 : " + myBook.pages;
</script>
</body>
</html>
输出:
书名是 : Perl
作者是 : Mohtashim
总页数 : 355
JavaScript new 操作符
new 操作符用于创建一个对象的实例。为了创建一个对象,new 操作符后面跟着构造方法。
在下面的示例中,构造方法是 Object()、Array() 和 Date()。这些构造函数是 JavaScript 内置的函数。
var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");
JavaScript Object() 构造函数
构造函数是一个创建并初始化对象的函数。JavaScript 提供了一个特殊的构造函数 Object() 来构建对象。Object() 构造函数的返回值被赋值给一个变量。
这个变量包含指向新对象的引用。分配给对象的属性不是变量,并且不需要使用 var 关键字定义。
示例
尝试下面的示例;它演示了如何创建一个 Object。
<body>
<p id="output"> </p>
<script>
var book = new Object();
book.subject = "Perl";
book.author = "Mohtashim";
document.getElementById("output").innerHTML =
"书名是 : " + book.subject + "<br>" +
"作者是 : " + book.author;
</script>
</body>
输出:
书名是 : Perl
作者是 : Mohtashim
JavaScript 构造函数
在 JavaScript 中,你可以定义一个自定义函数,并将其用作构造函数来定义一个新对象。这里,自定义函数充当模板。
自定义用户定义构造函数相对于 Object() 构造函数的好处在于,你可以根据需要向自定义函数添加参数。
下面是一个简单的语法,用于使用自定义用户定义构造函数创建对象。
function ConstructorFunc(para) {
this.para = para;
}
const obj = new ConstructorFunc(arg);
ConstructorFunc() 函数充当对象模板。它使用 'this' 关键字访问函数上下文并定义函数上下文中的键。同时,键被初始化为 'para' 值。
接下来,你可以使用带有 'new' 关键字的函数作为构造函数定义对象,并向构造函数传递所需的参数。
示例
这个示例演示了如何使用用户定义的构造函数创建一个对象。这里 this 关键字用于引用传递给函数的对象。
<body>
<div id="output"> </div>
<script>
function Book(title, author) {
this.title = title;
this.author = author;
}
const myBook = new Book("Perl", "Mohtashim");
document.getElementById("output").innerHTML =
"书名是 : " + myBook.title + "<br>" +
"作者是 : " + myBook.author + "<br>";
</script>
</body>
输出:
书名是 : Perl
作者是 : Mohtashim
JavaScript Object.create() 方法
Object.create() 方法从已经定义的对象创建一个新对象。此外,你还可以在使用 Object.create() 方法从一个对象克隆另一个对象时向对象原型添加一些新的属性。
下面的语法用于使用 Object.create() 方法定义一个新对象。
const obj = Object.create({}, {
key: { value: val },
})
-
{}
— 这是一个空对象。Object.create() 方法会创建它的副本。
-
{ key: { value: val }, }
— 这是一个包含要添加到克隆对象原型的属性的对象。
示例
在下面的示例中,我们向空对象的原型添加了多个属性。但是,如果你打印对象,你将无法看到任何属性,因为它们是添加到原型中的。
你可以使用点记法访问对象属性。
<body>
<p id="output"> </p>
<script>
const myBook = Object.create({}, {
title: { value: "Perl" },
author: { value: "Mohtashim" },
})
document.getElementById("output").innerHTML =
"书名是 : " + myBook.title + "<br>" +
"作者是 : " + myBook.author + "<br>";
</script>
</body>
输出:
书名是 : Perl
作者是 : Mohtashim
JavaScript ES6 类
ES6 中引入了 JavaScript 类。JavaScript 类是创建对象的模板。类使用 "class" 关键字定义。定义类时,它类似于函数。类关键字后面跟着类名,然后是类体。
class MyClass{
}
你可以使用 new 操作符使用类创建一个对象 —
const myObj = new MyClass();
在这里,ClassName 是类的名字,而 myObject 是使用这个类创建的对象的名字。
我们将在下一章详细介绍 JavaScript 类。