JS Object構造函數之Object.freeze

Posted on by

概述

Object.freeze(obj)可以凍結一個對象。一個被凍結的對象再也不能被修改；

凍結瞭一個對象則不能向這個對象添加新的屬性，不能刪除已經屬性，不能修改該對象已有屬性的可枚舉性、可配置性、可寫性、以及不能修改已有屬性的值。

此外，凍結一個對象後該對象的原型也不能被修改。freeze()返回和傳入的參數是相同的對象。

JavaScriptDemo: Object.freeze()

const obj = {
  prop：42
}
Object.freeze(obj)

obj.prop = 33 // 嚴格模式下會拋出錯誤。

console.log(obj.prop) // 42

示例

1) 凍結對象

var obj = {
  prop: function() {},
  foo:'bar'
}

// 作為參數傳遞的對象與返回的對象都被凍結
// 所以不必保存返回的對象 (因為兩個對象全等)
var o = Object.freeze(obj)
o === obj // true

// 現在開始任何改變都將失效

obj.foo = ‘he' //不做任何事
Obj.hxx = 'he' // 不添加此屬性

// 試圖通過Object.defineProperty 更改屬性
// 下面兩個語句都會拋出異常
Object.defineProperty(obj,'foo',{value:'yy'})
Object.defineProperty(obj,'sex',{value:'女'})

// 也不能更改原型
// 下面兩個語句都會拋出異常
Object.setPrototypeOf(obj,{x:20})
Obj.__prorp__ = {x:20}

2) 凍結數組

let a = [0]
Object.freeze(a) // 現在數組不能被更改瞭

a[0] = 1 // 失敗
a.push(2) // 失敗

被凍結的對象是不可改變的。但也不總是這樣。下面展示瞭凍結對象不是常量對象（淺凍結）

3) 淺凍結

let obj = {
  internal: {}
}

Object.freeze(obj)
obj.internal.a = ‘he'
console.log(obj.internal.a) // he

要使對象不可變，需要遞歸凍結每個類型為對象的屬性（深凍結）

4) 深凍結

deepFreeze = (obj) => {
  var propNames = Object.getOwnPropertyNames(obj);
  propNames.forEach(function (name) {
    var prop = obj[name];
    if (typeof prop == 'object' && prop !== null) {
      deepFreeze(prop);
    }
  });
  Object.freeze(obj);
}


deepFreeze1 = (obj) => {
  var prop, propName
  Object.freeze(obj)
  for (propName in obj) {
    prop = obj[propName]
    if (!obj.hasOwnProperty(propName) || !(typeof prop === "object") || Object.isFrozen(prop)) {
      // 跳過原型鏈上的屬性和已凍結的對象.
      continue
    }
    deepFreeze1(prop)
  }
}

深凍結的用處一般我們在需要一個屬性，但是一開始它為空或者不存在，那麼你僅需要設置一些初始值

title: "樓層銷售",
value: "",
options: [],

存在的意義

如果你有一個巨大的數組或者Object，並且確定數據不會改變，使用Object.freeze()可以讓性能大幅度提升。Object.freeze()凍結的是值，你仍然可以將變量的引用替換掉。

new vue({
  data: {
    // vue不會對list裡的object做getter、setter綁定
    list: Object.freeze([
      { value: 1 },
      { value: 2 }
    ])
  },
  mounted () {
     // 界面不會有響應
     this.list[0].value = 100;


     // 下面兩種做法，界面都會響應
     this.list = [
       { value: 100 },
       { value: 200 }
     ];
     this.list = Object.freeze([
       { value: 100 },
       { value: 200 }
     ]);
  }
})

以上就是JS Object構造函數之Object.freeze的詳細內容，更多關於JS Object.freeze的資料請關註WalkonNet其它相關文章！

推薦閱讀：