Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Datenattribute und Zugriffsattribute von JavaScript-Objekten

Detaillierte Erläuterung der Datenattribute und Zugriffsattribute von JavaScript-Objekten

青灯夜游
青灯夜游nach vorne
2020-07-09 15:00:042467Durchsuche

Detaillierte Erläuterung der Datenattribute und Zugriffsattribute von JavaScript-Objekten

Es gibt zwei Möglichkeiten, Objekte zu erstellen: die erste über den neuen Operator, gefolgt vom Objektkonstruktor, und die zweite über die Objektliteralmethode. Wie unten gezeigt

var person = new Object();
person.name = 'Nicy';
person.age = 21;
person.sayName = function() {
    console.log(this.name);
};        
var person = {
    name: 'Nicy',
    age: 21,
    sayName: function() {
        console.log(this.name);
    }
}

Die mit diesen beiden Methoden erstellten Objekte sind gleich und haben die gleichen Eigenschaften und Methoden. Diese Eigenschaften verfügen über interne Eigenschaftsdeskriptoren, die ihr Verhalten beschreiben.

Object.defineProperty()

Mit Object.defineProperty() können Sie direkt eine Eigenschaft für das Objekt erstellen oder diese ändern die bestehende eine Eigenschaft.

Object.defineProperty(obj, prop, descriptor) erhält drei Parameter:

obj: das Objekt, in dem sich das Attribut befindet

prop: der Attributname, auf den zugegriffen werden soll

Deskriptor: Deskriptorobjekt

Das Deskriptorobjekt enthält sechs Eigenschaften: konfigurierbar, aufzählbar, beschreibbar, Wert, get, set. Um die Eigenschaften der Eigenschaften zu ändern, müssen Sie Object.defineProperty( verwenden. ) Methode.

Der Standardwert der booleschen Eigenschaft der über die beiden oben genannten Methoden ist true. Wenn Sie die Eigenschaftseigenschaften über Object.defineProperty ändern, legen Sie nur die Eigenschaften fest, die geändert werden müssen durch Object Die von .defineProperty erstellte Eigenschaft verfügt über ein boolesches Attribut, dessen Standardwert false ist.

Es gibt zwei Arten von Attributen in ECMAScript: Datenattribute und Accessor-Attribute.

Datenattribut

Datenattribut enthält vier Attributdeskriptoren:

[[Konfigurierbar]]: Gibt an, ob die Eigenschaft neu definiert wird durch Löschen durch Löschen. Können die Eigenschaften der Eigenschaft in eine Accessor-Eigenschaft geändert werden? Die durch die obige Methode hinzugefügten Objekteigenschaften sind standardmäßig „true“.

[[Enumerable]]: Gibt an, ob über die For-In-Schleife auf das Attribut zugegriffen werden kann. Die durch die obige Methode hinzugefügten Objekteigenschaften sind standardmäßig „true“.

[[Writable]]: Gibt an, ob der Wert des Attributs geändert werden kann. Die durch die obige Methode hinzugefügten Objekteigenschaften sind standardmäßig „true“.

[[Wert]]: Enthält den Datenwert dieses Attributs, der gelesen und geschrieben werden kann. Die über die obige Methode hinzugefügten Objekteigenschaften sind standardmäßig undefiniert.

Beschreibbar

var person = {};

Object.defineProperty(person, "name", {
    value: 'Nicy'
})
person.name = 'Lee';  
console.log(person.name)    // 'Nicy'

Object.defineProperty(person, "name", {
    writable: true
})
person.name = 'Lee';
console.log(person.name)    // 'Lee'

Die direkt von Object.defineProperty erstellte Eigenschaft beschreibbar ist standardmäßig auf false und der Wert kann zu diesem Zeitpunkt nicht geändert werden. Ändern Sie den Namen zu Lee. Dies funktioniert nicht im nicht strengen Modus. Es wird ein Fehler gemeldet, der Vorgang wird jedoch ignoriert.

Konfigurierbar

<span style="font-size: 13px;"><span style="color: #0000ff;"></span>var person = {<br>    name: 'Nicy',<br>    age: 21,<br>    sayName: function() {<br>        console.log(this.name);<br>    }<br>}<br><br>Object.defineProperty(person, "name", {<br>    configurable: false<br>})<br><br>delete person.name;    // 操作被忽略,无法通过delete删除属性<br>Object.defineProperty(person, "name", {    // throw error<br>    configurable:true    <br>})     <br>Object.defineProperty(person, "name", {    // throw error<br>    enumerable: false<br>})  <br>Object.defineProperty(person, "name", {     // 由于writable为true,所以可以修改value<br>    value: 'Lucy'<br>})console.log(person.name)    // Lucy<br>Object.defineProperty(person, "name", {    // writable可进行true -> false的单向修改<br>    writable: false<br>})<br>Object.defineProperty(person, "name", {     // throw error<br>    value: 'Lee'<br>})<br>Object.defineProperty(person, "name", {    // throw error,此时writable不可以false -> true<br>    writable: true<br>})<span style="color: #000000;"></span></span>

Um das Konfigurierbare zusammenzufassen: Wenn „Konfigurierbar“ auf „false“ gesetzt ist,

1. Sie können das Attribut nicht durch „Löschen“ löschen, um es neu zu definieren Eigenschaften;

2. Kann nicht in Accessor-Eigenschaften umgewandelt werden

3. Konfigurierbar und aufzählbar, kann nicht geändert werden

4. beschreibbar kann in eine Richtung geändert werden als falsch, kann aber nicht von falsch in wahr geändert werden;

 5. Ob der Wert geändert werden kann, hängt von der Schreibbarkeit ab.

Wenn „configurable“ „false“ ist, verwenden Sie „delete“, um das Attribut zu löschen. Im nicht-strikten Modus wird kein Fehler gemeldet, aber im strikten Modus wird ein Fehler gemeldet nicht änderbar sind, wird ein Fehler gemeldet.

Enumerable

enumerable gibt an, ob die Objekteigenschaften in for...in und Object.keys() aufgezählt werden können.

var person = {};
Object.defineProperty(person, "a", { value : 1, enumerable:true });
Object.defineProperty(person, "b", { value : 2, enumerable:false });
Object.defineProperty(person, "c", { value : 3 }); // enumerable defaults to false
person.d = 4; // 如果使用直接赋值的方式创建对象的属性,则这个属性的enumerable默认为true

for (var i in person) {    
  console.log(i);  
}  //  'a' 和 'd' 

Object.keys(person); // ["a", "d"]

Accessor-Eigenschaften

Accessor-Eigenschaften enthalten vier Eigenschaftsdeskriptoren:

[[Konfigurierbar]]: Gibt an, ob das Attribut kann durch Löschen des Attributs durch Löschen neu definiert werden, ob die Attributeigenschaften geändert werden können und ob das Attribut in ein Datenattribut geändert werden kann. Direkt am Objekt definierte Eigenschaften haben standardmäßig den Wert „true“.

[[Enumerable]]: Gibt an, ob über die For-In-Schleife auf das Attribut zugegriffen werden kann. Direkt am Objekt definierte Eigenschaften haben standardmäßig den Wert „true“.

[[Get]]: Funktion, die beim Lesen von Eigenschaften aufgerufen wird, Standard ist undefiniert.

[[Set]]: Funktion, die beim Schreiben von Eigenschaften aufgerufen wird, Standard ist undefiniert.

var person = {
    name: 'Nicy',
    _age: 21,
    year: 1997,
    _year: 1997,
    sayName: function() {
        console.log(this.name);
    }
}

Object.defineProperty(person, "age", {
    get: function() {
        return this._age;
    },
    set: function(value) {
        this._age = value;
                // ...
    }
})

Mit Object.defineProperty() definierte Accessor-Eigenschaften, deren konfigurierbare und aufzählbare Standardeinstellung „false“ ist.

Konvertierung zwischen Datenattributen und Accessor-Attributen

Object.getOwnPropertyDescriptor-Eigenschaften zum Lesen von Eigenschaften

Verwenden Sie Object.getOwnPropertyDescriptor, um den Eigenschaftsdeskriptor abzurufen:

Object.getOwnPropertyDescriptor(obj, prop)

obj: das Objekt, in dem sich die Eigenschaft befindet;

Prop : der Eigenschaftsname, auf den zugegriffen werden soll.

Datenattribut-> Zugriffsattribut

Das Attribut kann für vorhandene Daten nur eines von Zugriffsdeskriptor und Datendeskriptor sein, wenn eine Eigenschaft plus Get oder Set konvertiert wird in eine Accessoreigenschaft umgewandelt wird, werden der Wert und die Schreibbarkeit seiner Eigenschaft verworfen.

Der folgende Code wandelt das ursprüngliche Datenattribut Jahr des Objekts in ein Accessor-Attribut um:

*Hinweis: Im Get und Set des Accessor-Attributs kann dies nicht verwendet werden Zugriff auf die Eigenschaft selbst, andernfalls kommt es zu einer unendlichen Rekursion und zu Speicherverlusten.

// 设置get和set其中任意一个即可转换为访问器属性
Object.defineProperty(person, "year", {
    get: function() {
//        return this,year;    // error
        return this._year;    
    },
    set: function(value) {
//             this.year = value;  // error
        this._year= value;
    }
})

var descriptor = Object.getOwnPropertyDescriptor(person, 'year');
console.log(descriptor);    // {get: ƒ, set: ƒ, enumerable: true, configurable: true}

Verwenden Sie im ursprünglichen Datenattributjahr Object.defineProperty(), um get oder set für das Attribut festzulegen, das in ein Accessor-Attribut umgewandelt werden kann.

Accessor-Eigenschaften -> Dateneigenschaften

将访问器属性转换为数据属性,只需要给现有访问器属性设置value或writable这两个属性描述符中的任意一个即可,其原有的get和set就会被废弃,从而转换为数据属性。

上面为person定义的访问器属性age,通过Object.defineProperty()只设置了get和set,所以configurable默认为false,不可以将其转换为数据属性。可以在访问器属性和数据属性间相互转化的属性其configurable特性值必须为true。

如下代码,我们为person新定义一个访问器属性job,将其configurable设置为true ,并将其转换为数据属性:

Object.defineProperty(person, "job", {
    configurable: true,
    enumerable: true,
    get: function() {
        return this._job;
    },
    set: function(value) {
        this._job = value;
    }
})

// 设置value和writable其中任意一个即可转换为数据属性        
Object.defineProperty(person, "job", {
    value: 'worker',
    writable: true
})

var descriptor = Object.getOwnPropertyDescriptor(person, 'job');
console.log(descriptor);    // {value: "worker", writable: true, enumerable: true, configurable: true}

数据描述符value、writable 和访问器描述符get、set不能同时设置,否则会报错。

Object.defineProperties()

通过Object.defineProperties()可以一次性为对象定义多个属性。

var person = {};
Object.defineProperties(person, {
  name: {
    value: 'Nicy',
    writable: true
  },
  _age: {
    value: 21,
    enumerable: true,
    writable: true,
    configurable: true
  },
   age: {
    get: function() {
    return this._age;
    },
    set: function(value) {
    this._age = value;
    }
  }
});

 相关教程推荐:JavaScript视频教程

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Datenattribute und Zugriffsattribute von JavaScript-Objekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen