JavaScript物件


JavaScript是一種物件導向程式設計(OOP)語言。一種程式設計語言可以被稱為物件導向的,它為開發者提供了四種基本功能:

  • 封裝 - 儲存相關的資訊,無論是資料或方法,還是物件

  • 聚合 -  儲存一個物件到另一個物件的內部

  • 繼承 - 類的能力依賴於另一個類(或類數),用於其部分的屬性和方法

  • 多型性 - 編寫函式或者方法,在各種不同的方式工作

物件是由屬性。如果屬性包含一個函式,它被認為是一個物件的方法,否則,該屬性被認為是一個屬性。

物件屬性:

物件的屬性可以是任何三種基本資料型別的,或者任何抽象資料型別,如另一個物件。物件屬性通常是內部使用的物件的方法的變數,但也可以是用於整個頁面全域性可見的變數。

用於新增屬性的目的語法是:

objectName.objectProperty = propertyValue;

範例 :

下面是一個簡單的例子來說明如何利用“稱號”的檔案物件的屬性來獲取文件標題:

var str = document.title;


物件的方法:

方法是讓物件做某件事。一個函式和一個方法,所不同的是一個 function語句的一個獨立的單元和方法被附加到物件,並可以通過這個關鍵字被參照之間的差別不大。

方法可用於一切從顯示物件的螢幕上的內容,以對一組原生的屬性和引數執行複雜的數學運算是有用的。

例子:

下面是一個簡單的例子來說明如何使用write()文件物件的方法寫在文件中的任何內容:

document.write("This is test");


使用者定義的物件:

所有使用者定義的物件和內建物件被稱為物件的物件的後代。

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關鍵字來定義。

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

 

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

 

定義方法的物件:

前面的範例演示了如何建構函式建立物件並分配屬性。但是,我們需要通過分配方法,以它來完成一個物件的定義。

例子:

下面是一個簡單的例子來說明如何與一個物件新增一個函式:

<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 關鍵字:

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>

 

JavaScript原生物件:

JavaScript有幾個內建的或本地物件。這些物件是在你的程式存取的任何地方,將以同樣的方式工作在任何作業系統上執行的任何瀏覽器。

這裡是所有重要的JavaScript本地物件的列表: