js の凍結オブジェクト Object.freeze() メソッドの使用

const が基本データ型を定義し、この値は変更できないことは誰もが知っています。それでは、const を使用してオブジェクトを定義した場合、そのオブジェクトを変更できるでしょうか?

const a = 5
// a = 10  // TypeError: Assignment to constant variable.

const obj = {
    name: '张三'
}
obj.name = '李四'
console.log(obj)    // {name: "李四"}

答えは「はい」です。では、変更できないオブジェクトを定義したい場合はどうすればよいでしょうか?
次に、Object.freeze() を使用する必要があります。
その機能はオブジェクトを凍結することです。凍結されたオブジェクトには次の特性があります。

新しいプロパティを追加できません
既存の属性は削除できません
既存の属性の値は変更できません
プロトタイプを変更できない
既存のプロパティの列挙可能性、構成可能性、および書き込み可能性は変更できません。

基本的な使い方

var obj = {
    name: '张三',
    age: 18,
    address: '上海市'
}
obj.__proto__.habit = '运动'
 
// 冻结对象
Object.freeze(obj)
 
// 不能添加新属性
obj.sex = '男'
console.log(obj)    // {name: "张三", age: 18, address: "上海市"}
 
// 不能删除原有属性
delete obj.age
console.log(obj)    // {name: "张三", age: 18, address: "上海市"}
 
// 不能修改已有属性的值
obj.name = '李四'
console.log(obj)    // {name: "张三", age: 18, address: "上海市"}
 
// 不能修改原型
obj.__proto__ = '随便什么值'
console.log(obj.__proto__)  // {habit: "运动", constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, …}
 
// 不能修改已有属性的可枚举性、可配置性、可写性
Object.defineProperty(obj,'address',{ // TypeError: Cannot redefine property: address
    enumerable: false,// 表示是否可以枚举。直接在对象上定义的属性，基本默认true
    configurable: false,// 表示能否通过delete删除属性，能否修改属性的特性
    writable: true// 表示能否修改属性的值。直接在对象上定义的属性，基本默认true
})

ここで注意すべき点の 1 つは、Object.freeze() の戻り値は凍結されたオブジェクトであり、受信オブジェクトと完全に等しいため、通常は戻り値を受け取る必要がないということです。上でオブジェクトをフリーズしたので、配列をフリーズしてもいいでしょうか?

配列をフリーズする

var arr = [1,2,3,4,5]
Object.freeze(arr)
arr[0]='新值'
console.log(arr)    // [1, 2, 3, 4, 5]

実際、配列の本質はオブジェクトであることを理解するのは簡単ですが、オブジェクトのキーは添え字であるため、凍結することもできます。オブジェクト内にまだオブジェクトがある場合でも、フリーズは有効ですか?

浅い凍結

var obj = {
    name: '张三',
    info: {
        a: 1,
        b: 2
    }
}
Object.freeze(obj)

obj.name = '李四'
console.log(obj)    // {info: {a: 1, b: 2},name: "张三"}

obj.info.a = 66
console.log(obj.info)   // {a: 66, b: 2}

オブジェクト内にまだオブジェクトが存在する場合、Object.freeze() は失敗することがわかります。Object.freeze() は浅いフリーズのみをサポートします。以下に、将来直接使用できる深いフリーズ関数をカプセル化します。

ディープフリーズ

var obj = {
    name: '张三',
    info: {
        a: 1,
        b: 2
    }
}

function deepFreeze(obj) {
    // 获取所有属性
    var propNames = Object.getOwnPropertyNames(obj)
 
    // 遍历
    propNames.forEach(item => {
        var prop = obj[item]
        // 如果某个属性的属性值是对象，则递归调用
        if (prop instanceof Object && prop !== null) {
            deepFreeze(prop)
        }
    })

    // 冻结自身
    return Object.freeze(obj)
}

deepFreeze(obj)

obj.name = '李四'
console.log(obj)    // {name: "张三", info: {…}}

obj.info.a = 100
console.log(obj.info)   // {a: 1, b: 2}

アプリケーションシナリオ

Object.freeze() はパフォーマンスを向上させることができます。多くのコンテンツを含むオブジェクトがあり、それがすべて静的データであり、変更しないことが確実な場合は、実際に Object.freeze() を使用してオブジェクトをフリーズできます。このようにパフォーマンスを大幅に向上させることができ、データ量が増加するにつれて改善効果も大きくなります。通常いつ使用されますか? 純粋に表示のみを目的とするビッグデータの場合は、Object.freeze を使用してパフォーマンスを向上させることができます。

Vue での Object.freeze の使用

Vue プロジェクトでは、通常、データの初期化に多くの変数が使用されますが、後で使用したくない場合は、Object.freeze() を使用できます。これにより、Vue の初期化時に無駄な操作が行われることがなくなり、パフォーマンスが向上します。

data(){
    return{
        list:Object.freeze({'我不需要改变'})
    }
}