目錄一、前言二、按需屬性模式三、凌亂的延遲加載屬性模式四、類的唯一自己的延遲加載屬性模式五、對象字面量的延遲加載屬性模式六、結(jié)論一、前言

傳統(tǒng)上，開發(fā)人員在 JavaScript 類中為實(shí)例中可能需要的任何數(shù)據(jù)創(chuàng)建屬性。對于在構(gòu)造函數(shù)中隨時可用的小塊數(shù)據(jù)來說，這不是問題。但是，如果在實(shí)例中可用之前需要計算某些數(shù)據(jù)，您可能不想預(yù)先支付該費(fèi)用。例如，考慮這個類：

class MyClass { constructor() {this.data = someExpensiveComputation(); }}

在這里，data屬性是作為執(zhí)行一些昂貴計算的結(jié)果而創(chuàng)建的。如果您不確定是否會使用該屬性，則預(yù)先執(zhí)行該計算可能效率不高。幸運(yùn)的是，有幾種方法可以將這些操作推遲到以后。

二、按需屬性模式

優(yōu)化執(zhí)行昂貴操作的最簡單方法是等到需要數(shù)據(jù)后再進(jìn)行計算。例如，您可以使用帶有 getter 的訪問器屬性來按需進(jìn)行計算，如下所示：

class MyClass { get data() {return someExpensiveComputation(); }}

在這種情況下，直到有人第一次讀取該data屬性時，您的昂貴計算才會發(fā)生，這是一種改進(jìn)。但是，每次data讀取屬性時都會執(zhí)行相同的昂貴計算，這比之前的示例更糟糕，其中至少只執(zhí)行了一次計算。這不是一個好的解決方案，但您可以在此基礎(chǔ)上創(chuàng)建一個更好的解決方案。

三、凌亂的延遲加載屬性模式

只有在訪問屬性時才執(zhí)行計算是一個好的開始。您真正需要的是在該點(diǎn)之后緩存信息并僅使用緩存版本。但是您將這些信息緩存在哪里以便于訪問？最簡單的方法是定義一個具有相同名稱的屬性并將其值設(shè)置為計算數(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è)置為不可寫、可配置和不可枚舉（以匹配 getter）。之后，返回值本身。下次data訪問該屬性時，它將從新創(chuàng)建的屬性中讀取而不是調(diào)用 getter：

const object = new MyClass(); // calls the getterconst data1 = object.data; // reads from the data propertyconst data2 = object.data;

實(shí)際上，所有計算僅在第一次data讀取屬性時完成。對該data屬性的每次后續(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對象時可能會導(dǎo)致微妙的問題。幸運(yùn)的是，使用更新的模式很容易解決這個問題。

四、類的唯一自己的延遲加載屬性模式

如果您有一個用例，其中延遲加載的屬性始終存在于實(shí)例中很重要，那么您可以使用Object.defineProperty()在類構(gòu)造函數(shù)中創(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}); }}

在這里，構(gòu)造函數(shù)data使用Object.defineProperty().該屬性是在實(shí)例上創(chuàng)建的（通過使用this）并定義一個 getter 并指定該屬性為可枚舉和可配置的（典型的自己的屬性）。將data屬性設(shè)置為可配置特別重要，以便您可以O(shè)bject.defineProperty()再次調(diào)用它。

然后 getter 函數(shù)進(jìn)行計算并再次調(diào)用Object.defineProperty()。該data屬性現(xiàn)在被重新定義為具有特定值的數(shù)據(jù)屬性，并且不可寫和不可配置以保護(hù)最終數(shù)據(jù)。然后，計算數(shù)據(jù)從 getter 返回。下次data讀取屬性時，它將從存儲的值中讀取。作為獎勵，該data財產(chǎn)現(xiàn)在僅作為自己的財產(chǎn)存在，并且在第一次閱讀之前和之后的行為都相同：

const object = new MyClass();console.log(object.hasOwnProperty('data')); // true const data = object.data;console.log(object.hasOwnProperty('data')); // true

對于類，這很可能是您要使用的模式；另一方面，對象文字可以使用更簡單的方法。

五、對象字面量的延遲加載屬性模式

如果您使用對象字面量而不是類，則過程要簡單得多，因?yàn)樵趯ο笞置媪可隙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六、結(jié)論

在 JavaScript 中重新定義對象屬性的能力提供了一個獨(dú)特的機(jī)會來緩存可能計算成本很高的信息。通過從重新定義為數(shù)據(jù)屬性的訪問器屬性開始，您可以將計算推遲到第一次讀取屬性時，然后緩存結(jié)果以供以后使用。這種方法既適用于類，也適用于對象字面量，并且在對象字面量中更簡單一些，因?yàn)槟槐負(fù)?dān)心您的 getter 會在原型上結(jié)束。

提高性能的最佳方法之一是避免重復(fù)執(zhí)行相同的工作，因此任何時候您可以緩存結(jié)果以供以后使用，都可以加快程序的運(yùn)行速度。延遲加載屬性模式等技術(shù)允許任何屬性成為緩存層以提高性能。

以上就是淺談JavaScript 中的延遲加載屬性模式的詳細(xì)內(nèi)容，更多關(guān)于JS 延遲加載屬性模式的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！