JavaScript中的對象、函數和繼承

來源:互聯網
上載者:User
1、 Javascript中的對象

  JavaScript可以說是一個基於對象的程式設計語言,為什麼說是基於對象而不是物件導向,因為JavaScript自身只實現了封裝,而沒有實現繼承和多態。既然他是基於對象的,那麼我們就來說說js中的對象。有人說js中所有的都是對象,這句話不完全正確。正確的一方是他強調了對象在js中的重要性,對象在js中無處不在,包括可以構造對象的函數本身也是對象。但是另一方面,js中也有一些簡單的資料類型,包括數字、字串和布爾值、null值和undefined值,而這些不是對象。那為什麼這些類型的值不是對象呢,畢竟他們也有方法。那讓我們來看一下,JavaScript中對於對象的定義,有兩種定義。

  (1)JavaScript中的對象是可變的鍵控集合(keyed collections) (此定義來自老道的那本書的第三章)

  (2)JavaScript中的對象是無序(unordered)的屬性集合,這些屬性可以含有簡單的資料類型、對象、函數;儲存在一個對象屬性中的函數也被稱為這個對象的方法。 (來自ECMA-262 的4.3.3)(注:這裡所說的屬性是可以在js指令碼中建立和訪問的(我們稱之為顯性屬性),不包括系統為對象自動分配的內部屬性)

  那為什麼那個簡單的資料類型不是對象呢,主要是因為這些資料類型的值中擁有的方法是不可變的,而一個對象的屬性是應當可以被改變的。

  2、 對象中的原型鏈[[proto]]

  JavaScript中的每個對象建立的時候系統都會自動為其分配一個原型屬性[[proto]],用來串連到他的原型對象。在JavaScript中就是通過每個對象中的[[proto]]來實現對象的繼承關係的。但是對象的[[proto]]屬性在JavaScript是不能訪問和修改的,他是作為一個內部的屬性存在的,而且是在對象被建立的同時由系統自動設定的。

  當訪問一個對象的某一屬性,如果這個屬性在此對象中不存在,就在他的[[proto]]所指的原型對象的屬性中尋找,如果找到則返回,否則繼續沿著[[proto]]鏈一直找下去,直到[[proto]]的串連為null的時候停止。

  3、 函數也是對象

  JavaScript中的函數本身就是一個對象(所以我們經常稱之為函數對象),而且可以說他是js中最重要的對象。之所以稱之為最重要的對象,一方面他可以扮演像其他語言中的函數同樣的角色,可以被調用,可以被傳入參數;另一方面他還被作為對象的構造器(constructor)來使用,可以結合new操作符來建立對象。

  既然函數就是對象,所以必然含有對象擁有的全部性質,包括對象在建立時設定的原型鏈[[proto]]屬性。

  讓我們來看看函數對象和普通對象有什麼區別。我們前面說過,對象就是無序的屬性集合,那麼函數的屬性和普通對象的屬性有什麼不同呢。根據ECMA-262中的13.2節所述,在函數對象建立時,系統會預設為其建立兩個屬性[[call]]和[[constructor]],當函數對象被當做一個普通函數調用的時候(例如myFunc()),“()”操作符指明函數對象的[[call]]屬性就被執行,當他被當做一個構造器被調用的時候(例如new myConst()),他的[[constructor]]屬性就被執行,[[cosntructor]]的執行過程我們將在下一節中介紹。除此之外,當一個函數被建立時,系統會預設的再為其建立一個顯示內容prototype,並為其賦值為

  this.prototype = {constructor:this}

  具體內容可以參加老道的那本書的第五章。這個函數對象的prototype屬性也是為了js把函數當做構造器來實現繼承是準備的,但是這個屬性是可以在js指令碼中訪問和修改的。在這裡要強調的一點是,大家一定要區分對象中的[[proto]]屬性和函數對象中的prototype屬性,我在剛開始學習的時候就是因為沒有很好的區分這兩個東西,走了很多的彎路。

  4、 對象的建立

  在js中有兩種建立對象的方法,一種是通過字面量來實現,如

  var Person = {

  “first_name”:’liang’,

  ‘last_name’:’yang’

  }

  另一種方法是通過構造器來建立

  var my = new Person(‘liang’,’yang’);

  其實第一種方式的建立過程相當於調用Object構造器來實現,如下。

  var Person = new Object();

  Person.first_name = ‘liang’;

  Person.last_name = ‘yang’

  所以我們可以把js中所有對象的建立都合并到使用構造器來實現,下面我麼來詳細說明構造器建立對象的過程:

  第一步,先建立一個空的對象(既沒有任何屬性),並將這個對象的[[proto]]指向這個構造器函數的prototype屬性對象

  第二步,將這個空的對象作為this指標傳給構造器函數並執行

  第三步,如果上面的函數返回一個對象,則返回這個對象,否則返回第一步建立的對象

  第四步,把函數當做一個類來使用

  由上面的步驟我們可以看出,一般來說函數對象的prototype指向的是一個普通對象,而不是一個函數對象,這個普通對象中的屬在由此函數構造器建立的對象中也可以訪問。由此可以如此設計我們的代碼,假設一個函數就可以代表一個類,這個構造器函數產生的對象就是這個類的執行個體對象,那麼執行個體對象中應有的屬性和方法應該放在這個構造器函數的prototype中,這個類的靜態方法就可以直接放到這個函數作為對象的屬性中,最後這個函數體就是我們平時在物件導向語言中所說的建構函式(在這裡我們要區分連個詞“建構函式”和“構造器函數”,所謂建構函式是指普通的物件導向語言中的類的建構函式,而構造器函數是指javascript中的一個函數被當做構造器使用)。

  在第3節我們說過每個函數的prototype對象中總是含有一個constructor屬性,這個屬性就是串連到我們的這個函數本身。再加之,有這個函數產生的每個對象的[[proto]]屬性都是指向構造器函數的prototype對象,所以通過[[proto]]鏈,每個由構造器函數產生的對象,都有一個constructor屬性,指向產生他的構造器函數,因此我們可以通過這個屬性來判斷這個對象是有哪個構造器函數產生的。

  5、 函數繼承(類繼承)

  說了這麼多,終於到了我們可以在javascript中討論繼承的時候了,我們先來考慮一下要實作類別的繼承我們都要做些什麼,假設我們要從superClass繼承到子類subClass

  為了使得由subClass產生的對象中能夠訪問superClass產生的對象中的屬性,那麼可以使subClass.prototype為一個superClass建構函式產生的對象。

  subclass.prototye = new superClass();

  但是問題來了,根據我們在第4節說的new superClass()不僅複製了superClass.prototype中的所有方法,而且還運行了superClass()這個函數,這個函數起到的作用是類中的建構函式。我們知道應該在子類的建構函式中調用父類的建構函式來實現初始化。為此我們可以建立一個建構函式為空白的,但是原型和superClass原型一致的函數,並使subClass.prototype指向這個函數產生的對象。

  var F = function() {};

  F.prototype = superClass.prototype;

  subClass.protptype = new F();

  這樣我們就可以再不調用建構函式的同時完成屬性複製的工作。但是還有一個問題,那就是我們修改了subClass的prototype屬性,從而也就刪除了其中的constructor屬性,這樣我們就無法知道他是哪個構造器函數產生的對象了。我們可以再次給他賦值

  subClass.prototype.constructor = subClass;

  這樣複製屬性的問題就迎刃而解了。但是新的問題又出現了,在subClass中我們無法知道他的父類是哪個構造器函數,所以就無法在建構函式中調用父類的建構函式,為此我們可以為subClass添加一個屬性,指明他的父類

  subClass.superClass = superClass.prototype;

  這樣我麼就可以在子類的建構函式中使用subClass.superClass.constructor來訪問父類的建構函式了。最後我們把以上的思路寫成一個函數

  myPro.extend = function (subClass,superClass) {

  var F = function() {};

  F.prototype = superClass.prototype;

  subClass.protptype = new F();

  subClass.prototype.constructor = subClass;

  subClass.superClass = superClass.prototype;

  superClass.prototype.constructor = superClass;

  }

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.