從-1開(kāi)始的ES6探索之旅02：小伙子，你對(duì)象咋來(lái)的？續(xù)篇 - 你的對(duì)象班（class）里來(lái)的？

incredible 發(fā)布于2019-08-21 18:41 / 1807人閱讀

摘要：這是因?yàn)樽宇?lèi)沒(méi)有自己的對(duì)象，而是繼承父類(lèi)的對(duì)象，然后對(duì)其進(jìn)行加工。

溫馨提示：作者的爬坑記錄，對(duì)你等大神完全沒(méi)有價(jià)值，別在我這浪費(fèi)生命
溫馨提示-續(xù)：你們要非得看，我也攔不住，但是至少得準(zhǔn)備個(gè)支持ES6的Chrome瀏覽器吧？
溫馨提示-再續(xù)：ES6簡(jiǎn)直了，放著不用簡(jiǎn)直令人發(fā)指！

書(shū)接上回，即便是程序員，也還是能夠通過(guò)自己的努力辛辛苦苦找到合適對(duì)象的，見(jiàn)前文《javascript對(duì)象不完全探索記錄05：小伙子，你對(duì)象咋來(lái)的？下篇 - 啥樣的對(duì)象適合你》

還記得我們新建一個(gè)炮姐和黑子廢了多少事嗎

function GirlFriend(name,hairColor,power){
    this.name = name;
    this.hairColor = hairColor;
    this.power = power;
}

GirlFriend.prototype.showPower = function(){
    console.log(this.power)
}

var mikoto = new GirlFriend("Mikoto","brown","Bilibili");
var kuroko = new GirlFriend("Kuroko","black","Telesport");

mikoto.showPower();//Bilibili
kuroko.showPower();//Telesport

class里來(lái)了新同學(xué)

當(dāng)你擦擦額頭的汗水一臉微笑地看著自己創(chuàng)建出的對(duì)象時(shí)，邊上小哥早就拉著從class里找的對(duì)象去浪漫土耳其玩了一圈了。
其實(shí)在ES6的時(shí)代，你根本不用那么費(fèi)勁，利用class這個(gè)概念，就可以幫你更方便的帶來(lái)一個(gè)相對(duì)完美對(duì)象，例如剛才我們所做的，還可以通過(guò)下面的方式實(shí)現(xiàn)

class GirlFriend{
    constructor(name,hairColor,power){
        this.name = name;
        this.hairColor = hairColor;
        this.power = power;
    }
    showPower(){
        console.log(this.power)
    }
}

var mikoto = new GirlFriend("Mikoto","brown","Bilibili");
var kuroko = new GirlFriend("Kuroko","black","Telesport");
mikoto.showPower();//Bilibili
kuroko.showPower();//Telesport

我們?cè)诳刂婆_(tái)上看看兩個(gè)炮姐有什么不一樣

前一種方法的炮姐：

用了Class的炮姐：

除了之前的對(duì)象方法是個(gè)匿名函數(shù)沒(méi)有name屬性之外沒(méi)什么區(qū)別，所以放心的用吧！干的就是一件事！

再看看我們應(yīng)該怎么做，其實(shí)很簡(jiǎn)單，就是把構(gòu)造函數(shù)construtor()和其他對(duì)象方法一起放到你自己命名的class xxx{}中就可以了，再利用同構(gòu)造函數(shù)法相同的方式把對(duì)象new出來(lái)就OK了
說(shuō)到底利用這種方式構(gòu)造的對(duì)象的原理其實(shí)和混合法／前文有說(shuō)，是一樣的

話(huà)又說(shuō)回來(lái)，其實(shí)class這個(gè)關(guān)鍵字，我早就看好你了，這不就是類(lèi)嗎，上文所干的事情不就是在javascript里建了一個(gè)類(lèi)嗎，但事實(shí)上并不是這樣的

ECMAScript 2015 中引入的 JavaScript 類(lèi)(classes) 實(shí)質(zhì)上是 JavaScript 現(xiàn)有的基于原型的繼承的語(yǔ)法糖。 類(lèi)語(yǔ)法不是向JavaScript引入一個(gè)新的面向?qū)ο蟮睦^承模型。JavaScript類(lèi)提供了一個(gè)更簡(jiǎn)單和更清晰的語(yǔ)法來(lái)創(chuàng)建對(duì)象并處理繼承。
摘自MDN Web docs - Web技術(shù)文檔／javascript／類(lèi)

說(shuō)明白點(diǎn)，其實(shí)還是原型鏈那點(diǎn)事，只不過(guò)寫(xiě)的像類(lèi)一樣，這樣方便大家理解和使用罷了，所以為了不產(chǎn)生不必要的誤會(huì)，我決定就不叫它類(lèi)了，就是class一個(gè)javascript中特有的概念

所以這回可以痛快的繼承了？

是這樣的，看上面定義中標(biāo)黑的部分
在ES6中，通過(guò)對(duì)class的應(yīng)用，有更好更方便的方式來(lái)處理繼承
我們?cè)?jīng)舉過(guò)妹妹的例子，妹妹是炮姐的克隆人，跟炮姐有相同的發(fā)色和Bilibili的能力，但是每個(gè)人有不同的能力級(jí)別，在沒(méi)有用到class之前，我是這么干的

function Sister(level,number){
    this.level = level;
    this.number = number;
    this.showLevel = function(){
        console.log(this.level);
    }
}
Sister.prototype = mikoto;
var sister01 = new Sister(3,"0001");

而這個(gè)只是為了了解原型鏈相關(guān)原理的嘗試，從最終的結(jié)果看借用了一些繼承的思維，但繼承說(shuō)到底是類(lèi)／class層面的，在之前不少前輩在javascript中嘗試了對(duì)繼承的實(shí)現(xiàn)，一文蓋之JavaScript 中的繼承 - MDN Web docs

但是在在ES6中既然有了class這個(gè)概念那么繼承的概念呢
當(dāng)然是有的！妹妹們，出來(lái)吧！

class Sister extends GirlFriend {
    constructor(name, hairColor, power, number, level) {
        super(name, hairColor, power);
        this.number = number;
        this.level = level;
    }
    showLevel() {
        console.log(this.level);
        super.showPower();
    }
}

var sister1 = new Sister("Sister", "brown", "Bilibili", "0001", 3);
sister1.showPower();//Bilibili
sister1.showLevel();//3,Bilibili

效果簡(jiǎn)直拔群，我們建立了和炮姐有同樣發(fā)色和能力的妹妹，而且還能調(diào)用炮姐的能力，并且還有自己的新特性。
用法也很好理解，就是在你定義一個(gè)新的class Sister的時(shí)候讓它extends要繼承的class GirlFriend，新的class也可以有自己的構(gòu)造函數(shù)，為自己添加新的屬性，當(dāng)然也可以有新的方法，還可以調(diào)用父class中的方法

這里面有個(gè)神奇的函數(shù)super()其實(shí)跟他一點(diǎn)不陌生，就跟關(guān)鍵字class一樣在許多面向?qū)ο蟮恼Z(yǔ)言中都會(huì)出現(xiàn)

而在創(chuàng)建妹妹的過(guò)程中，兩次用到了super()，第一次是在構(gòu)造函數(shù)中，通過(guò)super()調(diào)用了父class的構(gòu)造函數(shù)使得妹妹也可以擁有和炮姐一樣多的屬性，第二次是在對(duì)象方法中，調(diào)用了父class的對(duì)象方法，使得妹妹在展示自己level的同時(shí)可以展示自己的Bilibili，在javascript中super()的用法也就主要是這兩種

super([arguments]); 
// 調(diào)用 父對(duì)象/父類(lèi) 的構(gòu)造函數(shù)
super.functionOnParent([arguments]); 
// 調(diào)用 父對(duì)象/父類(lèi) 上的方法`摘自MDN Web docs - Web技術(shù)文檔／javascript／super

在這里要注意的一點(diǎn)是，在子class的constructor中必須先調(diào)用super才能使用關(guān)鍵字this，不然會(huì)報(bào)錯(cuò)的，究其原因

子類(lèi)必須在constructor方法中調(diào)用super方法，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)。這是因?yàn)樽宇?lèi)沒(méi)有自己的this對(duì)象，而是繼承父類(lèi)的this對(duì)象，然后對(duì)其進(jìn)行加工。如果不調(diào)用super方法，子類(lèi)就得不到this對(duì)象。摘自ECMAScript6入門(mén) Class的繼承 - 阮一峰

關(guān)于javascript中繼承這點(diǎn)事，雖然這看上去跟真的似的，但是這還是個(gè)語(yǔ)法糖，還是原型鏈那點(diǎn)事

這所謂的繼承，就是讓GirlFirend成為了Sister的原型對(duì)象而已

當(dāng)然ES6中關(guān)于class相關(guān)的東西還有不少，學(xué)習(xí)路漫長(zhǎng)啊

能看到這的都是真愛(ài)
發(fā)著燒寫(xiě)，滿(mǎn)臉懵逼

云服務(wù)器 GPU云服務(wù)器現(xiàn)在發(fā)現(xiàn)你的優(yōu)勢(shì) 迷你世界的云服務(wù)器從哪里來(lái)的鏈接云服務(wù)器輸入你的憑證請(qǐng)檢查你的網(wǎng)絡(luò)或者防火墻設(shè)置

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90716.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

incredible

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow與tensorflow-gpu

閱讀 1863·2023-04-26 01:41
Study Blazor .NET（四）數(shù)據(jù)綁定

閱讀 3168·2021-11-23 09:51
震驚！這個(gè)操作系統(tǒng)的應(yīng)用加載只需要“毫秒級(jí)”耗時(shí)

閱讀 2816·2021-10-09 09:43
主機(jī)的作用是什么-主機(jī)的作用是什么？

閱讀 9342·2021-09-22 15:13
掃雷連爆（望大佬也可以幫忙優(yōu)化或提出意見(jiàn)）（C語(yǔ)言版）------上

閱讀 2523·2021-09-07 09:59
前端面試每日3+1——第111天

閱讀 2686·2019-08-30 15:44
bootstrap4源碼閱讀體會(huì)

閱讀 1193·2019-08-30 12:45
水平垂直居中

閱讀 2677·2019-08-30 12:43

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

從-1開(kāi)始的ES6探索之旅02：小伙子，你對(duì)象咋來(lái)的？續(xù)篇 - 你的對(duì)象班（class）里來(lái)的？

相關(guān)文章

**javascript對(duì)象不完全探索記錄04：小伙子，你對(duì)象咋來(lái)的？中篇 - 現(xiàn)出你的原型！**

**javascript對(duì)象不完全探索記錄05：小伙子，你對(duì)象咋來(lái)的？下篇 - 啥樣的對(duì)象適合你**

**javascript對(duì)象不完全探索記錄03：小伙子，你對(duì)象咋來(lái)的？上篇**

Redux之旅－2

**從-1開(kāi)始的ES6探索之旅01：顏文字成精的箭頭函數(shù) 上篇 - 大哥，你指哪呢？**

發(fā)表評(píng)論

0條評(píng)論

incredible

男|高級(jí)講師

TA的文章

tensorflow與tensorflow-gpu

Study Blazor .NET（四）數(shù)據(jù)綁定

震驚！這個(gè)操作系統(tǒng)的應(yīng)用加載只需要“毫秒級(jí)”耗時(shí)

主機(jī)的作用是什么-主機(jī)的作用是什么？

掃雷連爆（望大佬也可以幫忙優(yōu)化或提出意見(jiàn)）（C語(yǔ)言版）------上

前端面試每日3+1——第111天

bootstrap4源碼閱讀體會(huì)

水平垂直居中

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

從-1開(kāi)始的ES6探索之旅02：小伙子，你對(duì)象咋來(lái)的？續(xù)篇 - 你的對(duì)象班（class）里來(lái)的？

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

從-1開(kāi)始的ES6探索之旅02：小伙子，你對(duì)象咋來(lái)的？續(xù)篇 - 你的對(duì)象班（class）里來(lái)的？