JavaScript - 对象概述

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

封装- 将相关信息（无论是数据还是方法）一起存储在对象中的能力。
聚合- 将一个对象存储在另一个对象中的能力。
继承- 一个类依赖另一个类（或多个类）来获取其某些属性和方法的能力。
多态性——编写一个以多种不同方式工作的函数或方法的能力。

对象由属性组成。如果属性包含函数，则将其视为对象的方法，否则该属性将视为属性。

对象属性

对象属性可以是三种原始数据类型中的任何一种，也可以是任何抽象数据类型，例如另一个对象。对象属性通常是在对象方法内部使用的变量，但也可以是在整个页面中使用的全局可见变量。

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

objectName.objectProperty = propertyValue;

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

var str = document.title;

对象方法

方法是让对象执行某些操作或对其执行某些操作的函数。函数和方法之间有一个小小的区别 - 函数是独立的语句单元，而方法附加到对象并可以通过 this 关键字引用。

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

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

document.write("This is test");

用户定义的对象

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

新的运营商

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

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

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

Object() 构造函数

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

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

实施例1

尝试下面的例子；它演示了如何创建对象。

现场演示

<html>
   <head>
      <title>User-defined objects</title>     
      <script type = "text/javascript">
         var book = new Object();   // Create the object
         book.subject = "Perl";     // Assign properties to the object
         book.author  = "Mohtashim";
      </script>      
   </head>
   
   <body>  
      <script type = "text/javascript">
         document.write("Book name is : " + book.subject + "<br>");
         document.write("Book author is : " + book.author + "<br>");
      </script>   
   </body>
</html>

输出

Book name is : Perl 
Book author is : Mohtashim

实施例2

此示例演示如何使用用户定义函数创建对象。这里，this关键字用于引用已传递给函数的对象。

现场演示

<html>
   <head>   
   <title>User-defined objects</title>
      <script type = "text/javascript">
         function book(title, author) {
            this.title = title; 
            this.author  = author;
         }
      </script>      
   </head>
   
   <body>   
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
      </script>      
   </body>
</html>

输出

Book title is : Perl 
Book author is : Mohtashim

为对象定义方法

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

例子

尝试下面的例子；它展示了如何添加函数和对象。

现场演示

<html>
   
   <head>
   <title>User-defined objects</title>
      <script type = "text/javascript">
         // 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>   
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         myBook.addPrice(100);
         
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("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>
   <title>User-defined objects</title>   
      <script type = "text/javascript">
         // 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>   
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         myBook.addPrice(100);
         
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>      
   </body>
</html>

输出

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

JavaScript 原生对象

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

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