Ausführliche Erläuterung der Eigenschaften und Merkmale in JavaScript-js-Tutorial-php.cn

Attribute und Merkmale in JavaScript sind zwei völlig unterschiedliche Konzepte. Hier werde ich das Gelernte nutzen, um die Attribute und Merkmale in JavaScript gründlich zu verstehen.

Der Hauptinhalt lautet wie folgt:

Verstehen Sie die Natur von Objekten in JavaScript, die Beziehung zwischen Objekten und Klassen und die Beziehung zwischen Objekten und Referenztypen

Anleitung Objektattribute klassifizieren

Die Eigenschaften von Attributen verstehen

Teil 1: Die Natur von Objekten, die Beziehung zwischen Objekten und Klassen und die Beziehung zwischen Objekten und Referenztypen in JavaScript verstehen

Die Natur von Objekten: ECMA-262 definiert ein Objekt als: eine Sammlung ungeordneter Attribute, deren Attribute Grundwerte, Objekte oder Funktionen umfassen können. Das heißt, ein Objekt ist eine Menge von Werten in keiner bestimmten Reihenfolge. Jede Eigenschaft oder Methode des Objekts hat einen Namen, und dieser Name wird einem Wert zugeordnet. Daher ist die Essenz eines Objekts eine Hash-Tabelle: Es handelt sich um eine Reihe von Name-Wert-Paaren, und die Werte können Daten oder Funktionen sein.

Die Beziehung zwischen Objekten und Klassen: In JavaScript haben Objekte und Klassen keine Beziehung. Dies liegt daran, dass es in ECMAScript überhaupt kein Klassenkonzept gibt und sich seine Objekte von denen in anderen klassenbasierten Sprachen unterscheiden.

Die Beziehung zwischen Objekten und Referenztypen: Objekte und Referenztypen sind nicht gleichwertig, da jedes Objekt auf der Grundlage eines Referenztyps erstellt wird.

Teil 2: So klassifizieren Sie Objekteigenschaften

Objekte, die von Konstruktoren oder Objektliteralmethoden erstellt wurden, verfügen über Eigenschaften und Methoden (solange Eigenschaften und Methoden erwähnt werden, müssen sie zum Objekt gehören; as Solange ein Objekt erwähnt wird, muss es über Attribute und Methoden verfügen (außer Anpassung), wobei Attribute in Datenattribute und Zugriffsattribute unterteilt werden können. Ihre Unterschiede sind wie folgt:

Datenattribute werden im Allgemeinen verwendet Beim Speichern von Datenwerten enthalten Accessor-Attribute keine Datenwerte

Accessor-Attribute werden hauptsächlich für Get/Set-Operationen verwendet

Teil 3: Die Eigenschaften von Attributen verstehen

ECMAScript definiert das Konzept von Attributen, um verschiedene Merkmale von Objekteigenschaften zu beschreiben. Das heißt, Merkmale unterscheiden sich von Attributen. Merkmale werden zur Beschreibung von Attributen verwendet. Im Folgenden erkläre ich jeweils:

Datenattribute und ihre Eigenschaften

Accessor-Attribute und ihre Eigenschaften

So verwenden Sie die Methode Object.defineProperties(), um mehrere Attribute zu definieren

So verwenden Sie die Object.getOwnPropertyDescripter()-Methode, um den Deskriptor der Eigenschaft zu lesen, um die Eigenschaften der Eigenschaft zu lesen

1. Datenattribute und ihre Eigenschaften

Wir haben gerade sagte, dass Datenattribute zum Speichern von Datenwerten verwendet werden, sodass das Datenattribut einen Speicherort für den Datenwert hat, von dem aus der Wert gelesen und geschrieben werden kann. Das Datenattribut verfügt über 4 Merkmale, die sein Verhalten beschreiben. Da ECMAScript vorschreibt, dass auf die Merkmale des Attributs in JavaScript nicht direkt zugegriffen werden kann (Hinweis: Es ist nicht unzugänglich), setzen wir es in zwei Sätze eckiger Klammern. Wie folgt:

[[Konfigurierbar]]: Der Standardwert ist wahr, a. Gibt an, ob das Attribut durch Löschen neu definiert werden kann. b. c. Möglichkeit, Attribute von Datenattributen in Accessorattribute zu ändern

[[Enumerable]]: Der Standardwert ist wahr und gibt an, ob das Attribut über eine For-In-Schleife zurückgegeben werden kann (also: wenn es falsch ist , dann kann die for-in-Schleife die Eigenschaften, in denen sie sich befindet, nicht auflisten)

[[Writable]]: Der Standardwert ist true und gibt an, ob der Wert der Eigenschaft geändert werden kann, was sich von unterscheidet [[Konfigurierbar]] unter.

[[Wert]]: Der Standardwert ist der Attributwert des Attributs. Wir können den Attributwert an dieser Position lesen.

Hinweis: Die obige Standardeinstellung bezieht sich auf die Eigenschaften, die dem durch den Konstruktor oder Objektliteral erstellten Objekt gehören, nicht auf die unten vorgestellte Methode Object.defineProperty()

Diese Funktionen sind vorhanden sind Standardwerte, aber was ist, wenn diese Standardwerte nicht unseren Wünschen entsprechen? Natürlich handelt es sich um eine Modifikation! Wir können die Standardeigenschaften von Eigenschaften über die Methode Object.defineProperty() ändern. Englisch defineProperty bedeutet das Definieren von Eigenschaften. Diese Methode empfängt drei Parameter: das Objekt, in dem sich die Eigenschaft befindet, den Namen der Eigenschaft und ein Deskriptorobjekt. Das dritte Parameterdeskriptorobjekt wird durch die Objektliteralmethode erstellt, und die darin enthaltenen Attribute und Attributwerte speichern tatsächlich die zu ändernden Merkmale und Attributwerte.

Lassen Sie uns einige Beispiele verwenden, um es genauer zu verstehen.

var person={};
Object.defineProperty(person,"name",{
  writable:false,
  value:"zhuzhenwei"
});
console.log(person.name);//zhuzhenwei
person.name="heting";
console.log(person.name);//zhuzhenwei

Nach dem Login kopieren

Hier habe ich ein Objekt mit der Objektliteralmethode erstellt, aber nicht gleichzeitig Methoden und Eigenschaften erstellt. Stattdessen wird die Methode Object.defineProperty() verwendet, um Eigenschaften zu erstellen und Standardwerte zu ändern. Hier ist „writable“ auf „false“ gesetzt. Wenn ich also später versuche, „person.name“ zu ändern, ist es ungültig.

var person={};
Object.defineProperty(person,"name",{
  value:"zhuzhenwei"
});
console.log(person.name);//zhuzhenwei
person.name="heting";
console.log(person.name);//zhuzhenwei

Nach dem Login kopieren

Achten Sie auf dieses Beispiel. In diesem Beispiel habe ich writable:false gelöscht. Dies liegt daran, dass bei der Einführung der Funktionen die ersten drei standardmäßig auf „true“ gesetzt waren, was bei der Erstellung des Objekts und der Erstellung der Eigenschaften abgerufen wurde. Für Eigenschaften, die durch Aufrufen der Methode Object.defineProperty() erstellt wurden, sind die Standardwerte der ersten drei Eigenschaften falsch. Bitte beachten Sie hier.

var person={};
Object.defineProperty(person,"name",{
  value:"zhuzhenwei",
  configurable:false
});
console.log(person.name);//zhuzhenwei
delete person.name;
console.log(person.name);//zhuzhenwei

Nach dem Login kopieren

Hier setzen wir die Eigenschaft des neu erstellten Attributnamens auf configurable:false; löschen Sie also das Attribut unten Der Vorgang ist ungültig. Gemäß b ist ersichtlich, dass die Konfiguration konfigurierbar ist, der Standardwert falsch ist und nicht geändert werden kann, selbst wenn er entfernt wird.

var person={};
Object.defineProperty(person,"name",{
  value:"zhuzhenwei",
  configurable:true
});
console.log(person.name);//zhuzhenwei
delete person.name;
console.log(person.name);//undefined

Nach dem Login kopieren

在这里我将默认的configurable的值由默认的false修改为了true，于是变成了可配置的，那么最后就成功删除了。

var person={};
Object.defineProperty(person,"name",{
  value:"zhuzhenwei",
  configurable:false
});
console.log(person.name);//zhuzhenwei
Object.defineProperty(person,"name",{
  value:"zhuzhenwei",
  configurable:true
});
console.log(person.name);//Uncaught TypeError: Cannot redefine property: name(…)

Nach dem Login kopieren

如果之前已经设置成为了false，那么后面再改成true也是徒劳的，即：一旦把属性设置成为不可配置的，就不能再把它变回可配置了。

console.log(person.name);//Uncaught TypeError: Cannot redefine property: name(…)
var person={};
Object.defineProperty(person,"name",{
  value:"zhuzhenwei",
});
console.log(person.name);//zhuzhenwei
Object.defineProperty(person,"name",{
  value:"zhuzhenwei",
  configurable:true
});
console.log(person.name);//Uncaught TypeError: Cannot redefine property: name(…)

Nach dem Login kopieren

这里可以说明，即使前一步我们不管默认的configurable:false,后面得到的仍是不可配置。于是，可以得出结论，为了可配置，必须在第一次调用Object.defineProperty()函数时就将默认的值修改为true。

2.访问器属性及其特性　　

之前提到，访问器属性不包含数据值，他们包含一对getter函数和setter函数（这两个函数不是必须的）。在读取访问器属性时，会调用getter函数，这个函数负责返回有效的值；在写入访问器属性是，会调用setter函数并传入新值，这个函数负责决定如何处理数据。同样，由于不能通过JavaScript来直接访问得到访问器属性的特性，所以下面列出的特性将由[[]]括起来以作区分。

[[Configurable]]:默认值为true，a、表示能否通过delete删除属性从而重新定义属性 b、能否修改属性的特性 c、能够把属性由访问器属性修改为数据属性

[[Enumerable]]:默认值为true，表示能否通过for-in循环返回该属性(所以：如果为false，那么for-in循环没法枚举它所在的属性)

[[Get]]：在读取属性时调用的函数。默认值为undefined 关键：特性可以是一个函数

[[Set]]: 在写入属性时调用的函数。默认值为undefined　关键：特性可以是一个函数由于get和set函数也属于属性的特性，那么他们就有可能（说有可能是因为这两个函数也不是必须的）出现在Object.defineproperty的第三个参数描述符对象的属性中。

注意：1.相对于数据属性，我们发现访问器属性中没有writable特性和value特性。这是因为访问器属性不包含数据值，那么我们怎么当然就不可修改属性的值（用不到writable特性），更不用考虑value了。

　　　2.访问器属性不能直接定义，必须是用Object.defineProperty()来定义。（通过这个规定我们就能准确地判断出访问器属性和数据属性了）

通过下面这个例子来深入理解：

var book={
  _year:2004,
  edition:1
};
Object.defineProperty(book,"year",{
  get:function(){<br>　　　　　　　　　　　　return this._year;
  },
  set:function(newValue){
    if(newValue>2004){
      this._year=newValue;
      this.edition+=newValue-2004;
    }
  }
});
book.year=2005;
console.log(book.edition);//2

Nach dem Login kopieren

几个需要深入理解的地方：

1.访问器属性不能直接定义，必须使用Object.defineProperty()来定义，且该属性具有set和ger特性，于是可以判断，_year和edition是数据属性，而year是访问器属性。

2.我们看到_year这个数据属性前面是以_(下划线)开头的，这个一种常用的记号，用于表示只能通过对象方法访问的属性。从上面的例子中可以看到get相当于描述符对象的一个方法，而_year正是在这个对象方法访问的属性。而edition既可以通过对象方法访问，也可以由对象直接访问。

3.book.year表示正在读取访问器属性，这时会调用get函数，并返回了2004这个有效的值。

4.book.year=2005表示写入访问器属性，这时会调用set函数并传入新值，即将2005传给newValue，这个函数决定如何处理数据。

5.这时使用访问器属性的常见方法-即设置一个属性的值会导致其他属性发生变化。

3.如何利用Object.defineProperties()方法定义多个特性

显然，一个对象不可能只具有一个属性，因此，定义多个属性的可能性很大，于是JavaScript提供了Object.defineProperties()方法解决这个问题。这个方法接收两个参数，第一个是要定义属性所在的对象，第二个是一个对象字面量方法创建的对象，对象的属性名即为要定义的特姓名，对象的属性值又是一个对象，这个对象里的属性名和属性值分别是特性名和特性值（这里不是很好理解，看例子即可）。

var book={};
Object.defineProperties(book,{
  _year:{
    writable:true，
    value:2004
  },
  edition:{
    writable:true,
    value:1
  },
  year:{
    get:function(){
      return this._year;
    },
    set:function(){
      if(newValue>2004){
        this._year=newValue;
        this.edition+=newValue-2004;
      }
    }
  }
});

Nach dem Login kopieren

4.如何利用Object.getOwnPropertyDescripter()方法读取属性的描述符以读取属性的特性

　　我们可以使用Object.getOwnPropertyDescripter()方法来取得给定属性的描述符。getOwnPropertyDescripter即为取得自身属性描述符的意思。这个方法接收两个参数：属性所在的对象要要读取其描述符的属性名称。返回一个对象。

　　对于访问器属性而言，这个对象的属性有configurable、enumerable、get和set；

　　对于数据属性而言，这个对象的属性有configurable、enumerable、writable和value。

var book={};
Object.defineProperties(book,{
  _year:{
    value:2004
  },
  edition:{
    value:1
  },
  year:{
    get:function(){
      return this._year;
    },
    set:function(){
      if(newValue>2004){
        this._year=newValue;
        this.edition+=newValue-2004;
      }
    }
  }
});
var descriptor=Object.getOwnPropertyDescriptor(book,"_year");
console.log(descriptor.value);//2004
console.log(descriptor.configurable);//false 因为通过Object.defineProperties()方法创建的属性的特性configurable enumerable都是false
console.log(typeof descriptor.get);//undefined 注意：这是数据属性，是不具有get特性的
var descriptor=Object.getOwnPropertyDescriptor(book,"year");
console.log(descriptor.value);//undefined
console.log(descriptor.enumerable);//false
console.log(typeof descriptor.get);//function get虽然是属性的一个特性，但是它也是函数

Nach dem Login kopieren

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，同时想要关注更多的相关内容请关注PHP中文网（www.php.cn）！