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í)行隧魄,并且通過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.組合繼承

基本思想:用使用原型鏈的方式來實(shí)現(xiàn)對(duì)原型屬性和方法的繼承购啄,而通過借用構(gòu)造函數(shù)來實(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è)僅用于封裝繼承過程的函數(shù)蔚龙,該 函數(shù)在內(nè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);  //通過調(diào)用函數(shù)創(chuàng)建一個(gè)對(duì)象
            clone.sayHi = function () {  //以某種方式來增強(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繼承通過extends來實(shí)現(xiàn)繼承
3.語法: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)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市坑填,隨后出現(xiàn)的幾起案子务荆,更是在濱河造成了極大的恐慌,老刑警劉巖穷遂,帶你破解...
    沈念sama閱讀 211,290評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件函匕,死亡現(xiàn)場離奇詭異,居然都是意外死亡蚪黑,警方通過查閱死者的電腦和手機(jī)盅惜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來忌穿,“玉大人抒寂,你說我怎么就攤上這事÷咏#” “怎么了屈芜?”我有些...
    開封第一講書人閱讀 156,872評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長朴译。 經(jīng)常有香客問我井佑,道長,這世上最難降的妖魔是什么眠寿? 我笑而不...
    開封第一講書人閱讀 56,415評(píng)論 1 283
  • 正文 為了忘掉前任躬翁,我火速辦了婚禮,結(jié)果婚禮上盯拱,老公的妹妹穿的比我還像新娘盒发。我一直安慰自己,他們只是感情好狡逢,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評(píng)論 6 385
  • 文/花漫 我一把揭開白布宁舰。 她就那樣靜靜地躺著,像睡著了一般奢浑。 火紅的嫁衣襯著肌膚如雪蛮艰。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,784評(píng)論 1 290
  • 那天殷费,我揣著相機(jī)與錄音印荔,去河邊找鬼。 笑死详羡,一個(gè)胖子當(dāng)著我的面吹牛仍律,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播实柠,決...
    沈念sama閱讀 38,927評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼水泉,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了窒盐?” 一聲冷哼從身側(cè)響起草则,我...
    開封第一講書人閱讀 37,691評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蟹漓,沒想到半個(gè)月后炕横,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,137評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡葡粒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評(píng)論 2 326
  • 正文 我和宋清朗相戀三年份殿,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嗽交。...
    茶點(diǎn)故事閱讀 38,622評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡卿嘲,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出夫壁,到底是詐尸還是另有隱情拾枣,我是刑警寧澤,帶...
    沈念sama閱讀 34,289評(píng)論 4 329
  • 正文 年R本政府宣布盒让,位于F島的核電站梅肤,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏邑茄。R本人自食惡果不足惜凭语,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望撩扒。 院中可真熱鬧似扔,春花似錦、人聲如沸搓谆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽泉手。三九已至黔寇,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間斩萌,已是汗流浹背缝裤。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來泰國打工屏轰, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人憋飞。 一個(gè)月前我還...
    沈念sama閱讀 46,316評(píng)論 2 360
  • 正文 我出身青樓霎苗,卻偏偏與公主長得像,于是被迫代替她去往敵國和親榛做。 傳聞我的和親對(duì)象是個(gè)殘疾皇子唁盏,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

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