JavaScript 对象基础

2024-06-07 23:44| 来源: 网络整理| 查看: 265

对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法），让我们通过一个例子来了解它们。

首先，将 oojs.html 文件复制到本地，文件的元素非常少——仅一个供我们编写源代码的标签。我们将在此基础上研究对象基础语法。在使用此示例时，你应该打开开发者工具 JavaScript 控制台，并准备键入一些命令。

如同 JavaScript 中的很多东西一样，创建一个对象通常先定义并初始化变量。尝试在你的文件中输入以下 JavaScript 代码，保存并刷新页面：

jsconst person = {};

打开你的浏览器的 JavaScript 控制台输入 person，然后按下 Enter/Return，你可能会得到以下结果中的一种：

[object Object] Object { } { }

恭喜，你刚创建了你的第一个对象。干的漂亮！但这是一个空对象，所以我们做不了很多事情。让我们像这样更新文件中的 JavaScript 对象：

jsconst person = { name: ["Bob", "Smith"], age: 32, bio: function () { console.log(`${this.name[0]} ${this.name[1]} 现在 ${this.age} 岁了。`); }, introduceSelf: function () { console.log(`你好！我是 ${this.name[0]}。`); }, };

保存并刷新后，尝试在你的浏览器开发者工具的 JavaScript 控制台输入以下内容：

jsperson.name; person.name[0]; person.age; person.bio(); // "Bob Smith 现在 32 岁了。" person.introduceSelf(); // "你好！我是 Bob。"

现在，你的对象拥有了一些数据和功能，你现在可以通过简单的语法访问它们了！

所以发生了什么？一个对象由许多的成员组成，每一个成员都拥有一个名字（如 name、age）和一个值（如 ['Bob', 'Smith']、32）。每一组名字/值必须由逗号分隔开，并且名字和值之间由冒号分隔，语法规则如下所示：

jsconst objectName = { member1Name: member1Value, member2Name: member2Value, member3Name: member3Value, };

对象成员的值可以是任意的，person 对象里包含了：一个数字、一个数组，以及两个函数。前两项是数据项，被称为对象的属性，后两项是允许对象对该数据进行某些操作的函数，称为对象的方法。

当对象的成员是函数时，语法会更简单。我们可以写 bio() 来代替 bio: function()。像这样：

jsconst person = { name: ["Bob", "Smith"], age: 32, bio() { console.log(`${this.name[0]} ${this.name[1]} 现在 ${this.age} 岁了。`); }, introduceSelf() { console.log(`你好！我是 ${this.name[0]}。`); }, };

从现在开始，我们将使用这种更短的语法。

一个如上所示的对象被称之为对象字面量（object literal）——手动的写出对象的内容来创建一个对象。不同于从类实例化一个对象，我们会在后面学习这种方式。

当你想要传输一系列结构化的相关的数据项（例如，服务器发起请求以存储一些数据到数据库）时，常见的方式是使用字面量来创建一个对象。发送一个对象要比分别发送这些数据更有效率，当你使用名字标识这些数据时，它比数组更容易使用。

【本文地址】

公司简介

联系我们