JavaScript - 对象概述

JavaScript 对象

JavaScript 对象是一种非原始数据类型，用于将数据存储为键值对。键值对通常称为属性。键值对中的键（也称为“属性名称”）是一个字符串，值可以是任何内容。如果属性的值是函数，则该属性称为方法。

对象是使用大括号创建的，每个属性都用逗号分隔。每个属性都写为 属性名称 后跟冒号（:) 后跟 属性值。key：值对不按特定顺序存储在对象中。因此，对象是写入 key： value 对的属性的无序集合。

JavaScript 是一种面向对象编程（OOP）语言。如果编程语言为开发人员提供了四种基本功能，则可以称为面向对象的编程语言。

封装 - 将相关信息（无论是数据还是方法）一起存储在一个对象中的能力。
抽象 - 对用户隐藏对象的实现细节的能力。
继承 - 一个类的某些属性和方法依赖于另一个类（或多个类）的能力。
多态性 - 编写一个以各种不同方式工作的函数或方法的能力。

让我们详细了解 JavaScript 对象。

对象属性

对象属性可以是任何原始数据类型、对象或函数。对象属性通常是在对象方法内部使用的变量，但也可以是在整个页面中使用的全局可见变量。

向对象添加属性的语法是 −


 objectName.objectProperty = propertyValue;

例如 − 以下代码使用 document 对象的 “title” 属性获取文档标题。


 var str = document.title;

对象方法

方法是让对象执行某项操作或允许对其执行某些操作的函数。函数和方法之间有一个细微的区别 – at 函数是独立的语句单元，而方法附加到对象，可以由 this 关键字引用。

方法可用于从向屏幕显示对象内容到对一组本地属性和参数执行复杂数学运算的所有操作。

例如 − 下面是一个简单的示例，演示如何使用 document 对象的 write（） 方法在文档中写入任何内容。


 document.write("This is test");

创建新对象

所有用户定义对象和内置对象都是名为 Object 的对象的后代。

我们可以使用对象字面量来创建新的用户定义对象。或者，我们可以创建一个构造函数，然后使用 new 关键字调用此函数来实例化对象。

在 JavaScript 中创建对象的方法有多种。在这里，我们将学习下面给出的所有方法。

使用 Object Literal
使用 Object 构造函数
使用 Object.create（）方法
使用 JavaScript ES6 类

JavaScript 对象字面量（Object Literal）

在 JavaScript 中，'{}' 由对象字面量表示。您可以在大括号之间添加一对键值对来定义对象。

您可以按照以下语法使用对象文本来定义对象。


const obj = {
	 	key: val,
}

您可以在大括号之间添加键值对。每个键值对都用逗号分隔，您需要在 key 和 value 之间添加一个冒号（:)。

例

在下面的示例中，我们定义了一个包含 4 个属性的 wall 对象。每个属性都包含不同数据类型的不同值。

在输出中，您可以观察对象属性及其值。


<html>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 const myBook = {
	 	 	 	 	title: "Perl",
	 	 	 	 	author: "Mohtashim",
	 	 	 	 	pages: 355,
	 	 	 }
	 	 	 document.getElementById("output").innerHTML =
	 	 	 "Book name is : " + myBook.title + "<br>"
	 	 	 +"Book author is : " + myBook.author + "<br>"
	 	 	 +"Total pages : " + myBook.pages;
	 	</script>
</body>
</html>

输出

Book name is : Perl
Book author is : Mohtashim
Total pages : 355

JavaScript new 运算符

new 运算符用于创建对象的实例。要创建对象，new 运算符后跟 constructor 方法。

在下面的示例中，构造函数方法是 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。


<html>
<body> 	
	 	<p id = "output"> </p>
	 	<script>
	 	 	 var book = new Object(); 	 // Create the object
	 	 	 book.subject = "Perl"; 	 	 // Assign properties to the object
	 	 	 book.author 	= "Mohtashim";
	 	 	 document.getElementById("output").innerHTML =	
	 	 	 "Book name is : " + book.subject + "<br>" +	
	 	 	 "Book author is : " + book.author;
	 	</script> 		
</body>
</html>

输出

Book name is : Perl
Book author is : Mohtashim

JavaScript 构造函数

在 JavaScript 中，您可以定义自定义函数并将其用作构造函数来定义新对象。在这里，自定义函数用作模板。

与 Object（）构造函数相比，自定义用户定义构造函数的优点是，您可以根据需要向自定义函数添加参数。

以下是使用自定义用户定义的构造函数创建对象的简单语法。


// Object template
function ConstructorFunc(para) {
	 	 this.para = para;
}
const obj = new ConstructorFunc(arg);

ConstructorFunc（）函数用作对象模板。它使用 'this' 关键字来访问函数的上下文，并在函数上下文中定义键。此外，该键使用 'para' 值进行初始化。

接下来，您可以将该函数用作带有 'new' 关键字的构造函数来定义对象并将所需的参数传递给构造函数。

例

此示例演示如何使用用户定义的构造函数 Function 创建对象。这里这个关键字用来引用已经传递给函数的对象。


<html>
<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 =	
	 	 	 "Book title is : " + myBook.title + "<br>" +
	 	 	 "Book author is : " + myBook.author + "<br>";
	 	</script> 	 	 	
</body>
</html>

输出

Book title is : Perl
Book author is : Mohtashim

JavaScript Object.create（）方法

Object.create（）方法从已定义的对象创建新对象。此外，在使用 Object.create（）方法从一个对象克隆另一个对象时，你可以向对象原型添加一些新属性。

按照下面的语法使用 Object.create（）方法来定义新对象。


const obj = Object.create({}, {
	 	 key: { value: val },
})

{}− 它是一个空对象。Object.create（）方法会创建一个副本。
{ key： { value： val }， } − 它是一个对象，其中包含要添加到克隆对象原型的属性。

例

在下面的示例中，我们向 empty 对象的 prototype 添加了多个 property。但是，如果打印对象，则无法看到任何添加到原型中的属性。

您可以使用点表示法访问对象属性。


<html>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 const myBook = Object.create({}, {
	 	 	 	 	title: { value: "Perl" },
	 	 	 	 	author: { value: "Mohtashim" },
	 	 	 })
	 	 	 		
	 	 	 document.getElementById("output").innerHTML =	
	 	 	 "Book title is : " + myBook.title + "<br>" +	
	 	 	 "Book author is : " + myBook.author + "<br>";

	 	</script>
</body>
</html>

输出

Book title is : Perl
Book author is : Mohtashim

JavaScript ES6 类

JavaScript 类是在 ES6 中引入的。JavaScript 类是用于创建对象的模板。类是使用 “class” 关键字定义的。它类似于定义类时的函数。class 关键字后跟类名，然后是类 body。


class MyClass{
	 //class body
}

您可以使用 new 运算符通过类 -


 const myObj = new MyClass();

这里 ClassName 是类的名称，myObject 是使用此类创建的对象的名称。

我们将在下一章中详细讨论 JavaScript 类。

定义对象的方法

前面的示例演示了构造函数如何创建对象并分配属性。但是我们需要通过为对象分配方法来完成对象的定义。

例

请尝试以下示例;它演示如何将函数与对象一起添加。


<html> 		
	 <head>
	 	 <title>User-defined objects</title>
	 	 <script>
	 	 	 // Define a function which will work as a method
	 	 	 function addPrice(amount) {
	 	 	 	 this.price = amount;	
	 	 	 }

	 	 	 function Book(title, author) {
	 	 	 	 this.title = title;
	 	 	 	 this.author 	= author;
	 	 	 	 this.addPrice = addPrice; 	// Assign that method as property.
	 	 	 }
	 	 </script> 	 	 	
	 </head>

	 <body> 		
	 	 <div id = "output"> </div>
	 	 <script>
	 	 	 var myBook = new Book("Perl", "Mohtashim");
	 	 	 myBook.addPrice(100);

	 	 	 document.getElementById("output").innerHTML =	
	 	 	 "Book title is : " + myBook.title + "<br>"
	 	 	 +"Book author is : " + myBook.author + "<br>"
	 	 	 +"Book price is : " + myBook.price + "<br>";
	 	 </script> 	 	 	
	 </body>
</html>

输出

Book title is : Perl
Book author is : Mohtashim
Book price is : 100

'with' 关键字

'with' 关键字用作引用对象的属性或方法的一种简写。

指定为 with 的参数的对象将成为后续块持续时间内的默认对象。可以在不命名对象的情况下使用对象的属性和方法。

语法

with object 的语法如下 -


with (object) {
	 	properties used without the object name and dot
}

例

请尝试以下示例。


<html>
<head>
	 <script>
	 	 // Define a function which will work as a method
	 	 function addPrice(amount) {
	 	 	 with(this) {
	 	 	 	 price = amount;
	 	 	 }
	 	 }
	 	 function Book(title, author) {
	 	 	 this.title = title;
	 	 	 this.author = author;
	 	 	 this.price = 0;
	 	 	 this.addPrice = addPrice; 	// Assign that method as property.
	 	 }
	 </script> 	 	 	
</head>
<body> 		
	 <div id = "output"></div>
	 <script>
	 	 var myBook = new Book("Perl", "Mohtashim");
	 	 myBook.addPrice(100);
	 	 	 	 	
	 	 document.getElementById("output").innerHTML =	
	 	 "Book title is : " + myBook.title + "<br>"
	 	 +"Book author is : " + myBook.author + "<br>"
	 	 +"Book price is : " + myBook.price + "<br>";
	 		
	 </script> 	 	 	
</body>
</html>

输出

Book title is : Perl
Book author is : Mohtashim
Book price is : 100

JavaScript 原生对象

JavaScript 有几个内置或原生对象。这些对象可以在程序中的任何位置访问，并且在任何操作系统中运行的任何浏览器中都以相同的方式工作。

以下是所有重要的 JavaScript Native Objects 的列表 -

JavaScript 对象方法

在这里，我们列出了 JavaScript 对象的方法。

静态方法

这些方法是使用 Object 类本身调用的。

方法	描述
assign()	将属性及其值从一个对象复制到另一个对象。
create()	使用现有对象作为原型创建新对象。
defineProperty()	克隆对象并向其原型添加新属性。
defineProperties()	将属性定义到特定对象中并获取更新的对象。
5	entries()	返回一个包含 [key， value] 对的数组。
freeze()	防止通过冻结对象来添加或更新对象属性。
fromEntries()	从 [key， value] 对的数组创建新对象。
getOwnPropertyDescriptor()	获取对象属性的属性描述符。
getOwnPropertyNames()	获取对象属性。
getOwnPropertySymbols()	获取对象中存在的数组形式的所有符号。
getPrototypeOf()	获取对象的原型。
hasOwn()	检查对象中是否存在特定属性。
Object.is()	检查两个对象是否包含相似的值。
isExtensible()	检查对象是否可扩展。
isFrozen()	检查对象是否已冻结。
isSealed()	检查对象是否密封。
keys()	以数组格式获取对象的所有键。
preventExtensions()	防止对象的原型更新。
seal()	密封对象。
setPrototypeOf()	设置对象的原型。
toLocaleString()	获取字符串格式的对象。
values()	以数组格式获取对象的所有值。

实例方法

这些方法是使用对象的实例调用的。

方法	描述
defineGetter()	定义 getter 以获取特定属性值。
hasOwnProperty()	检查对象是否具有特定属性作为其自己的属性。
isPrototypeOf()	检查特定对象是否作为另一个对象的原型存在。
propertyIsEnumerable()	检查对象的属性是否为可枚举的。

对象属性

属性	描述
constructor	获取对对象的 constructor 函数的引用。

打印本页

JavaScript - 对象概述