面向?qū)ο筇卣髦庋b-Es6中Class私有和受保護(hù)的屬性及方法

neuSnail 發(fā)布于2019-08-26 10:11 / 2412人閱讀

摘要：熟悉面向?qū)ο缶幊痰亩贾?，面向?qū)ο缶幊套钪匾脑瓌t之一從外部接口劃分內(nèi)部接口。所以，面向?qū)ο缶幊叹皖愃朴谄囈粯印?/p>

熟悉面向?qū)ο缶幊痰亩贾?，面向?qū)ο缶幊套钪匾脑瓌t之一 - 從外部接口劃分內(nèi)部接口。也就是說，針對某一類事物，我們其實并不是那么在乎其內(nèi)部究竟是怎樣去實現(xiàn)的，只關(guān)心怎樣使用而已。

為了理解這點，讓我們先來看看現(xiàn)實生活中的列子。通常，我們使用的設(shè)備非常復(fù)雜。但是從外部接口界定內(nèi)部接口允許使用它們沒有什么問題。列如一輛汽車。從外面看主要有：輪子、車身、車頂、方向盤等。

但是，內(nèi)部...

有許多的細(xì)節(jié)，但是我們并不用去知道這些細(xì)節(jié)，也可以很好地開車車。

汽車非常可靠，不是嗎？我們可以使用很多年，只有在出現(xiàn)問題時才能使用它 - 進(jìn)行維修。汽車的可靠性和使用的簡單性在于隱藏內(nèi)部細(xì)節(jié)。

如果我們從汽車上取下發(fā)動機(jī)，那么使用它將會復(fù)雜得多（安裝在哪？），并且危險（它可以電擊）。

所以，面向?qū)ο缶幊叹皖愃朴谄囈粯印?/p> 內(nèi)部和外部接口

在面向?qū)ο蟮木幊讨?，屬性和方法可以分為兩組:

內(nèi)部接口-方法和屬性，可以從類的其他方法訪問，但不能從外部訪問

外部接口-方法和屬性，也可以從外部訪問

如果我們繼續(xù)與汽車進(jìn)行類比 - 內(nèi)部隱藏的部分：發(fā)動機(jī)、變速器、半軸等 - 是其內(nèi)部接口。對于對象的運行，內(nèi)部接口是非常有用的，其細(xì)節(jié)互相使用。例如，彈性元件連接到減震器。

但是從外面看，汽車被外層車殼保護(hù)著，所以沒有人可以接觸到。細(xì)節(jié)隱藏且無法訪問。我們可以通過外部接口使用它的功能。所以，我們在使用一個對象的時候，并不關(guān)心它內(nèi)部是怎樣工作的。

在JavaScript中，有兩種類型的對象字段(屬性和方法):

公共的：隨處都可訪問，它們包含外部接口，我們在開發(fā)中一直常用的也就是公共的屬性和方法了

私有的：僅在類的內(nèi)部可訪問，主要用于內(nèi)部接口

在許多其他語言中，還存在“受保護(hù)”字段：只能從類內(nèi)部訪問和擴(kuò)展它們。它們對內(nèi)部接口也很有用。它們在某種意義上比私有更廣泛，因為我們通常希望通過繼承類來獲取和訪問它們。

受保護(hù)的字段不是在JavaScript語言級別上實現(xiàn)的，但實際上它們非常方便，我們也可以模擬地去實現(xiàn)它們?，F(xiàn)在我們用JavaScript來制作一臺具有這些類型屬性的汽車。

class MBWCar{
    oilAmount = 0; // the amount of oil inside
    constructor(power){
        this.power = power
        alert( `Created a mbw-car, power: ${power}` );
    }
}
// create the mbw car
let mbwCar = new MBWCar(100)

// oil water
mbwCar.oilAmount = 200

從上面的代碼可以看出oilAmount與power這兩個屬性是公共的，我們可以在外部輕易地設(shè)置以及獲取它們。

讓我們將oilAmount屬性更改為protected以對其進(jìn)行更多控制。例如，我們不希望任何人將其設(shè)置為零以下。

受保護(hù)的屬性通常以下劃線_為前綴

這不是在語言層面強(qiáng)制去執(zhí)行，但咱們程序員之間有一個眾所周知的慣例，即不應(yīng)該從外部訪問這些屬性和方法。

class MBWCar{
    _oilAmount = 0;

    constructor(power){
        this._power = power

    }

    set oilAmount(value){
        if (value < 0) throw new Error("Negative oil");
        this._oilAmount = value
    }

    get oilAmount(){
        return this._oilAmount
    }
}
// create the mbw car
let mbwCar = new MBWCar(100)

// oil water
mbwCar.oilAmount = -10 //Error Negative oil

現(xiàn)在訪問受到控制，因此將油量設(shè)置為零以下將失敗。

那么我們可以把power屬性設(shè)置為只讀屬性，這在一些程序開發(fā)中也有類似的需要，某些屬性只讀不可更改其值。

class MBWCar{
    constructor(power){
        this._power = power

    }
    get power(){
        return this._power
    }
}
// create the mbw car
let mbwCar = new MBWCar(100)
alert(`Power is: ${mbwCar.power}W`); // Power is: 100W

mbwCar.power = 25 // Error (no setter)

getter/setter方法

 class Car{
    _oilMount = 0;
    setOilMount(value){
        if(value<0) throw Error("Negative oil")
        this._oilMount = value
    }
    getOilMount() {
        return this._oilMount;
    }
}
let mbw = new Car()
mbw.setOilMount(100);
alert(mbw.getOilMount());

受保護(hù)的屬性是可以繼承的

如果我們繼承類MBWCar擴(kuò)展Car，那么沒有什么能阻止我們從新類的方法中訪問this._oilMount 或this._power屬性。
所以受保護(hù)的屬性是可以繼承的，不像接下來我們所說的私有屬性。

私有字段

這是JavaScript后面新增的一個針對類屬性的語法。JavaScript引擎不支持，或者部分支持，需要進(jìn)行polyfilling
在JavaScript的提議中,有一個已完成的標(biāo)準(zhǔn)，為私有屬性和方法提供語言級支持。

私有的私有字段與#開頭，僅在類的內(nèi)部可進(jìn)行訪問.

  class Car{
    #oilLiMit = 100;

    #checkOil(value){
        if(value<0) throw Error(`Negative oil`)
        if (value > this.#waterLimit) throw new Error("Too much oil");
    }
}

let car = new Car();

// can"t access privates from outside of the class
car.#checkOil(); // Error
car.#waterLimit = 1000; // Error

class BWMCar extends Car{
    method() {
        alert( this.#oilLiMit ); // Error: can only access from Car
    }
}

私有字段不能夠通過this[name]去訪問

 class User{
   sayHi(){
       let filedName = "Darkcod"
       alert(`Hello,${this.filedName}`) //Hello,undefined
   }
}

 new User().sayHi()

總結(jié)：

面向?qū)ο缶幊套钪匾脑瓌t之一 - 從外部接口劃分內(nèi)部接口，這就涉及到屬性和方法的可訪問范圍度

在面向?qū)ο缶幊讨?，可通過private、protected、public來對類的屬性和方法進(jìn)行限制，例如你從你父親那里繼承了一些屬性，但你父親其他屬性不像被你繼承到等。

在JavaScript中，受保護(hù)的屬性和方法名以_開頭，私有的屬性和方法名以#開頭

面向?qū)ο缶幊痰囊粋€較大的好處之一是我們不必理解其內(nèi)部實現(xiàn)，依然可以很好地去進(jìn)行編程開發(fā)，例如：一個U盤，我們想要將電腦中的某些文件拷貝到它那里進(jìn)行存儲，這時候我們并不關(guān)心U盤的內(nèi)部是這樣形成的，我們只知道通過USB口插入即可完成拷貝的工作

云服務(wù)器 GPU云服務(wù)器 js包裝對象中的屬性 js，對象中增加數(shù)據(jù)的方法 es6中的class 對象不支持屬性或方法

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

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

發(fā)表評論

登陸后可評論

0條評論

neuSnail

男|高級講師

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

TA的文章

#yyds干貨盤點# 認(rèn)識和了解計算機(jī)網(wǎng)絡(luò)的分類

閱讀 1876·2021-11-25 09:43
#黑五#Netcup：德國VPS、域名、虛擬主機(jī)優(yōu)惠；值得關(guān)注

閱讀 3705·2021-11-24 10:32
樹莓派31/100 - Pico連接HC-SR04超聲波傳感器，為自動避障智能小車打好基礎(chǔ)

閱讀 1099·2021-10-13 09:39
2021京東云金秋上云特惠：企業(yè)上云專享受,云主機(jī)2核4G限量秒殺,僅155元/年

閱讀 2347·2021-09-10 11:24
愛用云互聯(lián)-香港4核4G 17元/月,美國特價1核1G 8元/月,湖北100G高防2核2G 40元/

閱讀 3363·2021-07-25 21:37
CSS三欄布局的經(jīng)典實現(xiàn)方法

閱讀 3481·2019-08-30 15:56
50行javaScript代碼實現(xiàn)簡單版的 call , apply ,bind 【中級前端面試

閱讀 876·2019-08-30 15:44
簡單記錄個a標(biāo)簽點不上的bug

閱讀 1466·2019-08-30 13:18

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

資訊專欄INFORMATION COLUMN

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

面向?qū)ο筇卣髦庋b-Es6中Class私有和受保護(hù)的屬性及方法

相關(guān)文章

TypeScript快速入門

PHP面試之面向對象（1）

php學(xué)習(xí)筆記（三）面向對象高級實踐

Java核心技術(shù)筆記對象與類

TypeScript入門-類

發(fā)表評論

0條評論

neuSnail

男|高級講師

TA的文章

#yyds干貨盤點# 認(rèn)識和了解計算機(jī)網(wǎng)絡(luò)的分類

#黑五#Netcup：德國VPS、域名、虛擬主機(jī)優(yōu)惠；值得關(guān)注

樹莓派31/100 - Pico連接HC-SR04超聲波傳感器，為自動避障智能小車打好基礎(chǔ)

2021京東云金秋上云特惠：企業(yè)上云專享受,云主機(jī)2核4G限量秒殺,僅155元/年

愛用云互聯(lián)-香港4核4G 17元/月,美國特價1核1G 8元/月,湖北100G高防2核2G 40元/

CSS三欄布局的經(jīng)典實現(xiàn)方法

50行javaScript代碼實現(xiàn)簡單版的 call , apply ,bind 【中級前端面試

簡單記錄個a標(biāo)簽點不上的bug

最新活動

資訊專欄INFORMATION COLUMN

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

面向?qū)ο筇卣髦庋b-Es6中Class私有和受保護(hù)的屬性及方法

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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