教程 > Javascript 教程 > Javascript 对象 阅读：89

Javascript 对象

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

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

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...

此外，JavaScript 允许自定义对象。

对象属性

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

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

objectName.objectProperty = propertyValue;

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

var str = document.title;

对象方法

方法是让对象做某事或让对象对它做某事的函数。函数和方法之间有一个小区别——函数是一个独立的语句单元；方法是附加到对象上的，可以通过this关键字引用。

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

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

document.write("This is test");

用户定义的对象

在 JavaScript 中，几乎所有的对象都是 Object 类型的实例，它们都会从 Object.prototype 继承属性和方法。

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");

Object() 构造函数

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

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

下面的例子演示了如何创建对象。

<html>
   <head>
      <title>User-defined objects</title>     
      <script type = "text/javascript">
         var book = new Object();   // 创建对象
         book.subject = "Perl";     // 给对象分配属性
         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

下面这个示例演示如何使用用户定义函数创建对象。这里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 (object) {
  // 可以直接引用object的属性和方法，不用在前面加上 object.
}

指定为 with 参数的object在接下来的代码块中成为默认对象。可以在不写对象名的情况下使用对象的属性和方法。

看一下下面的示例

<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 有几个内置对象。这些对象可以在您的程序中的任何位置访问，并且在运行于任何操作系统的任何浏览器中的工作方式相同。

查看笔记

扫码一下
查看教程更方便