Javascript面向對象編程:構造函數的繼承

今天要介紹的是,對象之間的"繼承"的五種方法。

比如,現在有一個"動物"對象的構造函數。

  function Animal(){

    this.species = "動物";

  }

還有一個"貓"對象的構造函數。

  function Cat(name,color){

? ? ? this.name = name;

    this.color = color;

  }

怎樣才能使"貓"繼承"動物"呢?

一、 構造函數綁定

第一種方法也是最簡單的方法,使用call或apply方法,將父對象的構造函數綁定在子對象上,即在子對象構造函數中加一行:

  function Cat(name,color){

    Animal.apply(this, arguments);

    this.name = name;

    this.color = color;

  }

  var cat1 = new Cat("大毛","黃色");

  alert(cat1.species); // 動物

二、 prototype模式

第二種方法更常見,使用prototype屬性。

如果"貓"的prototype對象,指向一個Animal的實例,那么所有"貓"的實例,就能繼承Animal了。

  Cat.prototype = new Animal();

  Cat.prototype.constructor = Cat;

  var cat1 = new Cat("大毛","黃色");

  alert(cat1.species); // 動物

代碼的第一行,我們將Cat的prototype對象指向一個Animal的實例。

  Cat.prototype = new Animal();

它相當于完全刪除了prototype 對象原先的值,然后賦予一個新值。但是,第二行又是什么意思呢?

  Cat.prototype.constructor = Cat;

原來,任何一個prototype對象都有一個constructor屬性,指向它的構造函數。如果沒有"Cat.prototype = new Animal();"這一行,Cat.prototype.constructor是指向Cat的;加了這一行以后,Cat.prototype.constructor指向Animal。

  alert(Cat.prototype.constructor == Animal); //true

更重要的是,每一個實例也有一個constructor屬性,默認調用prototype對象的constructor屬性。

  alert(cat1.constructor == Cat.prototype.constructor); // true

因此,在運行"Cat.prototype = new Animal();"這一行之后,cat1.constructor也指向Animal!

  alert(cat1.constructor == Animal); // true

這顯然會導致繼承鏈的紊亂(cat1明明是用構造函數Cat生成的),因此我們必須手動糾正,將Cat.prototype對象的constructor值改為Cat。這就是第二行的意思。

這是很重要的一點,編程時務必要遵守。下文都遵循這一點,即如果替換了prototype對象,

  o.prototype = {};

那么,下一步必然是為新的prototype對象加上constructor屬性,并將這個屬性指回原來的構造函數。

  o.prototype.constructor = o;

三、 直接繼承prototype

第三種方法是對第二種方法的改進。由于Animal對象中,不變的屬性都可以直接寫入Animal.prototype。所以,我們也可以讓Cat()跳過 Animal(),直接繼承Animal.prototype。

現在,我們先將Animal對象改寫:

  function Animal(){ }

  Animal.prototype.species = "動物";

然后,將Cat的prototype對象,然后指向Animal的prototype對象,這樣就完成了繼承。

  Cat.prototype = Animal.prototype;

  Cat.prototype.constructor = Cat;

  var cat1 = new Cat("大毛","黃色");

  alert(cat1.species); // 動物

與前一種方法相比,這樣做的優點是效率比較高(不用執行和建立Animal的實例了),比較省內存。缺點是 Cat.prototype和Animal.prototype現在指向了同一個對象,那么任何對Cat.prototype的修改,都會反映到Animal.prototype。

所以,上面這一段代碼其實是有問題的。請看第二行

  Cat.prototype.constructor = Cat;

這一句實際上把Animal.prototype對象的constructor屬性也改掉了!

  alert(Animal.prototype.constructor); // Cat

四、 利用空對象作為中介

由于"直接繼承prototype"存在上述的缺點,所以就有第四種方法,利用一個空對象作為中介。

  var F = function(){};

  F.prototype = Animal.prototype;

  Cat.prototype = new F();

  Cat.prototype.constructor = Cat;

F是空對象,所以幾乎不占內存。這時,修改Cat的prototype對象,就不會影響到Animal的prototype對象。

  alert(Animal.prototype.constructor); // Animal

我們將上面的方法,封裝成一個函數,便于使用。

  function extend(Child, Parent) {

    var F = function(){};

    F.prototype = Parent.prototype;

    Child.prototype = new F();

    Child.prototype.constructor = Child;

    Child.uber = Parent.prototype;

  }

使用的時候,方法如下

  extend(Cat,Animal);

  var cat1 = new Cat("大毛","黃色");

  alert(cat1.species); // 動物

這個extend函數,就是YUI庫如何實現繼承的方法。

另外,說明一點,函數體最后一行

  Child.uber = Parent.prototype;

意思是為子對象設一個uber屬性,這個屬性直接指向父對象的prototype屬性。(uber是一個德語詞,意思是"向上"、"上一層"。)這等于在子對象上打開一條通道,可以直接調用父對象的方法。這一行放在這里,只是為了實現繼承的完備性,純屬備用性質。

五、 拷貝繼承

上面是采用prototype對象,實現繼承。我們也可以換一種思路,純粹采用"拷貝"方法實現繼承。簡單說,如果把父對象的所有屬性和方法,拷貝進子對象,不也能夠實現繼承嗎?這樣我們就有了第五種方法。

首先,還是把Animal的所有不變屬性,都放到它的prototype對象上。

  function Animal(){}

  Animal.prototype.species = "動物";

然后,再寫一個函數,實現屬性拷貝的目的。

  function extend2(Child, Parent) {

    var p = Parent.prototype;

    var c = Child.prototype;

    for (var i in p) {

      c[i] = p[i];

      }

    c.uber = p;

  }

這個函數的作用,就是將父對象的prototype對象中的屬性,一一拷貝給Child對象的prototype對象。

使用的時候,這樣寫:

  extend2(Cat, Animal);

  var cat1 = new Cat("大毛","黃色");

  alert(cat1.species); // 動物


本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247639.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247639.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247639.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

并發與多線程

并發 并發(concurrency)是指CPU在某個時間段內交替處理多任務的能力。每個CPU不可能只顧著執行某個進程,而讓其他進程一直等待被執行。所以,CPU把可執行時間均分成若干份,每個進程執行一份或多份時間后,記錄…

有沒有朋友可以幫我解釋一下貼水是什么意思?

通俗易懂的講:貼水便宜,升水貴 當前,螺紋鋼05合約就是貼水01合約 翻譯,螺紋鋼05合約就是比01合約便宜 升水同理 轉載于:https://www.cnblogs.com/luoluo-123/p/11142229.html

es6常用點記錄

letconst解構賦值字符串數組函數對象SymbolSetWeakSetMapWeakMapProxyreflectProxy與Reflex結合實例classpromiseiteratorGerneratorDecorators模塊學習資料 let /* let 聲明變量 *//* es6相對于es5的全局和局部作用域,多了一個塊作用域,塊作用域里聲明的…

jquery插件封裝指南

入門 編寫一個jQuery插件開始于給jQuery.fn加入??新的功能屬性,此處添加的對象屬性的名稱就是你插件的名稱: jQuery.fn.myPlugin function(){//你自己的插件代碼};用戶非常喜歡的$符號哪里去了? 它仍然存在,但是,為…

synchronize原理

synchronized的三種應用方式 一. 修飾實例方法,作用于當前實例加鎖,進入同步代碼前要獲得當前實例的鎖。 二. 修飾靜態方法,作用于當前類對象加鎖,進入同步代碼前要獲得當前類對象的鎖。 三. 修飾代碼塊,指定加鎖對象&…

不能修改“System Roots”鑰匙串

iOS mac添加證書 不能修改“System Roots”鑰匙串錯誤 如圖: 解決方式: 打開鑰匙串---登錄---,直接把證書拖過來 然后,查看--我的證書,里面,找到證書,即可

stylus在vue中的使用

stylus是一個css預處理器,比較流行的css預處理器有sass、less、stylus,它們都一樣,都是css的語法糖,可以使用變量,可以有簡單的邏輯,使css的開發效率更高,更易維護。stylus來自node社區&#xf…

未來產品的設計

Donald A. Norman繼《情感化設計》之后,又一設計精品力作: 未來產品的設計樣章試讀及本書預定:http://www.china-pub.com/195642市場價 :¥39.00 會員價 : ¥29.25(75折) 【作  者】(美)Donald…

vue-cli webpack 配置分析

目錄結構 . ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.c…

css之字體圖標

SVG與字體圖標 SVG圖片是矢量圖片,不會隨著圖片的伸縮而影響質量,通常把只有一種顏色的圖標做成SVG,通過SVG生成字體圖標,放到項目中使用。 https://icomoon.io/是一個比較快捷的生成字體圖標的線上工具,進入主頁后&…

history.back(-1)和history.go(-1)的區別

history.back(-1):直接返回當前頁的上一頁,數據全部消息,是個新頁面 history.go(-1):也是返回當前頁的上一頁,不過表單里的數據全部還在 history.back(0) 刷新 history.back(1) 前進 history.back(-1) 后退

研發階段模擬接口數據

因為在vue-cli工程中需要創建很多.vue文件,我們希望創建vue文件和創建html、css、js文件一樣右鍵即可選擇創建,并且創建的文件中可預先寫好模板代碼。 webstorm-Preferences打開選項界面 選擇File and Code Templates,點擊綠色加號 填…

真實項目中 ThreadLocal 的妙用

一、什么是 ThreadLocal ThreadLocal 提供了線程的局部變量,每個線程都可以通過 set() 和 get() 來對這個局部變量進行操作,但不會和其他線程的局部變量沖突,實現了線程間的據隔離。 簡單講:一個獲取用戶的請求線程 A,…

css之flex布局

flex布局是css3中的重要布局方式,稱為“彈性布局”,每次想到它主要是遇到元素垂直居中、元素寬高自適應的問題,這些問題在flex中都能過簡單設置就解決,它更像是原生APP中的布局操作,布局不必寫N多的盒模型代碼來實現&a…

javascript對URL中的參數進行簡單加密處理

javascript的api本來就支持Base64,因此我們可以很方便的來進行編碼和解碼。 var encodeData window.btoa("namexiaoming&age10")//編碼 var decodeData window.atob(encodeData)//解碼。 下面來個具體的例子來說明如何對url中參數進行轉碼&#xff…

Fibinary Numbers

http://acm.hust.edu.cn/vjudge/contest/view.action?cid30506#problem/V 題意:從右向左,每一個位數,分別表示一個fibonacci數,1表示有,0表示沒有;求兩個數的和,同樣按照這種形式存儲 #include…

移動web開發DRP問題

DPR dpr問題是移動端web開發上需要注意的問題,用大白話說就是,代碼中所設置的像素值實際上是虛擬像素,手機屏幕上的像素實際為物理像素,原始的手機,虛擬像素與物理像素是1:1覆蓋的,但隨著移動端屏幕的技術發…

HTML元素title里面如何換行

在調試代碼的時候我就遇到一個問題,HTML元素title里面通常只顯示一行,那我想要他換行,就是多行顯示,如何實現?JS代碼里面比如Alert里面又該如何換行? 經過我的一番實驗 要實現這種效果有幾種方法&#xff0…

A20 GPIO中斷類型差別結果迥異的問題思考

A20GPIO中斷類型差別結果迥異的問題思考 最近在使用全志A20做開發時,發現在處理中斷的時候,用電平觸發模式,報中斷比較亂,用邊沿觸發則很穩定,不會亂報。筆者感到比較困惑,筆者用電平觸發寫的code如下&…

div內圖片和文字水平垂直居中

大小不固定的圖片、多行文字的水平垂直居中 本文綜述 想必寫css的都知道如何讓單行文字在高度固定的容器內垂直居中,但是您知道或者想過讓行數不固定的文字在高度固定的容器內垂直居中呢?本文將會告訴你如何實現多行文字的垂直居中顯示。 關于圖片垂直居…