JavaScript - 对象概述

JavaScript 对象

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

对象使用花括号创建，每个属性用逗号分隔。每个属性的写法为:属性名称后跟冒号 (:)，再跟属性值。键值对在对象中并非按特定顺序存储。因此，对象是属性的无序集合，以键值对的形式表示。

JavaScript 是一种面向对象编程 (OOP) 语言。如果一种编程语言能够为开发人员提供四种基本功能，那么它就可以被称为面向对象的。

• 封装 − 将相关信息(无论是数据还是方法)存储在一个对象中的能力。

• 抽象 − 向用户隐藏对象实现细节的能力。

• 继承 − 一个类能够依赖另一个类(或多个类)来实现其某些属性和方法的能力。

• 多态 − 能够编写一个函数或方法以多种不同方式工作的能力。

让我们详细了解一下 JavaScript 对象。

对象属性

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

向对象添加属性的语法为:-

objectName.objectProperty = propertyValue;

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

var str = document.title;

对象方法

方法是允许对象执行某些操作或允许对其执行某些操作的函数。函数和方法之间有细微的差别:函数是独立的语句单元，而方法附加到对象上，可以通过 this 关键字引用。

方法的用途非常广泛，从将对象的内容显示到屏幕，到对一组本地属性和参数执行复杂的数学运算。

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

document.write("This is test");

创建新对象

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

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

在 JavaScript 中创建对象有多种方法。我们将学习以下所有方法。

• 使用对象字面量

• 使用对象构造函数

• 使用 Object.create() 方法

• 使用 JavaScript ES6 类

JavaScript 对象字面量

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

您可以按照以下语法使用对象字面量来定义对象。

const obj = {
    key: val,
}

您可以在花括号之间添加键值对。每个键值对以逗号分隔，并且需要在键和值之间添加冒号 (:)。

示例

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

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

<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 运算符后面必须跟构造函数方法。

以下示例中，构造函数方法分别为 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 关键字定义。

示例

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

<html>
<body>  
   <p id = "output"> </p>
   <script>
      var book = new Object();   // 创建对象
      book.subject = "Perl";     // 为对象分配属性
      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() 构造函数相比，自定义用户定义构造函数的优势在于，您可以根据需要向自定义函数添加参数。

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

// 对象模板
function ConstructorFunc(para) {
    this.para = para;
}
const obj = new ConstructorFunc(arg);

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

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

示例

此示例演示如何使用用户定义的构造函数函数创建对象。此处，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

JavaScript Object.create() 方法

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

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

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

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

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

JavaScript ES6 类

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

class MyClass{
    //类主体
}

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

const myObj = new MyClass();

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

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

定义对象的方法

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

示例

尝试以下示例;它展示了如何在对象中添加函数。

<html>   
  <head>
    <title>User-defined objects</title>
    <script>
      // 定义一个将作为方法工作的函数
      function addPrice(amount) {
        this.price = amount; 
      }

      function Book(title, author) {
        this.title = title;
        this.author  = author;
        this.addPrice = addPrice;  // 将该方法指定为属性。
      }
    </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 (object) {
    不使用对象名称和句点的属性
}

<html>
<head>
  <script>
    // 定义一个将作为方法工作的函数
    function addPrice(amount) {
      with(this) {
        price = amount;
      }
    }
    function Book(title, author) {
      this.title = title;
      this.author = author;
      this.price = 0;
      this.addPrice = addPrice;  // 将该方法指定为属性。
    }
  </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