快捷導(dǎo)航

深入理解JavaScript中的對(duì)象

更新時(shí)間：2015年06月04日 11:34:09 投稿：goldensun

這篇文章主要介紹了深入理解JavaScript中的對(duì)象,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下

JavaScript是一種面向?qū)ο缶幊?OOP)語(yǔ)言。一種編程語(yǔ)言可以被稱為面向?qū)ο蟮?，它為開(kāi)發(fā)者提供了四種基本功能：

封裝 - 存儲(chǔ)相關(guān)的信息，無(wú)論是數(shù)據(jù)或方法，還是對(duì)象
聚合 - 存儲(chǔ)一個(gè)對(duì)象到另一個(gè)對(duì)象的內(nèi)部
繼承 - 類的能力依賴于另一個(gè)類(或類數(shù))，用于其部分的屬性和方法
多態(tài)性 - 編寫函數(shù)或者方法，在各種不同的方式工作

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

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

用于添加屬性的目的語(yǔ)法是：

objectName.objectProperty = propertyValue;

示例 :

下面是一個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明如何利用“稱號(hào)”的文件對(duì)象的屬性來(lái)獲取文檔標(biāo)題：

var str = document.title;

對(duì)象的方法：

方法是讓對(duì)象做某件事。一個(gè)函數(shù)和一個(gè)方法，所不同的是一個(gè) function語(yǔ)句的一個(gè)獨(dú)立的單元和方法被附加到對(duì)象，并可以通過(guò)這個(gè)關(guān)鍵字被引用之間的差別不大。

方法可用于一切從顯示對(duì)象的屏幕上的內(nèi)容，以對(duì)一組本地的屬性和參數(shù)執(zhí)行復(fù)雜的數(shù)學(xué)運(yùn)算是有用的。
例子：

下面是一個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明如何使用write()文檔對(duì)象的方法寫在文檔中的任何內(nèi)容：

document.write("This is test");

用戶定義的對(duì)象：

所有用戶定義的對(duì)象和內(nèi)置對(duì)象被稱為對(duì)象的對(duì)象的后代。
new 操作符:

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

在下面的例子中，構(gòu)造方法Object(), Array(), 和 Date().。這些構(gòu)造函數(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ù)是用來(lái)創(chuàng)建和初始化對(duì)象的函數(shù)。 JavaScript提供了一個(gè)特殊的構(gòu)造函數(shù)調(diào)用Object()來(lái)構(gòu)建的對(duì)象。Object()構(gòu)造的返回值被分配給一個(gè)變量。

變量包含一個(gè)引用到新的對(duì)象。分配給該對(duì)象的屬性是不變量，并且不使用var關(guān)鍵字來(lái)定義。
示例 1:

這個(gè)例子演示了如何創(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:

這個(gè)例子演示如何創(chuàng)建一個(gè)對(duì)象，一個(gè)用戶定義的函數(shù)。此處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ì)象并分配屬性。但是，我們需要通過(guò)分配方法，以它來(lái)完成一個(gè)對(duì)象的定義。
例子：

下面是一個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明如何與一個(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)鍵字作為一種速記的引用對(duì)象的屬性或方法。

指定為參數(shù)的對(duì)象就成為接下來(lái)的塊的持續(xù)時(shí)間的默認(rèn)對(duì)象。為對(duì)象的屬性和方法可以在不命名的對(duì)象。
語(yǔ)法

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>

您可能感興趣的文章: