JS中繼承的那些方法

所謂繼承?

繼承就是子類繼承父類的屬性和方法,目的可以讓子類的實(shí)例能夠使用父類的屬性和方法
類指的就是構(gòu)造函數(shù)

1.原型鏈繼承

基本思想:借助原型可以基于已有的對(duì)象創(chuàng)建新對(duì)象,同時(shí)還不必因此創(chuàng)建自定義類型;讓一個(gè)引用類型繼承另一個(gè)引用類型的屬性和方法。

//創(chuàng)建父類和原型方法
function Cat(uname){
    this.uname =uname;
}
Cat.prototype.run=function(){
    console.log('跑跑跑!')
}

// 子類
function Sanhua(age){
    this.age =age;
}
//實(shí)現(xiàn)繼承,把父類實(shí)例放到子類原型上
Sanhua.prototype = new Cat('三花')
// 原型鏈
// Sanhua.prototype.constructor = Sanhua 
Sanhua.prototype.run=function(){
    console.log('我是三花!')
}
//創(chuàng)建實(shí)例
let sanhua = new Sanhua('1')
console.log(b)
2.call繼承(借用構(gòu)造函數(shù)繼承)

基本思想:在子類構(gòu)造函數(shù)中把父類構(gòu)造函數(shù)當(dāng)作普通函數(shù)執(zhí)行,并且通過(guò)call方法把父類構(gòu)造函數(shù)中的this替換成子類的實(shí)例(this),這樣相當(dāng)于給子類實(shí)例上設(shè)置了私有的屬性和方法。

//創(chuàng)建父類
function Cat(uname) {
    this.uname = uname;
    this.run = function(){
                console.log('跑跑跑')
            }
}

// 子類
function Sanhua(age,uname) {
    this.age = age;
    Cat.call(this,uname)
}
//創(chuàng)建實(shí)例
let sanhua = new Sanhua('1','三花')
console.log(sanhua)
3.組合繼承

基本思想:用使用原型鏈的方式來(lái)實(shí)現(xiàn)對(duì)原型屬性和方法的繼承,而通過(guò)借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。

        //創(chuàng)建父類
        function Cat(uname) {
            this.uname = uname;
            this.run = function () {
                console.log('跑跑跑')
            }
        }
        Cat.prototype.wait = function () {
            console.log('等待!')
        }
        // 子類
        function Sanhua(age, uname) {
            this.age = age;
            Cat.call(this, uname)//對(duì)象冒充 只能繼承構(gòu)造函數(shù)的屬性和方法
        }
        Sanhua.prototype = new Cat() //原型鏈
        //創(chuàng)建實(shí)例
        let sanhua = new Sanhua('1', '三花')
        console.log(sanhua)
        sanhua.wait()
4.原型式繼承

基本思想:是借助原型可以基于已有的對(duì)象創(chuàng)建新對(duì)象,同時(shí)還不必因此創(chuàng)建自定義類型。

function obj(o){   //傳遞一個(gè)字面量函數(shù)
            function F(){}  //創(chuàng)建一個(gè)構(gòu)造函數(shù)
            F.prototype = o;  //把字面量函數(shù)賦值給構(gòu)造函數(shù)的原型
            return new F()  //最后返回出實(shí)例化的構(gòu)造函數(shù)
        }

        let box = {
            name:'小明',
            age:20,
            family:['爸爸','媽媽']
        }

        let newBox = obj(box)
        console.log(newBox.name)   // 小明
        newBox.family.push('妹妹')
        console.log(newBox.family)  //['爸爸','媽媽','妹妹']
5.寄生式繼承

基本思想:寄生式繼承的思路與寄生構(gòu)造函數(shù)和工廠模式類似,即創(chuàng)建一個(gè)僅用于封裝繼承過(guò)程的函數(shù),該 函數(shù)在內(nèi)部以某種方式來(lái)增強(qiáng)對(duì)象,最后再像真地是它做了所有工作一樣返回對(duì)象。

function obj(o) {   //傳遞一個(gè)字面量函數(shù)
            function F() {}  //創(chuàng)建一個(gè)構(gòu)造函數(shù)
            F.prototype = o;  //把字面量函數(shù)賦值給構(gòu)造函數(shù)的原型
            return new F()  //最后返回出實(shí)例化的構(gòu)造函數(shù)
        }

        function create(o) {
            let clone = obj(o);  //通過(guò)調(diào)用函數(shù)創(chuàng)建一個(gè)對(duì)象
            clone.sayHi = function () {  //以某種方式來(lái)增強(qiáng)這個(gè)對(duì)象
                console.log(123)
            }
            return clone; //返回這個(gè)對(duì)象
        }
        let person = {
            name: '小明',
            family: ['爸爸', '媽媽']
        };
        let another = create(person)
        another.sayHi();  //  123
6.ES6中的Class類繼承

1.ES6中新增了一個(gè)定義類的方法這樣就不用我們手動(dòng)的創(chuàng)建構(gòu)造函數(shù)了
2.ES6 class繼承通過(guò)extends來(lái)實(shí)現(xiàn)繼承
3.語(yǔ)法:class 子類 extends父類
4.在constructor中要使用super()
特點(diǎn):

  • 1.父類私有的屬性和方法會(huì)變成子類私有的屬性和方法
  • 2.父類公有屬性和方法會(huì)變成子類公有的屬性和方法
class Dad {
            constructor(uname){
                this.uname = uname
            }
            say = function(){
                console.log('叫爸爸!')
            }
        }
        // 子類繼承父類
        class Son extends Dad{
            constructor(uname,age){
                super(uname)
                this.age = age
            }
        }

        let xiaoming = new Son('小明','18')
        console.log(xiaoming)  //uname: '小明', age: '18', say: ?
        xiaoming.say() // 叫爸爸!
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.原型鏈繼承 核心思想是構(gòu)造函數(shù),實(shí)例對(duì)象以及原型這三者的關(guān)系 缺點(diǎn):1.原型鏈中引用類型的屬性會(huì)被所有實(shí)例共享...
    QQ音樂(lè)的百香果閱讀 581評(píng)論 0 0
  • 許多OO語(yǔ)言都支持兩種繼承方式:接口繼承和實(shí)現(xiàn)繼承。接口繼承只繼承方法簽名,而實(shí)現(xiàn)繼承則繼承實(shí)際的方法。因?yàn)镋CM...
    Starkchen閱讀 392評(píng)論 0 0
  • 一、原型鏈 學(xué)過(guò)java的同學(xué)應(yīng)該都知道,繼承是java的重要特點(diǎn)之一,許多面向?qū)ο蟮恼Z(yǔ)言都支持兩種繼承方式:接口...
    grain先森閱讀 1,482評(píng)論 0 39
  • ES5 有 6 種方式可以實(shí)現(xiàn)繼承,分別為: 1. 原型鏈繼承 原型鏈繼承的基本思想是利用原型讓一個(gè)引用類型繼承另...
    意切閱讀 291評(píng)論 0 0
  • 1. 原型鏈 原型鏈?zhǔn)菍?shí)現(xiàn)繼承的主要方法,它是利用原型,讓一個(gè)引用類型繼承另一個(gè)應(yīng)用類型的屬性和方法。 實(shí)現(xiàn)原型鏈...
    萘小蒽閱讀 326評(píng)論 0 1

友情鏈接更多精彩內(nèi)容