【フロントエンドの知識】JavaScript - 属性と属性

1. データの属性

データ属性には、データ値を保持する場所が含まれます。値はこの場所から読み取られ、この場所に書き込まれます。

データ属性の 4 つの特徴:

特性	説明する
[[設定可能]]	プロパティを削除して削除によって再定義できるかどうか、そのプロパティを変更できるかどうか、およびアクセサープロパティに変更できるかどうかを示します。
[[列挙可能]]	属性を for-in ループで返すことができるかどうかを示します。
[[書き込み可能]]	プロパティの値を変更できるかどうかを示します。
[[価値]]	プロパティの実際の値が含まれます

// 当我们创建一个对象时，name的值会被设置到 [[Value]]特性中，[[Configurable]]、[[Enumerable]]和[[Writable]] 都会被设置为 true
let person = {
    
     
 name: "Outman" 
};

プロパティのデフォルト値を変更する場合は、Object.defineProperty() メソッドを使用できます。

書き込み可能な属性を変更する

let person = {
    
    }; 
Object.defineProperty(person, "name", {
    
     
 writable: false, // 表示不可修改
 value: "Outman" 
}); 
console.log(person.name); // "Outman" 
person.name = "manOut";  // 尝试修改name属性
console.log(person.name); // "Outman"，无法修改name值，因为 writable 为 false

構成可能な属性を変更する

let person = {
    
    }; 
Object.defineProperty(person, "name", {
    
     
 configurable: false, // 表示不可配置
 value: "Outman" 
}); 
console.log(person.name); // "Outman" 
delete person.name; // 尝试 delete name属性
console.log(person.name); // "Outman"，无法delete name属性，因为 configurable 为 false

// 另外，值得一提的是，一个属性被定义为不可配置之后，将无法再变回可配置的！

2. アクセサーのプロパティ

getter 関数と setter 関数が含まれていますが、これら 2 つの関数は必須ではありません。

特性	説明する
[[設定可能]]	属性を削除して削除によって再定義できるかどうか、そのプロパティを変更できるかどうか、およびデータ属性に変更できるかどうかを示します。
[[列挙可能]]	属性を for-in ループで返すことができるかどうかを示します。
[[得る]]	Getter 関数。プロパティが読み取られるときに呼び出されます。
[[セット]]	プロパティが書き込まれるときに呼び出される Setter 関数。

アクセサープロパティのプロパティも、Object.defineProperty() によって変更されます。

// 定义一个对象，包含伪私有成员 year_和公共成员 edition 
let book = {
    
     
    year_: 2017, 
    edition: 1
}; 
Object.defineProperty(book, "year", {
    
     
    get() {
    
     
        return this.year_; 
    }, 
    set(newValue) {
    
     
        if (newValue > 2017) {
    
     
            this.year_ = newValue; 
            this.edition += newValue - 2017; 
        } 
    } 
}); 
book.year = 2018; 
console.log(book.edition); // 2

3. 複数の属性を定義する

複数のプロパティを定義するには、Object.defineProperties() メソッドを使用できます。

let book = {
    
    }; 
Object.defineProperties(book, {
    
     
    year_: {
    
     
        value: 2017 
    }, 
    edition: {
    
     
        value: 1 
    }, 
    year: {
    
     
        get() {
    
     
            return this.year_; 
        },
        set(newValue) {
    
     
            if (newValue > 2017) {
    
     
                this.year_ = newValue; 
                this.edition += newValue - 2017; 
            } 
        } 
    } 
});

第四に、読み取りプロパティの特徴

プロパティのプロパティを読み取るには、Object.getOwnPropertyDescriptor() メソッドを使用できます。プロパティの複数のプロパティを読み取るには、ECMAScript 2017 で新しく追加された静的メソッド Object.getOwnPropertyDescriptors() を使用できます。このメソッドは、所有されている各プロパティに対して Object.getOwnPropertyDescriptor() を呼び出し、それらを新しいオブジェクトで返します。

let descriptor = Object.getOwnPropertyDescriptor(book, "year_"); 
console.log(descriptor.value); // 2017 
console.log(descriptor.configurable); // false 
console.log(typeof descriptor.get); // "undefined" 
let descriptor = Object.getOwnPropertyDescriptor(book, "year"); 
console.log(descriptor.value); // undefined 
console.log(descriptor.enumerable); // false 
console.log(typeof descriptor.get); // "function"

console.log(Object.getOwnPropertyDescriptors(book)); 
// { 
// edition: { 
// configurable: false, 
// enumerable: false, 
// value: 1, 
// writable: false 
// }, 
// year: { 
// configurable: false, 
// enumerable: false, 
// get: f(), 
// set: f(newValue), 
// }, 
// year_: { 
// configurable: false, 
// enumerable: false, 
// value: 2017, 
// writable: false 
// } 
// }