閱讀(9.5k) 書簽贊(0) 我要糾錯(cuò)

JavaScript 對(duì)象概述

2018-09-27 17:45 更新

對(duì)象概述

JavaScript 是一種面向?qū)ο缶幊陶Z言 ( OOP ) 。一種語言如果可以為開發(fā)者提供四種基本功能就可以被稱為面向?qū)ο?

封裝：把相關(guān)信息，無論數(shù)據(jù)或方法都存儲(chǔ)在一個(gè)對(duì)象中的能力。
聚合：將一個(gè)對(duì)象存儲(chǔ)在另一個(gè)對(duì)象中的能力。
繼承：一個(gè)類依賴另一個(gè)類（或一些類）中的一些性質(zhì)和方法的能力。
多態(tài)：寫一個(gè)函數(shù)或方法，這個(gè)函數(shù)或方法可以以各種不同形式工作的能力。

對(duì)象由屬性組成。如果一個(gè)屬性包含一個(gè)函數(shù)，它被認(rèn)為是這個(gè)對(duì)象的一個(gè)方法，否則這個(gè)屬性被認(rèn)為成一個(gè)屬性。

對(duì)象的屬性

對(duì)象屬性可以是任何三個(gè)基本數(shù)據(jù)類型，或抽象數(shù)據(jù)類型中的任何一個(gè)，如另一個(gè)對(duì)象。對(duì)象屬性通常是在對(duì)象的方法內(nèi)部使用的變量，也可以是在整個(gè)頁面中使用的全局變量。

將屬性添加到對(duì)象的語法是：

objectName.objectProperty = propertyValue；

示例

以下是一個(gè)簡單的例子，介紹了如何使用文檔對(duì)象的 “title” 屬性來獲得一個(gè)文檔標(biāo)題:

var str = document.title;

對(duì)象的方法

方法是函數(shù)讓對(duì)象做某事或讓某事作用在這個(gè)對(duì)象上。一個(gè)函數(shù)和一個(gè)方法之間，除了函數(shù)是聲明的一個(gè)獨(dú)立的單元，而方法是附加到某個(gè)對(duì)象上并且可以使用 this 關(guān)鍵字引用方法，除此之外幾乎沒有差別。

方法從將對(duì)象的內(nèi)容顯示到屏幕上到對(duì)一組本地屬性和參數(shù)執(zhí)行復(fù)雜的數(shù)學(xué)運(yùn)算都很有用。

示例

以下是一個(gè)簡單的例子，介紹了怎樣使用文檔對(duì)象的 write() 方法在文檔中寫任何內(nèi)容:

document.write("This is test");

用戶定義的對(duì)象

所有用戶定義的對(duì)象和對(duì)象中的內(nèi)置對(duì)象都是一個(gè)被稱為 Object 的對(duì)象的后代。

new 運(yùn)算符

new 運(yùn)算符用于創(chuàng)建對(duì)象的實(shí)例。若要?jiǎng)?chuàng)建一個(gè)對(duì)象，new 運(yùn)算符后緊接著是構(gòu)造函數(shù)方法。

在以下示例中，構(gòu)造函數(shù)方法是 Object() ， Array() ，和 Date() 。這些函數(shù)是內(nèi)置的 JavaScript 函數(shù)。

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

Object() 構(gòu)造函數(shù)

構(gòu)造函數(shù)是一個(gè)可以創(chuàng)建和初始化對(duì)象的函數(shù)。 JavaScript 提供了名為Object() 的一個(gè)特殊的構(gòu)造函數(shù)來生成對(duì)象。 Object() 構(gòu)造函數(shù)將返回值賦給一個(gè)變量。

示例 1

此示例演示如何創(chuàng)建一個(gè)對(duì)象：

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

示例 2

此示例演示了如何用用戶定義的函數(shù)來創(chuàng)建一個(gè)對(duì)象。這里的 this 關(guān)鍵字用于引用被傳遞給函數(shù)的對(duì)象。

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

為對(duì)象定義的方法

前面的示例演示了如何用構(gòu)造函數(shù)創(chuàng)建對(duì)象和分配屬性。但是我們需要通過給對(duì)象分配方法來完成一個(gè)對(duì)象的定義。

示例

這里是一個(gè)簡單的示例，說明了如何與一個(gè)對(duì)象一起添加一個(gè)函數(shù)。

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

with 關(guān)鍵字

with 關(guān)鍵字被用來作為用于引用一個(gè)對(duì)象的屬性或方法的一種速記。

對(duì)象被指定成 with 關(guān)鍵字的參數(shù)，進(jìn)而成為后面語句塊的默認(rèn)對(duì)象。這個(gè)對(duì)象的下的屬性和方法可以不指定對(duì)象名而直接使用。

語法

     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>

JavaScript Native 對(duì)象

JavaScript 有幾個(gè)內(nèi)置或 native 對(duì)象。這些對(duì)象可以在任何地方被訪問，并且在任何瀏覽器中運(yùn)行的任何操作系統(tǒng)的工作方式相同。

這里是所有重要的 JavaScript native 對(duì)象的列表：

以上內(nèi)容是否對(duì)您有幫助：

← JavaScript 對(duì)象

JavaScript 數(shù)字對(duì)象 →

寫筆記

我要補(bǔ)充