国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

incredible / 1749人閱讀

摘要：這是因為子類沒有自己的對象，而是繼承父類的對象，然后對其進(jìn)行加工。

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

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

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

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里來了新同學(xué)

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

我們在控制臺上看看兩個炮姐有什么不一樣

前一種方法的炮姐：

用了Class的炮姐：

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

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

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

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

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

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

是這樣的，看上面定義中標(biāo)黑的部分
在ES6中，通過對class的應(yīng)用，有更好更方便的方式來處理繼承
我們曾經(jīng)舉過妹妹的例子，妹妹是炮姐的克隆人，跟炮姐有相同的發(fā)色和Bilibili的能力，但是每個人有不同的能力級別，在沒有用到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");

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

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

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

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

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

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

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

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

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

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

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

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

能看到這的都是真愛
發(fā)著燒寫，滿臉懵逼

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/90716.html

相關(guān)文章

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

    摘要：譯者注根據(jù)定義，沒有原型，并作為這個原型鏈中的最后一個環(huán)節(jié)。由于這個屬性不標(biāo)準(zhǔn)，因此一般不提倡使用。中用函數(shù)獲得一個對象的。 溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費(fèi)生命 在上一篇博文javascript對象不完全探索記錄03：小伙子，你對象咋來的？上篇，中大概說了說在js中，比較好理解的對象創(chuàng)建方式，分別是直接定義／字面量，和調(diào)用構(gòu)造函數(shù) 你對象還有原型？ 在一...

    trigkit4 評論0 收藏0

  • javascript對象不完全探索記錄05：小伙子，你對象咋來的？下篇 - 啥樣的對象適合你

    摘要：溫馨提示作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費(fèi)生命溫馨提示續(xù)本文內(nèi)容簡單，發(fā)揚(yáng)了潛入潛出的精神，請謹(jǐn)慎浪費(fèi)時間溫馨提示再續(xù)魔卡少女櫻動畫再開撒花經(jīng)過前兩篇文章的梳理對象不完全探索記錄小伙子，你對象咋來的上篇對象不完全探索記 溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費(fèi)生命溫馨提示-續(xù)：本文內(nèi)容簡單，發(fā)揚(yáng)了潛入潛出的精神，請謹(jǐn)慎浪費(fèi)時間溫馨提示-再續(xù)：《魔...

    hlcfan 評論0 收藏0

  • javascript對象不完全探索記錄03：小伙子，你對象咋來的？上篇

    摘要：看著別人寫的功能對，就直接拿過來用，寫出來的代碼臃腫到爆炸，滿屏幕的的初級使用方式，運(yùn)氣好了能湊合跑起來，出了問題全臉懵逼，心中安慰自己一萬遍我可是干設(shè)計的，但是既然打算好好整下就得從頭開始看了。 溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費(fèi)生命 首先，說實話，我對不起javascript，作為一個接觸前端快10年的老前端(偽)，一直發(fā)揚(yáng)的是不求甚解的拿來就用主義?？?..

    Pluser 評論0 收藏0

  • Redux之旅－2

    摘要：之旅時間作者三月懶驢入門配置文章鏈接之旅鏈接前言上一篇文章，很簡單的用代碼來說明了，，，各自的意義和相互的聯(lián)系以及在實際開發(fā)的應(yīng)用。分割你的，使每一個更有意義，之后再合并回來。分割和合并和不同。的只有一個只有一個就意味著只有一個。 Redux之旅－2 時間：2016.4.22-11:24作者：三月懶驢入門配置文章：鏈接Redux之旅－1：鏈接 1. 前言 上一篇文章，很簡單的用代碼來說...

    liangzai_cool 評論0 收藏0

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

    摘要：基礎(chǔ)語法參數(shù)參數(shù)參數(shù)函數(shù)聲明參數(shù)參數(shù)參數(shù)表達(dá)式單一相當(dāng)于參數(shù)參數(shù)參數(shù)表達(dá)式當(dāng)只有一個參數(shù)時，圓括號是可選的單一參數(shù)函數(shù)聲明單一參數(shù)函數(shù)聲明沒有參數(shù)的函數(shù)應(yīng)該寫成一對圓括號。 溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費(fèi)生命溫馨提示-續(xù)：你們要非得看，我也攔不住，但是至少得準(zhǔn)備個支持ES6的Chrome瀏覽器吧？ 之前在某些大神的代碼中出現(xiàn)一串神秘符號類似于num =>...

    Snailclimb 評論0 收藏0

發(fā)表評論

0條評論

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