Heim Web-Frontend js-Tutorial Detaillierte Erläuterung der Datenattribute und Zugriffsattribute von JavaScript-Objekten

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

Jul 09, 2020 pm 03:00 PM
javascript 对象

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);
    }
}
Nach dem Login kopieren

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'
Nach dem Login kopieren

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>
Nach dem Login kopieren

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"]
Nach dem Login kopieren

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;
                // ...
    }
})
Nach dem Login kopieren

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}
Nach dem Login kopieren

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}
Nach dem Login kopieren

数据描述符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;
    }
  }
});
Nach dem Login kopieren

 相关教程推荐: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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

Wie konvertiere ich ein MySQL-Abfrageergebnisarray in ein Objekt? Wie konvertiere ich ein MySQL-Abfrageergebnisarray in ein Objekt? Apr 29, 2024 pm 01:09 PM

So konvertieren Sie ein MySQL-Abfrageergebnis-Array in ein Objekt: Erstellen Sie ein leeres Objekt-Array. Durchlaufen Sie das resultierende Array und erstellen Sie für jede Zeile ein neues Objekt. Verwenden Sie eine foreach-Schleife, um die Schlüssel-Wert-Paare jeder Zeile den entsprechenden Eigenschaften des neuen Objekts zuzuweisen. Fügt dem Objektarray ein neues Objekt hinzu. Schließen Sie die Datenbankverbindung.

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

Was ist der Unterschied zwischen Arrays und Objekten in PHP? Was ist der Unterschied zwischen Arrays und Objekten in PHP? Apr 29, 2024 pm 02:39 PM

In PHP ist ein Array eine geordnete Sequenz, und auf Elemente wird über einen Index zugegriffen. Ein Objekt ist eine Entität mit Eigenschaften und Methoden, die über das Schlüsselwort new erstellt werden. Der Array-Zugriff erfolgt über einen Index, der Objektzugriff über Eigenschaften/Methoden. Es werden Array-Werte und Objektreferenzen übergeben.

Wie geben PHP-Funktionen Objekte zurück? Wie geben PHP-Funktionen Objekte zurück? Apr 10, 2024 pm 03:18 PM

PHP-Funktionen können Daten in eine benutzerdefinierte Struktur einkapseln, indem sie ein Objekt mithilfe einer Return-Anweisung zurückgeben, gefolgt von einer Objektinstanz. Syntax: functionget_object():object{}. Dadurch können Objekte mit benutzerdefinierten Eigenschaften und Methoden erstellt und Daten in Form von Objekten verarbeitet werden.

Was muss ich beachten, wenn eine C++-Funktion ein Objekt zurückgibt? Was muss ich beachten, wenn eine C++-Funktion ein Objekt zurückgibt? Apr 19, 2024 pm 12:15 PM

In C++ sind drei Punkte zu beachten, wenn eine Funktion ein Objekt zurückgibt: Der Lebenszyklus des Objekts wird vom Aufrufer verwaltet, um Speicherlecks zu verhindern. Vermeiden Sie baumelnde Zeiger und stellen Sie sicher, dass das Objekt nach der Rückkehr der Funktion gültig bleibt, indem Sie dynamisch Speicher zuweisen oder das Objekt selbst zurückgeben. Der Compiler optimiert möglicherweise die Kopiegenerierung des zurückgegebenen Objekts, um die Leistung zu verbessern. Wenn das Objekt jedoch anhand der Wertesemantik übergeben wird, ist keine Kopiegenerierung erforderlich.

Was ist das Request-Objekt in PHP? Was ist das Request-Objekt in PHP? Feb 27, 2024 pm 09:06 PM

Das Request-Objekt in PHP ist ein Objekt, das zur Verarbeitung von HTTP-Anfragen verwendet wird, die vom Client an den Server gesendet werden. Über das Request-Objekt können wir die Anforderungsinformationen des Clients abrufen, z. B. die Anforderungsmethode, die Anforderungsheaderinformationen, die Anforderungsparameter usw., um die Anforderung zu verarbeiten und zu beantworten. In PHP können Sie globale Variablen wie $_REQUEST, $_GET, $_POST usw. verwenden, um angeforderte Informationen zu erhalten, aber diese Variablen sind keine Objekte, sondern Arrays. Um Anfrageinformationen flexibler und bequemer bearbeiten zu können, können Sie dies tun

See all articles