成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS中的繼承

darkerXi / 846人閱讀

摘要：前記在維基百科中繼承的含義是使子類別具有父類別的屬性和方法，或者說子類構(gòu)造的對象直接擁有父類對象的屬性。但是在中并沒有子類和父類的概念，也沒有類和實例的區(qū)分，的繼承是靠原型鏈來實現(xiàn)的。

前記

在維基百科中繼承的含義是使子類別具有父類別的屬性和方法，或者說子類構(gòu)造的對象直接擁有父類對象的屬性。

但是在JavaScript中并沒有"子類"和"父類"的概念，也沒有"類"（class）和"實例"（instance）的區(qū)分，JavaScript的繼承是靠prototype（原型鏈）來實現(xiàn)的。

prototype繼承實現(xiàn)

我曾寫過一篇名為原型和原型鏈的文章，那時候說明了原型和原型鏈?zhǔn)鞘裁?，那繼承只要在它的原型鏈中添加公有屬性就可以了

假如我們寫一個構(gòu)造函數(shù)Human

function Human(name){
  this.name = name//構(gòu)造函數(shù)可以生成新對象，this就是這個新對象
}

然后在Human的原型鏈上添加函數(shù)run

Human.prototype.run = function (){
  console.log(this.name + "在跑")
  return undefined
}

這樣當(dāng)我們用Human構(gòu)造一個對象時候

let a = new Human("lgm")
//Human {name: "lgm"}
//  name: "lgm"/
//  __proto__:
//    run: ? ()
//    constructor: ? Human(name)
//     __proto__: Object

現(xiàn)在我們再寫一個構(gòu)造函數(shù)Man

function Man(name){
  this.name = name//this新生成的對象
  this.gender: "男"http://this新生成的對象
}

然后在Man的原型鏈上添加函數(shù)fight

Man.prototype.fight = function (){
  console.log(this.name + "會打架")
}

這樣用Man構(gòu)造一個對象就是

let b = new Man("lgm")
//Man {name: "lgm"}
//  name: "lgm"/
//  gender: "男"
//  __proto__:
//    fight: ? ()
//    constructor: ? Man(name)
//      __proto__: Object

當(dāng)我們想要Man繼承Human的屬性的時候，就可以知道，只要

Man.prototype.__proto__ = Human.prototype

修改Man

function Man(name){
  Human.call(this, name)
  this.gender: "男"http://this新生成的對象
}

就可以完成繼承了，讓我們來試一下
再次構(gòu)造一個Man對象

let lgm = new Man("lgm")
//Man {name: "lgm", gender: "男"}
//  gender: "男"
//  name: "lgm"/
//  __proto__: Human
//    fight: ? ()
//    constructor: ? Man(name)
//    __proto__:
//      run: ? ()
//      constructor: ? Human(name)
//      __proto__: Object

由此我們可以看到，Man繼承了Human中的run()函數(shù)，但是有一個問題
直接操作__proto__是不屬于ECMA規(guī)范的，在IE中直接操作并不可行，我們需要換一種寫法

var f = function(){}
f.prototype = Human.prototype
Man.prototype = new f()

這樣是使用了new的特性，讓我們來試一下，然后再次構(gòu)造一個Man對象

let lgm = new Man("lgm")
//Man {name: "lgm", gender: "男"}
//  gender: "男"
//  name: "lgm"/
//  __proto__: Human
//    fight: ? ()
//    __proto__:
//      run: ? ()
//      constructor: ? Human(name)
//      __proto__: Object

可以看到，效果是一樣的

class語法糖

在ES6語法中，新增了一個叫做class的語法，專門用來實現(xiàn)繼承，上面代碼通過class改寫如下

class Human {
  constructor(name) {
    this.name = name
  }
  run() {
    console.log("我叫" + this.name + "，我在跑")
    return undefined
  }
}
class Man extends Human {//Man.prototype.__proto__ = Human.prototype
  constructor(name) {
    super(name)//Human.call(this, name)
    this.gender = "男"
  }
  fight() {
    console.log(this.name + "會打架")
  }
}
兩種方法的優(yōu)劣

prototype繼承寫法麻煩，但是簡單易懂，而class繼承的寫法雖然簡單，但難以理解

并且，原型鏈繼承添加繼承屬性的話會會非常簡單，只需

Human.prototype.headNumber = "1"

而class繼承如果需要添加繼承屬性會非常麻煩

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97590.html

相關(guān)文章

  • JS中的繼承(上)

    摘要：中的繼承上學(xué)過或者之類語言的同學(xué)應(yīng)該會對的繼承感到很困惑不要問我怎么知道的的繼承主要是基于原型的對的原型感興趣的同學(xué)可以了解一下我之前寫的中的原型對象相信很多同學(xué)也跟我一樣剛開始接觸的面向?qū)ο缶幊痰臅r候都抱著一種排斥的心態(tài)為什么這么 JS中的繼承(上) 學(xué)過java或者c#之類語言的同學(xué),應(yīng)該會對js的繼承感到很困惑--不要問我怎么知道的,js的繼承主要是基于原型(prototype)...

    Fundebug 評論0 收藏0

  • JS對象繼承與原型鏈

    摘要：此用來定義通過構(gòu)造器構(gòu)造出來的對象的原型，構(gòu)造器內(nèi)部的代碼用來給對象初始化。 對象繼承 VS 類繼承 在 class-based 的面向?qū)ο蟮氖澜缋?，要出現(xiàn)對象，必須先有類。類之間可以繼承，類再使用 new 操作創(chuàng)建出實體，父子對象之間的繼承體現(xiàn)在父類和子類上。你不能說 對象 a 繼承了對象 b，只能說 class A 繼承了 class B，然后他們各自有一個實例a、b。 JS中實現(xiàn)...

    QLQ 評論0 收藏0

  • JS中的類與類的繼承

    摘要：首先捋清楚類和對象的關(guān)系類比如人類，指的是一個范圍對象比如某個人，指的是這個范圍中具體的對象中的作為構(gòu)造函數(shù)時，就是一個類，通過操作符，可以返回一個對象。 JS中的類與類的繼承 我們知道，JS中沒有類或接口的概念，即不能直接定義抽象的類，也不能直接實現(xiàn)繼承。不過，為了編程的方便，我們可以在 JS 中模擬類和繼承的行為。首先捋清楚類和對象的關(guān)系： 類：比如人類，指的是一個范圍； ...

    Tangpj 評論0 收藏0

  • Javascript 設(shè)計模式讀書筆記(三)——繼承

    摘要：的繼承方式屬于原型式繼承，非常靈活。當(dāng)使用關(guān)鍵字執(zhí)行類的構(gòu)造函數(shù)時，系統(tǒng)首先創(chuàng)建一個新對象，這個對象會繼承自構(gòu)造函數(shù)的原型對象新對象的原型就是構(gòu)造函數(shù)的屬性。也就是說，構(gòu)造函數(shù)用來對生成的新對象進(jìn)行一些處理，使這個新對象具有某些特定的屬性。 繼承這個東西在Javascript中尤其復(fù)雜，我掌握得也不好，找工作面試的時候在這個問題上栽過跟頭。Javascript的繼承方式屬于原型式繼承，...

    cangck_X 評論0 收藏0

  • JS對象(3)經(jīng)典對象創(chuàng)建與繼承模式

    摘要：對象經(jīng)典對象創(chuàng)建與繼承模式組合模式創(chuàng)建對象中創(chuàng)建一個對象的方式多種多樣，每種方式都有自己缺點或者優(yōu)點，具體的可以參考而組合使用構(gòu)造函數(shù)模式和原型模式來創(chuàng)建自定義類型算是最常見的方式了。 title: JS對象(3)經(jīng)典對象創(chuàng)建與繼承模式 date: 2016-09-28 tags: JavaScript 0x01 組合模式創(chuàng)建對象 JS 中創(chuàng)建一個對象的方式多種多樣，...

    hellowoody 評論0 收藏0

  • 你是否理解js的Object與Function與原型鏈

    摘要：原型對象是由創(chuàng)建的，因此原型對象的構(gòu)造函數(shù)是構(gòu)造函數(shù)也可以是稱為對象，原型對象也就繼承了其生父構(gòu)造函數(shù)中的數(shù)據(jù)，也同時繼承了原型對象的數(shù)據(jù)。當(dāng)然這條原型鏈中的數(shù)據(jù)，會被還是還是這類構(gòu)造函數(shù)繼承，但是不會被這些繼承，他們不處于同一個鏈條上。 js中，F(xiàn)unction的本質(zhì)是什么？Object的本質(zhì)又是什么？js中有幾條原型鏈？ showImg(https://segmentfault.c...

    itvincent 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<