設(shè)為首頁 | 加為收藏 | 聯(lián)系我們 咨詢熱線:0632-5272123
電 話:0632-5272123
傳 真:0632-5271123
地 址: 棗莊市文化西路23號
E-mail:zzint@zzint.com
  • 技術(shù)咨詢:
  • 業(yè)務(wù)咨詢:
  • 客戶服務(wù):
  • 服務(wù)監(jiān)督:
詳細(xì)資料 您當(dāng)前的位置:網(wǎng)站首頁新聞動態(tài)詳細(xì)資料

Javascript面向?qū)ο缶幊蹋ㄈ悍菢?gòu)造函數(shù)的繼承

一、什么是"非構(gòu)造函數(shù)"的繼承?

比如,現(xiàn)在有一個(gè)對象,叫做"中國人"。

  var Chinese = {
nation:'中國'
};

還有一個(gè)對象,叫做"醫(yī)生"。

  var Doctor ={
career:'醫(yī)生'
}

請問怎樣才能讓"醫(yī)生"去繼承"中國人",也就是說,我怎樣才能生成一個(gè)"中國醫(yī)生"的對象?

這里要注意,這兩個(gè)對象都是普通對象,不是構(gòu)造函數(shù),無法使用構(gòu)造函數(shù)方法實(shí)現(xiàn)"繼承"。

二、object()方法

json格式的發(fā)明人Douglas Crockford,提出了一個(gè)object()函數(shù),可以做到這一點(diǎn)。

  function object(o) {

    function F() {}

    F.prototype = o;

    return new F();

  }

這個(gè)object()函數(shù),其實(shí)只做一件事,就是把子對象的prototype屬性,指向父對象,從而使得子對象與父對象連在一起。

使用的時(shí)候,第一步先在父對象的基礎(chǔ)上,生成子對象:

  var Doctor = object(Chinese);

然后,再加上子對象本身的屬性:

  Doctor.career = '醫(yī)生';

這時(shí),子對象已經(jīng)繼承了父對象的屬性了。

  alert(Doctor.nation); //中國

三、淺拷貝

除了使用"prototype鏈"以外,還有另一種思路:把父對象的屬性,全部拷貝給子對象,也能實(shí)現(xiàn)繼承。

下面這個(gè)函數(shù),就是在做拷貝:

  function extendCopy(p) {

    var c = {};

    for (var i in p) {
c[i] = p[i];
}

    c.uber = p;

    return c;
}

使用的時(shí)候,這樣寫:

  var Doctor = extendCopy(Chinese);

  Doctor.career = '醫(yī)生';

  alert(Doctor.nation); // 中國

但是,這樣的拷貝有一個(gè)問題。那就是,如果父對象的屬性等于數(shù)組或另一個(gè)對象,那么實(shí)際上,子對象獲得的只是一個(gè)內(nèi)存地址,而不是真正拷貝,因此存在父對象被篡改的可能。

請看,現(xiàn)在給Chinese添加一個(gè)"出生地"屬性,它的值是一個(gè)數(shù)組。

  Chinese.birthPlaces = ['北京','上海','香港'];

通過extendCopy()函數(shù),Doctor繼承了Chinese。

  var Doctor = extendCopy(Chinese);

然后,我們?yōu)镈octor的"出生地"添加一個(gè)城市:

  Doctor.birthPlaces.push('廈門');

發(fā)生了什么事?Chinese的"出生地"也被改掉了!

  alert(Doctor.birthPlaces); //北京, 上海, 香港, 廈門

  alert(Chinese.birthPlaces); //北京, 上海, 香港, 廈門

所以,extendCopy()只是拷貝基本類型的數(shù)據(jù),我們把這種拷貝叫做"淺拷貝"。這是早期jQuery實(shí)現(xiàn)繼承的方式。

四、深拷貝

所謂"深拷貝",就是能夠?qū)崿F(xiàn)真正意義上的數(shù)組和對象的拷貝。它的實(shí)現(xiàn)并不難,只要遞歸調(diào)用"淺拷貝"就行了。

  function deepCopy(p, c) {

    var c = c || {};

    for (var i in p) {

      if (typeof p[i] === 'object') {

        c[i] = (p[i].constructor === Array) ? [] : {};

        deepCopy(p[i], c[i]);

      } else {

         c[i] = p[i];

      }
}

    return c;
}

使用的時(shí)候這樣寫:

  var Doctor = deepCopy(Chinese);

現(xiàn)在,給父對象加一個(gè)屬性,值為數(shù)組。然后,在子對象上修改這個(gè)屬性:

  Chinese.birthPlaces = ['北京','上海','香港'];

  Doctor.birthPlaces.push('廈門');

這時(shí),父對象就不會受到影響了。

  alert(Doctor.birthPlaces); //北京, 上海, 香港, 廈門

  alert(Chinese.birthPlaces); //北京, 上海, 香港

目前,jQuery庫使用的就是這種繼承方法。



上篇文章:取巧的邊框等高
下篇文章:棗莊市春風(fēng)揚(yáng)塵PM10指數(shù)升高
版權(quán)所有 棗莊市英特信息網(wǎng)絡(luò)有限公司 ◎2017
聯(lián)系電話:0632-5271123 5272123  總部地址:棗莊市市中區(qū)文化西路23號
魯ICP備09021689號 增值電信業(yè)務(wù)經(jīng)營許可證編號:魯 B2-20080087號