模塊模式中get/set和Object.defineProperty之間的區別

Question

我已經看到了在模塊模式中實現getters/setter的兩種不同方式。一個使用「defineProperty」，而另一個不使用。一個與另一個的優點/缺點是什麼？

var MyModule = (function() { 

    var _val; 

    var api = { 
    get value1() { 
     return _val 
    }, 
    set value1(value) { 
     _val = value 
    } 
    }; 

    Object.defineProperty(api, 'value2', { 
    get: function() { 
     return _val; 
    }, 
    set: function(value) { 
     _val = value 
    } 
    }); 
    return api; 

}()); 

https://plnkr.co/edit/TbJSD4noZTew8II83eTH?p=preview

Answer 1

使用getter syntax創建之前ES2015，你必須知道的名字在那你在寫代碼的時間，這，一個屬性。

Object.defineProperty允許您執行與上述相同的操作，但即使在ES2015之前，也不需要您知道高級屬性的名稱。它還允許您決定該屬性是可配置的，可枚舉的還是可寫的，這是使用get/set語法無法實現的。

要回答您的確切問題：兩者都不是更好。他們適合不同的情況。 get/set語法的讀寫更簡單，但不如Object.defineProperty那麼強大。

Answer 2

Object.defineProperty與get/set表示法的一個「優點」是defineProperty可以在任何時候使用，即使在已經創建的對象上（不能使用簡寫形式的'get'符號）。從MDN：

To append a getter to an existing object later at any time, use Object.defineProperty().

Answer 3

正如文件中提到。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

普通屬性除了通過賦值創建性質，這（在循環或Object.keys方法...）屬性的枚舉，其值可以被改變時就會顯示出來，並且其可被刪除。這種方法允許這些額外的細節從默認值改變。默認情況下，使用Object.defineProperty（）添加的值是不可變的。