JavaScript - 对象概述

上一页
下一页

JavaScript 对象

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

对象使用花括号创建，每个属性之间用逗号分隔。每个属性都写成属性名后跟冒号 (:) 后跟属性值。键值对在对象中不是按特定顺序存储的。因此，对象是属性的无序集合，写成键值对。

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

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

  • 抽象 - 将对象实现细节隐藏起来的能力。

  • 继承 - 一个类依赖于另一个类（或多个类）的一些属性和方法的能力。

  • 多态 - 编写一个可以在各种不同方式下工作的函数或方法的能力。

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

对象属性

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

向对象添加属性的语法如下：

objectName.objectProperty = propertyValue;

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

var str = document.title;

对象方法

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

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

例如 - 以下是一个简单的示例，演示如何使用document对象的write()方法在文档上写入任何内容。

document.write("This is test");

创建新对象

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

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

在 JavaScript 中创建对象有不同的方法。在这里，我们将学习以下所有方法。

  • 使用对象字面量

  • 使用对象构造函数

  • 使用 Object.create() 方法

  • 使用 JavaScript ES6 类

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 =
      "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();   // 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' 关键字的函数作为构造函数来定义对象并将所需的参数传递给构造函数。

示例

此示例演示了如何使用用户定义的构造函数创建对象。这里 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{
  //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 对象的语法如下 -

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 原生对象的列表 -

JavaScript 对象方法

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

静态方法

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

序号 方法 描述
1 assign() 将属性及其值从一个对象复制到另一个对象。
2 create() 使用现有对象作为原型创建新对象。
3 defineProperty() 克隆对象并向其原型添加新属性。
4 defineProperties() 将属性定义到特定对象中并获取更新后的对象。
5 entries() 它返回一个包含 [键，值] 对的数组。
6 freeze() 通过冻结对象来防止添加或更新对象属性。
7 fromEntries() 根据 [键，值] 对的数组创建新对象。
8 getOwnPropertyDescriptor() 获取对象属性的属性描述符。
9 getOwnPropertyNames() 获取对象属性。
10 getOwnPropertySymbols() 获取对象中以数组形式存在的全部符号。
11 getPrototypeOf() 获取对象的原型。
12 hasOwn() 检查特定属性是否存在于对象中。
13 Object.is() 检查两个对象是否包含类似的值。
14 isExtensible() 检查对象是否可扩展。
15 isFrozen() 检查对象是否已冻结。
16 isSealed() 检查对象是否已密封。
17 keys() 以数组格式获取对象的所有键。
18 preventExtensions() 防止对象原型的更新。
19 seal() 密封对象。
20 setPrototypeOf() 设置对象的原型。
21 toLocaleString() 以字符串格式获取对象。
22 values() 以数组格式获取对象的所有值。

实例方法

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

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

对象属性

序号 属性 描述
1 constructor 获取对对象构造函数的引用。
打印页面
上一页
下一页
广告