淺談原型式繼承、借助構造函數、組合方式繼承

wangjuntytl 發布于2019-08-26 12:16 / 1330人閱讀

摘要：想要解決這樣的問題的話，可以借助構造函數也可以叫做偽造對象或經典繼承。這種方式實現非常簡單，就是在子對象的構造函數中調用父對象的構造函數。

原型式繼承

原型式繼承，就是一定一個函數，該函數中創建一個臨時性的構造函數，將作為參數，傳入的對象作為這個構造函數的原型，最后返回這個構造函數的實例對象

/*定義函數：用于實現對象之間的繼承
    參數：
    obj：表示繼承關系中的父級對象
    prop：對象格式，表示繼承關系中的子級對象的屬性和方法
*/
function fn(obj,porp){
    //定義一個臨時的構造函數
    function Fun(){
       //遍歷對象的屬性和方法
       for(var attrName in porp){
           this[attrName]=porp[attrName];
       }
    }
    //將函數的參數作為構造函數的原型
    Fun.prototype=obj;
    //將構造函數創建的對象進行返回
    return new Fun();
}
var obj={
    name:"前端"
}
//調用函數
var result=fn(obj,{
    age:20,
    sayMe:function(){
        console.log("this is function");
    }
});
console.log(result.age);
result.sayMe();

利用Object.create()方法實現繼承

var obj={
    name:"前端"
}
var newObj=object.create(obj,{
    age:{
        value:20
    },
    sayMe:{
        value:function(){
            console.log("this is function");
        }
    }
});
console.log(newObj.age);
newObj.sayMe();

借助構造函數

無論是原型鏈還是原型式繼承，都具有相同的問題。想要解決這樣的問題的話，可以借助構造函數(也可以叫做偽造對象或經典繼承)。
這種方式實現非常簡單，就是在子對象的構造函數中調用父對象的構造函數。具體可以通過調用apply()和call()方法實現。
apply()和call()方法都允許傳遞指定某個對象的this。對于繼承來講，可以實現在子對象的構造函數中調用父對象的構造函數時，將子對象的this和父對象的this綁定在一起

//定義父級對象的構造函數
function Parent(){
    this.parent="parent";
}

//定義子級對象的構造函數
function child(){
    //調用父級對象的構造函數：使用apply()或call()方法
    Parent.call(this);
    
    this.child="child";
}
//創建子級對象
var child=new Child();
console.log(child);

組合方式繼承

組合繼承，也叫做偽經典繼承，指的是將原型鏈或原型式繼承和借助構造函數的技術組合在一起，發揮二者長處的一種繼承方式
具體實現的思路就是：

使用原型鏈或原型式繼承實現對原型的屬性和方法的繼承。

通過借助構造函數實現對實例對象的屬性的繼承

這樣，既通過在原型上定義方法實現了函數的重用，又可以保證每個對象都有自己的專有屬性

function Parent(){
    //構造函數的自有屬性
    this.name="前端";
}
//構造函數的原型屬性
Parent.prototype.age=20;

function Child(){
    //繼承父級構造函數中的自有屬性
    Parent.call(this);
    
    this.job="IT";
}
//繼承父級構造函數中的原型屬性
Child.prototype=Parent.prototype;

var child=new Child();

console.log(child.job);
console.log(child.age);
console.log(child.name);

GPU云服務器云服務器繼承構造函數構造函數繼承原型繼承原型鏈繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108365.html

淺談JavaScript繼承

摘要：組合方式實現繼承原型鏈構造函數喵喵喵汪汪汪與的唯一區別是多了這一句組合方式實現了對構造函數內和原型上所有屬性和方法的繼承，并且的實例對象之間也不會相互干擾。前言關于JavaScript繼承相關的定義和方法網上已經有很多解釋啦，本菜鳥就不抄抄寫寫惹人嫌了，本文主要探討三種基本的繼承方式并且給出優化方案。正文借助構造函數實現繼承 function Parent1() { ...

Jingbin_ 2019-08-21 16:55 評論0 收藏0
淺談JavaScript的面向對象和它的封裝、繼承、多態

摘要：會造成內存浪費的問題構造函數繼承聲明父類聲明子類生成實例組合式繼承組合式繼承是汲取了兩者的優點，既避免了內存浪費，又使得每個實例化的子類互不影響。寫在前面既然是淺談，就不會從原理上深度分析，只是幫助我們更好地理解... 面向對象與面向過程面向對象和面向過程是兩種不同的編程思想，剛開始接觸編程的時候，我們大都是從面向過程起步的，畢竟像我一樣，大家接觸的第一門計算機語言大概率都是C語...

MAX_zuo 2019-08-23 14:00 評論0 收藏0
JavaScript繼承方式詳解

摘要：可以通過構造函數和原型的方式模擬實現類的功能。原型式繼承與類式繼承類式繼承是在子類型構造函數的內部調用超類型的構造函數。寄生式繼承這種繼承方式是把原型式工廠模式結合起來，目的是為了封裝創建的過程。 js繼承的概念 js里常用的如下兩種繼承方式：原型鏈繼承（對象間的繼承）類式繼承（構造函數間的繼承）由于js不像java那樣是真正面向對象的語言，js是基于對象的，它沒有類的概念。...

Yangyang 2019-08-21 10:23 評論0 收藏0
javascript-繼承

摘要：化偽花貓偽，花，貓借助構造函數無論是原型鏈還是原型式繼承，都有相同的問題。要解決這樣的問題，可以借助構造函數也可以叫做偽造對象或經典繼承。對于繼承來講，可以試想子對象的構造函數中調用父對象的構造函數時，講子對象的和父對象的綁定在一起。繼承原型式繼承所謂原型式繼承，就是定義一個函數，該函數中創建一個臨時性的構造函數，并將作為參數傳入的對象作為這個構造函數的原型，最后返回這個構造函數...

kohoh_ 2019-08-26 12:16 評論0 收藏0
淺談JavaScript面向對象

摘要：不必在構造函數中定義對象實例的信息。其次，按照一切事物皆對象的這餓極本的面向對象的法則來說，類本身并不是一個對象，然而原型方式的構造函數和原型本身也是個對象。第二個問題就是在創建子類型的實例時，不能向超類型的構造函數中傳遞參數。前言對象(Object)應該算是js中最為重要的部分，也是js中非常難懂晦澀的一部分。更是面試以及框架設計中各出沒。寫這篇文章，主要參考與JavaScrip...

cyixlq 2019-08-21 17:15 評論0 收藏0