第16章Property Treview


📌 注:モダンJavaScript deep diff(著者:李雄模)

内部スロットと内部メソッド


内部スロットと内部メソッドは、JavaScriptエンジンの実装アルゴリズムを説明するため、カッコで囲まれた名前は内部スロットと内部メソッドです.
内部スロットと内部メソッドはJavaScriptエンジンの内部ロジックであり、原則としてJavaScriptは内部スロットと内部メソッドに直接アクセスまたは呼び出す方法を提供しない.
ただし,一部の内部スロットと内部メソッドに限られ,間接アクセスの手段が提供される.
たとえば、すべてのオブジェクトに[Prototype]という内部スロットがあります.この内部スロットではprotoで間接的にアクセスできます.

PropertyツリーとPropertyディスク立棒オブジェクト


JavaScriptエンジンでは、Propertyの作成時にPropertyのステータスを表すPropertyツリーを自動的にデフォルト値として定義します.
Property Treviewは、JavaScriptエンジンによって管理される内部状態値の内部スロット[Value]、[Writable]、[Emulable]および[Configurable]である.
ES 8から導入されたオブジェクト.getownPropertyDescriptorsメソッドは、すべてのPropertyのPropertyツリー情報を提供するProperty Disk Lipterオブジェクトを返します.
const person = {
	name: 'Lee'
}

// 프로퍼티 동적 생성
person.age = 20;

console.log(Object.getOwnPropertyDescriptors(person));

/*
	name: {value: "Lee", writable: true, emurable: true, configurable: true},
    age: {value: 20, writable: true, emurable: true, configurable: true}
*/

データ・リソースとビジター・リソース


資料
  • キーと値からなる汎用プロトコル
    訪問者見積
  • Property
  • 自体は、値を持たず、他のデータのProperty値の読み取りまたは格納時に呼び出されるアクセス者関数からなるProperty
  • である.
    アクセス者関数はgetter/setter関数とも呼ばれます.アクセス者構成では、getter関数とsetter関数を定義したり、1つだけ定義したりできます.

    構成定義


    property定義とは、新しいpropertyを追加するときに、propertyツリーを明確に定義するか、既存のpropertyを再定義するpropertyツリーです.
    Object.definePropertyメソッドを使用して、Propertyのツリー図を定義します.引数は、オブジェクトの参照とデータpropertyのキー文字列とpropertyディスク立棒オブジェクトを渡します.
    const person = {};
    
    Object.defineProperty(person, 'firstName', {
    	value: 'Ungmo',
      	writable: true,
      	emurable: true,
      	configurable: true
    });
    
    Object.defineProperty(person, 'lastName', {
    	value: 'Lee'
      	// 디스크립터 객체의 프로퍼티를 누락시키면 undefined, false가 기본값이다.
    });
    
    Object.defineProperty(person, 'fullName', {
    	get() {
        	return `${this.firstName} ${this.lastName}`
        }
    });
    Object.definePropertyメソッドは一度に1つのPropertyしか定義できません.Object.複数のプロパティを一度に定義するには、definePropertiesメソッドを使用します.
    const person = {};
    
    Object.defineProperties(person, {
    	firstName: {
        	value: 'Ungmo'
          	writable: true
          	emurable: true
          	configurable: true
        },
      	lastName: {
        	value: 'Lee',
          	writable: true,
          	emurable: true,
          	configurable: true
        },
      	fullName: {
        	get() {
            	return `${this.firstName} ${this.lastName}`
            }
        }
    });

    オブジェクトの変更を防止


    JavaScriptでは、オブジェクトの変更を防ぐためのさまざまな方法が用意されています.オブジェクトの変更を防止する方法は、オブジェクトの変更の強度の違いを禁止します.

    オブジェクトの展開を禁止


    Object.preventExtensionsメソッドは拡張オブジェクトを禁止します.つまり、これは職業資格の増加を禁止することを意味します.
    Property動的追加とオブジェクト.definePropertyの2つの追加方法は禁止されています.
    オブジェクトが展開可能かどうか.isExtensibleメソッドで確認できます.
    const person = {
    	name: 'Lee'
    };
    
    console.log(Object.isExtensible(person));	// true
    
    Object.preventExtensions(person);
    
    console.log(Object.isExtensible(person));	// false

    オブジェクトシール


    Object.sealメソッドはオブジェクトを密封します.オブジェクトシールは、Propertyの追加と削除を禁止し、Propertyツリーを再定義することを意味します.
    オブジェクトがシールされているかどうか.isSealedメソッドで確認できます.
    const person = {
    	name: 'Lee'
    };
    
    console.log(Object.isSealed(person));	// false
    
    Object.seal(person);
    
    console.log(Object.isSealed(person));	//true
    
    // 프로퍼티 값 갱신은 가능하다.
    person.name = 'Kim'
    console.log(person);	// {name: 'Lee'}

    オブジェクトのフリーズ


    Object.[フリーズ方法](Freeze Method)オブジェクトをフリーズします.オブジェクトのフリーズは、Propertyの追加と削除、Propertyツリーの再定義、およびProperty値の更新を禁止することを意味します.
    オブジェクトがフリーズされているかどうか.isFrozenメソッドで確認できます.
    const person = {
    	name: 'Lee'
    };
    
    console.log(Object.isFrozen(person));	// false
    
    Object.frozen(person);
    
    console.log(Object.isFrozen(person));	// true

    不変オブジェクト


    これまで,我々が見た変更防止の方法はいずれも浅い変更であり,直属プログラムのみが変更を防止でき,重複オブジェクトに影響を及ぼさない.
    const person = {
    	name: 'Lee',
      	address: {
        	city: 'Seoul'
        }
    };
    
    Obejct.freeze(person);
    
    console.log(Object.isFrozen(person));	// true
    console.log(Object.isFrozen(person.address));	// false
    
    person.address = 'Busan';
    console.log(person);	// {name: 'Lee', address: {city: 'Busan'}}
    オブジェクトのネストされたオブジェクトをフリーズして可変読み取り専用オブジェクトを実現するには、オブジェクトをすべてのプロパティに値として返します.freezeメソッドを呼び出す必要があります.