Javascript 简明教程

JavaScript - Objects Overview

JavaScript Objects

JavaScript object 是一种非原始数据类型，用于将数据存储为 key-value 对。键值对通常称为属性。键值对中的键，也称为“属性名称”，是一个字符串，值可以是任何东西。如果某个属性的值是一个函数，则该属性称为 method 。

使用花括号创建对象，每个属性用逗号分隔。每个属性都写为属性名称，后跟冒号 (:)，后跟属性值。键：值对不会按特定顺序存储在对象中。所以对象是一个无序的属性集合，写为键：值对。

JavaScript 是一种面向对象编程 (OOP) 语言。如果一种编程语言为开发者提供了四种基本能力，则可以称其为面向对象的。

  1. Encapsulation − 将相关信息，不管是数据还是方法，一起存储到一个对象中的功能。

  2. *抽象 * − 隐藏对象实现细节以避免用户了解的能力。

  3. Inheritance − 让一个类依赖于另一个类（或多个类）获得其一些属性和方法的功能。

  4. Polymorphism − 编写一个函数或方法，以各种不同的方式运行的功能。

让我们详细了解 JavaScript 对象。

Object Properties

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

向对象添加属性的语法为：

objectName.objectProperty = propertyValue;

For example − 以下代码使用 document 对象的 "title" 属性获取文档标题。

var str = document.title;

Object Methods

方法是让对象做某事或让某些事对对象执行的函数。函数与方法之间存在小差异 - 函数是一个独立的语句单元，而方法依附于对象，并且可以由 this 关键字引用。

这些方法对从显示对象内容到屏幕到对一组局部属性和参数执行复杂数学运算的所有内容都很有用。

For example - 以下是一个简单的示例，展示如何使用文档对象的 write() 方法写入文档中任何内容。

document.write("This is test");

Creating New Objects

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

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

在 JavaScript 中创建对象有不同的方法。在此，我们学习以下给定方法。

  1. Using the Object Literal

  2. Using the Object Constructor

  3. Using the Object.create() Method

  4. Using JavaScript ES6 Classes

The JavaScript Object Literal

在 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 =
      "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

The JavaScript new Operator

new 运算符用于创建对象的实例。要创建对象，new 运算符后面跟构造函数方法。

在以下示例中，构造方法为 Object()、Array() 和 Date()。这些构造函数是内置的 JavaScript 函数。

var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");

The JavaScript Object() Constructor

构造函数是创建并初始化对象的函数。JavaScript 提供了一个名为 Object() 的特殊构造函数来构建对象。Object() 构造函数的返回值分配给一个变量。

变量包含对新对象的引用。分配给对象的属性不是变量，也不使用 var 关键字定义。

尝试以下示例；它演示如何创建对象。

<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

The JavaScript Constructor Function

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

自定义用户定义构造函数比 Object() 构造函数的好处在于您可以根据您的要求向自定义函数添加参数。

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

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

ConstructorFunc() 函数充当对象模板。它使用 'this' 关键字来访问函数的上下文并在函数上下文中定义键。此外，键使用 'para' 值初始化。

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

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

<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

The JavaScript Object.create() Method

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

按照以下语法使用 Object.create() 方法定义新对象。

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

  1. {} − 它是一个空对象。Object.create() 方法创建它的副本。

  2. { key: { value: val }, } − 它是一个包含要添加到克隆对象的原型中的属性的对象。

在下面的示例中，我们向空对象的原型添加了多个属性。但是，如果您打印对象，您将无法看到任何属性，因为它们被添加到原型中。

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

<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

The JavaScript ES6 Classes

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

class MyClass{
  //class body
}

可以使用 new 运算符使用类创建对象 -

const myObj = new MyClass();

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

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

Defining Methods for an Object

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

Example

尝试以下示例；它显示如何将一个函数与一个对象一起添加。

<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>

Output

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

The 'with' Keyword

‘with’ 关键字用作引用对象属性或方法的一种速记。

作为 with 的参数指定的对象成为随后块的默认对象。可以在没有使用对象名称的情况下使用对象的属性和方法。

Syntax

with object 的语法如下 -

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

Example

尝试以下示例。

<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>

Output

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

JavaScript Native Objects

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

以下是所有重要的 JavaScript 本地对象列表 -

  1. JavaScript Number Object

  2. JavaScript Boolean Object

  3. JavaScript String Object

  4. JavaScript Array Object

  5. JavaScript Date Object

  6. JavaScript Math Object

  7. JavaScript RegExp Object

  8. JavaScript Symbol Object

  9. JavaScript Set Object

  10. JavaScript WeakSet Object

  11. JavaScript Map Object

  12. JavaScript WeakMap Object

  13. JavaScript Iterables Object

  14. JavaScript Reflect Object

  15. JavaScript TypedArray Object

JavaScript Object Methods

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

Static methods

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

Sr.No.

Method

Description

1

assign()

将属性及其值从一个对象复制到另一个对象。

2

create()

使用现有对象作为原型创建新对象。

3

defineProperty()

克隆对象以将与它相关的属性新添到其原型中。

4

defineProperties()

将属性定义到某个特定对象并获取更新后的对象。

5

entries()

它返回一个包含 [key, value] 对的数组。

6

freeze()

冻结对象以防止添加或更新对象属性。

7

fromEntries()

从 [key, value] 对的数组中创建新对象。

8

getOwnPropertyDescriptor()

获取对象特性的属性描述符。

9

getOwnPropertyNames()

To get object properties.

10

getOwnPropertySymbols()

获取对象中存在的 [key, value] 对的数组形式。

11

getPrototypeOf()

获取对象的原型。

12

hasOwn()

检查对象中是否存在特定属性。

13

Object.is()

检查两个对象是否包含类似的值。

14

isExtensible()

检查对象是否可扩展。

15

isFrozen()

检查对象是否已被冻结。

16

isSealed()

检查对象是否已被密封。

17

keys()

以数组格式获取对象的所有键。

18

preventExtensions()

阻止更新对象的原型。

19

seal()

To seal the object.

20

setPrototypeOf()

设置对象的原型。

21

toLocaleString()

以字符串格式获取对象。

22

values()

以数组格式获取对象的所有值。

Instance methods

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

Sr.No.

Method

Description

1

defineGetter()

定义 getter 以获取特定属性值。

2

hasOwnProperty()

检查对象是否具有特定属性作为其自己的属性。

3

isPrototypeOf()

检查特定对象是否是其他对象的原型。

4

propertyIsEnumerable()

检查对象的属性是否可枚举。

Object Properties

Sr.No.

Property

Description

1

constructor

获取对象的构造函数的引用。