Einführung in die Verwendung von Object.defineProperty in JS (Codebeispiel)

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung von Object.defineProperty in JS (Codebeispiele). Ich hoffe, dass er für Sie hilfreich ist.

In JavaScript fügen Sie die Eigenschaften eines Objekts häufig über die folgenden Methoden hinzu oder ändern sie:

obj.name = 'John'

Darüber hinaus können Sie die Eigenschaften eines Objekts auch über die Object.defineProperty hinzufügen oder ändern ()-Methode. Noch wichtiger ist, dass die Methode zusätzlich zum Zielobjekt obj und dem Eigenschaftsnamen prop auch den Eigenschaftsdeskriptor übergeben kann, um komplexere Eigenschaften zu erreichen. Ein Attributdeskriptor ist ein Objekt, das in zwei Formen vorliegt: die eine ist ein Datendeskriptor und die andere ist ein Zugriffsdeskriptor.

Object.defineProperty(obj, prop, descriptor)

Datendeskriptor

Der Datendeskriptor unterstützt die folgenden Funktionen:

aufzählbar: Gibt an, ob das Objekt aufgezählt werden kann. Der Standardwert ist false, was bedeutet, dass diese Eigenschaft nicht in for...in und Object.keys() aufgezählt werden kann und sich auch auf JSON.stringify() auswirkt.

konfigurierbar: Gibt an, ob die Objektattribute gelöscht werden können und ob andere Attribute außer Wert und beschreibbaren Attributen geändert werden können. Der Standardwert ist „false“, was bedeutet, dass das Attribut nicht gelöscht und die Merkmale nicht geändert werden können.

Wert: Der dem Attribut entsprechende Wert, der Standardwert ist undefiniert.

schreibbar: Der Standardwert ist „false“, was bedeutet, dass es schreibgeschützt ist und dieser Eigenschaft keinen Wert zuweisen kann. Im strikten Modus führt die Zuweisung eines Werts zu einer schreibgeschützten Eigenschaft zu einem Fehler. Im entspannten Modus wird die Zuweisung von Werten zu schreibgeschützten Eigenschaften nicht wirksam.

// 示例1，等同于 obj.name = 'John'
var obj = {}
Object.defineProperty(obj, 'name', { 
  value: 'John',
  writable: true,
  configerable: true,
  enumerable: true
})

// 示例2，将 name 属性设置为只读
'use strict'
var obj = {}
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: false,
  configerable: true,
  enumerable: true
})
obj.name = 'Joy'  // TypeError

// 示例3，将 name 属性设置为不可枚举
var obj = {}
Object.defineProperty(obj, 'name', { 
  value: 'John',
  writable: true,
  configerable: true,
  enumerable: false
})
console.log(obj.name)  // John
console.log(Object.keys(obj))  // []

// 示例4，将 name 属性设置不可配置(不可删除，除value和writable特性外的其它特性不可被修改)
var obj = {}
Object.defineProperty(obj, 'name', { 
  value: 'John',
  writable: true,
  configerable: false,
  enumerable: true
})
delete obj.name  // false
Object.defineProperty(obj, 'name', { enumerable: false })  // TypeError

Speicherdeskriptor

Der Speicherdeskriptor unterstützt die folgenden Funktionen:

aufzählbar: Wie oben.

konfigurierbar: Wie oben.

set: Legen Sie die Setter-Methode fest. Wenn ein Attribut geändert wird, wird diese Methode mit dem neuen Attributwert als Parameter ausgeführt. Der Standardwert ist undefiniert.

get: Legen Sie die Getter-Methode fest, die ausgeführt wird, wenn auf die Eigenschaft zugegriffen wird. Der Standardwert ist undefiniert.

// 示例5，使用 get 和 set，计数属性读写的次数
var obj = {}, name = '', count1 = 0, count2 = 0
Object.defineProperty(obj, 'name', { 
  get: function () { 
    console.log('Read ' + (++count1) + ' times')
    return name
  },
  set: function (newVal) {
    console.log('Write ' + (++count2) + ' times')
    name = newVal
  }
})
obj.name  // Read 1 times
obj['name']  // Read 2 times
obj.name = 'Joy'  // Write 1 times
obj.name = 'Jack'  // Write 2 times

Hinweise

Darüber hinaus sind drei Punkte zu beachten: Erstens können Attribute mit zwei unterschiedlichen Deskriptoren nicht gemeinsam genutzt werden; zweitens werden die Merkmale, die nicht übergeben werden, nicht gemeinsam genutzt Auf den Standardwert gesetzt, und wenn die Eigenschaften geändert werden, bleiben die nicht eingeführten Eigenschaften wie folgt:

Object.defineProperty(obj, 'name', { value: 'John' })
// 属性是只读，不可配置，且不可枚举的。等同于
Object.defineProperty(obj, 'name', { 
  value: 'John',
  writable: false,
  configerable: false,
  enumerable: false
})

obj.name = 'John'
// 属性可写的，可配置的，可枚举的。等同于
Object.defineProperty(obj, 'name', { 
  value: 'John',
  writable: true,
  configerable: true,
  enumerable: true
})

Praktische Anwendung

Zum Beispiel gibt es ein Objekt Student , das zwei Attribute hat: Name und Alter. Wenn Sie nicht möchten: Was soll ich tun, wenn das Alter zu hoch oder zu niedrig eingestellt ist? Wir können eine Setter- und Getter-Methode hinzufügen. Jedes Mal, wenn wir das Alter ändern möchten, können wir das Attribut über die Setter-Methode ändern und das Attribut über die Getter-Methode lesen:

function Student (name, age) {
  this.name = name
  this.setAge = function (val) { 
    age = val
    if (age < 0) age = 0
    if (age > 100) age = 100
  }
  this.getAge = function () { return age }
}

var s = new Student('John', 16)
s.setAge(25)
console.log(s.getAge())  // 25
s.setAge(-5)
console.log(s.getAge())  // 0
s.setAge(500)
console.log(s.getAge())  // 100

Es scheint schön, aber jedes Mal Das Attribut wird gelesen oder geändert. Die Setter- oder Getter-Methode wird einmal aufgerufen, was viel Code hinzufügt. Mit der Object.defineProperty-Methode ist kein zusätzlicher Code erforderlich und die Eigenschaften können direkt auf die primitivste Weise gelesen und geändert werden:

function Student (name, age) {
  this.name = name
  var _age = age
  Object.defineProperty(this, 'age', {
    get: function () { return _age },
    set: function (val) {
      _age = val
      if (_age < 0) _age = 0
      if (_age > 100) _age = 100
    }
  })
}

var s = new Student('John', 16)
s.age = 25
console.log(s.age)  // 25
s.age = -5
console.log(s.age)  // 0
s.age = 500
console.log(s.age)  // 100

Stapelverarbeitung

Die Object.defineProperties()-Methode können in Stapeln hinzugefügt oder geändert werden. Attribute:

var obj = {}
Object.defineProperties(obj, {
  name: { value: 'John', emunerable: true },
  age: { value: 20, emunerable: true }
})

Die Methode Object.create() kann beim Erstellen von Objekten Attribute in Stapeln hinzufügen:

var obj = Object.create(Object.prototype, {
  name: { value: 'John', emunerable: true },
  age: { value: 20, emunerable: true } 
})

Sie können auch Objekte erstellen, die Setter- und Getter-Attribute enthalten Literale:

var obj = {
  get name() {
    return 'John'
  },
  set name(val) {
    console.log(val)
  },
  get age() {
    return 18
  }
}

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von Object.defineProperty in JS (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!