這篇文章主要介紹“JavaScript中延遲加載屬性怎么用”,在日常操作中,相信很多人在JavaScript中延遲加載屬性怎么用問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”JavaScript中延遲加載屬性怎么用”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比吳忠網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式吳忠網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋吳忠地區(qū)。費(fèi)用合理售后完善,十余年實(shí)體公司更值得信賴。
有些時候,你會在JavaScript類內(nèi)部創(chuàng)建一些屬性,它保存實(shí)例中可能需要的任何數(shù)據(jù)。
對于在構(gòu)造函數(shù)內(nèi)部隨時可用的小數(shù)據(jù)而言,這不是問題。
但是,如果需要在實(shí)例中可用之前計(jì)算一些大數(shù)據(jù),則您可能需要執(zhí)行昂貴的計(jì)算操作。例如,考慮此類:
class MyClass { constructor() { this.data = someExpensiveComputation(); } }
在這里,該data屬性是執(zhí)行一些昂貴的計(jì)算而創(chuàng)建的。
如果您不確定將使用該屬性,則提前執(zhí)行可能不太好,效率低。幸運(yùn)的是,接下來介紹幾種方法可以將這些操作推遲。
接下來主要圍繞的訪問器屬性來展開的。
優(yōu)化執(zhí)行計(jì)算操作的最簡單方法是等到需要數(shù)據(jù)后再進(jìn)行計(jì)算。
例如,您可以使用帶有g(shù)etter的data屬性來按需進(jìn)行計(jì)算,如下所示:
class MyClass { get data() { return someExpensiveComputation(); } }
在這種情況下,直到有人第一次讀取該data屬性時,您的昂貴的計(jì)算操作才發(fā)生,這是一種改進(jìn)。
但是,也是存在問題的,每次data讀取屬性時都會執(zhí)行相同的昂貴計(jì)算操作,這比之前的示例(其中至少僅執(zhí)行一次計(jì)算)差。
按照我們分析的情況來看,這不是一個好的解決方案,所以可以在此基礎(chǔ)上創(chuàng)建一個更好的解決方案。
只有在訪問該屬性時才執(zhí)行計(jì)算是一個好的開始。您真正需要的是在那之后緩存信息,然后僅使用該緩存的數(shù)據(jù)結(jié)果。
但是,有個問題需要我們考慮,您將這些信息緩存在何處以便于訪問呢?
最簡單的方法是定義一個具有相同名稱的屬性,并將其值設(shè)置為計(jì)算出的數(shù)據(jù),如下所示:
class MyClass { get data() { const actualData = someExpensiveComputation(); Object.defineProperty(this, "data", { value: actualData, writable: false, configurable: false, enumerable: false }); return actualData; } }
在這里,該data屬性再次被定義為該類的getter,但是這一次它將緩存結(jié)果。
調(diào)用Object.defineProperty()創(chuàng)建一個名為的新屬性data,該屬性的固定值為actualData,并且被設(shè)置為不可寫,不可配置和可枚舉。
下次data訪問該屬性時,它將從新創(chuàng)建的屬性中讀取而不是調(diào)用getter:
const object = new MyClass(); // calls the getter const data1 = object.data; // reads from the data property const data2 = object.data;
實(shí)際上,所有計(jì)算僅在第一次讀取數(shù)據(jù)屬性時完成。數(shù)據(jù)屬性的每次后續(xù)讀取都將返回緩存的版本。這種模式的缺點(diǎn)是data屬性開始時是不可枚舉的原型屬性,最后是不可枚舉的自己的屬性:
const object = new MyClass(); console.log(object.hasOwnProperty("data")); // false const data = object.data; console.log(object.hasOwnProperty("data")); // true
盡管這種區(qū)別在許多情況下并不重要,但了解這種模式很重要,因?yàn)樵趥鬟f對象時,這種模式可能會引起細(xì)微的問題。
幸運(yùn)的是,我們可以使用接下來的模式很容易解決這個問題。
如果您有一個實(shí)例,對于這個實(shí)例,延遲加載屬性存在很重要,那么您可以使用Object.defineProperty()在類構(gòu)造函數(shù)內(nèi)部創(chuàng)建該屬性。
它比前面的示例有點(diǎn)混亂,但是它將確保該屬性僅存在于實(shí)例上。這是一個例子:
class MyClass { constructor() { Object.defineProperty(this, "data", { get() { const actualData = someExpensiveComputation(); Object.defineProperty(this, "data", { value: actualData, writable: false, configurable: false }); return actualData; }, configurable: true, enumerable: true }); } }
我們從這個例子中可以發(fā)現(xiàn),構(gòu)造函數(shù)使用創(chuàng)建data訪問器屬性O(shè)bject.defineProperty()。該屬性是在實(shí)例上創(chuàng)建的(使用this),定義了一個getter并指定了可枚舉和可配置的屬性。
將data屬性設(shè)置為可配置尤其重要,這樣您可以O(shè)bject.defineProperty()再次調(diào)用它。
然后,getter函數(shù)進(jìn)行計(jì)算并再次調(diào)用Object.defineProperty()。對于data來說,將該屬性重新定義為具有特定值的數(shù)據(jù)屬性,并且將其變?yōu)椴豢蓪懬也豢膳渲靡员Wo(hù)最終數(shù)據(jù)。下次data讀取該屬性時,將從存儲的值中讀取該屬性。該data屬性現(xiàn)在僅作為自己的屬性存在,并且在第一次讀取之前和之后都具有相同的作用:
const object = new MyClass(); console.log(object.hasOwnProperty("data")); // true const data = object.data; console.log(object.hasOwnProperty("data")); // true
對于類,這很可能是您要使用的模式。另一方面,對象模式下可以使用更簡單的方法。
如果使用的是對象模式而不是類,則過程要簡單得多,因?yàn)樵趯ο竽J缴隙x的getter與數(shù)據(jù)屬性一樣被定義為可枚舉的自身屬性(而不是原型屬性)。這意味著您可以為類使用延遲加載屬性模式,而不會造成混亂:
const object = { get data() { const actualData = someExpensiveComputation(); Object.defineProperty(this, "data", { value: actualData, writable: false, configurable: false, enumerable: false }); return actualData; } }; console.log(object.hasOwnProperty("data")); // true const data = object.data; console.log(object.hasOwnProperty("data")); // true
到此,關(guān)于“JavaScript中延遲加載屬性怎么用”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!