Detaillierte Erläuterung neuer Funktionen und destrukturierende Zuweisung von Objekten in ES6 (Codebeispiel)

Dieser Artikel enthält eine detaillierte Erklärung (Codebeispiel) der neuen Funktionen und der Destrukturierungszuweisung von Objekten. Ich hoffe, dass er für Sie hilfreich ist.

ES6 verbessert die Verwendung von Objekten durch wörtliche Syntaxerweiterung, neue Methoden, verbesserte Prototypen usw. und vereinfacht den Datenextraktionsprozess von Objekten durch Dekonstruktion.

Literale Syntaxerweiterung

Die Verwendung von Literalen zum Erstellen von Objekten im ES6-Modus ist prägnanter. Bei Objekteigenschaften kann der Anfangswert der Eigenschaft abgekürzt und verwendet werden Berechneter Eigenschaftsname. Bei der Definition von Objektmethoden werden Doppelpunkte und Funktionsschlüsselwörter eliminiert:

// Demo1
var value = "name", age = 18
var person = {
  age, // age: age
  ['my' + value]: 'Jenny',  // myname
  sayName () {  // sayName: function()
    console.log(this.myname)
  }
}
console.log(person.age) // 18
console.log(person.myname) // Jenny
person.sayName(); // Jenny

Für wiederholt definierte Objektliteralattribute führt der strenge ES5-Modus Prüfungen auf doppelte Attribute durch und löst einen Fehler aus ES6 hat diesen Mechanismus entfernt, unabhängig vom strikten oder nicht strikten Modus, Attribute mit demselben Namen nehmen den letzten Wert an.

// demo2
var person = {
  ['my' + value]: 'Jenny',
  myname: 'Tom',
  myname: 'Lee',
}
console.log(person.myname) // Lee

Neue Methoden

Ein Designziel, das seit ES5 verfolgt wird, besteht darin, die Erstellung neuer globaler Funktionen zu vermeiden und keine neuen Methoden für object.prototype zu erstellen.
Um die Implementierung bestimmter Aufgaben zu erleichtern, führt ES6 einige neue Methoden für das globale Objektobjekt ein.

Object.is( )

ES6 führt die Methode Object.is() ein, um die ungenaue Berechnung des Gleichheitsoperators zu kompensieren.

Der Kongruenzoperator löst beim Vergleich keine Typumwandlung aus. Die Ergebnisse von Object.is() sind ähnlich, jedoch für +0 und -0 (zwei verschiedene Entitäten in der JS-Engine) und spezielle Die Vergleichsergebnisse von Die Werte NaN sind unterschiedlich, wie im Beispiel gezeigt:

// demo3
console.log(5 == '5') // true
console.log(5 === '5') // false
console.log(Object.is(5, '5')) // false

console.log(+0 == -0) // true
console.log(+0 === -0) // true
console.log(Object.is(+0, -0)) // false

console.log(NaN == NaN) // false
console.log(NaN === NaN) // false
console.log(Object.is(NaN, NaN)) // true

Zusammenfassend führt Object.is() eine strengere Gleichheitsbeurteilung aller Werte durch. Ob Object.is() anstelle des Gleichheitsoperators (===) verwendet werden soll, hängt natürlich davon ab, ob sich diese Sonderfälle auf Ihren Code auswirken.

Object.assign( )

ES6 fügt Object.assign() hinzu, um den Mixin-Modus zu implementieren, bei dem ein Objekt die Eigenschaften und Methoden eines anderen Objekts empfängt. Beachten Sie, dass es empfangen und nicht vererbt wird. Beispielsweise wird das Objekt in Demo1 empfangen:

// demo4
var friend = {}
Object.assign(friend, person)
friend.sayName() // Jenny
console.log(friend.age) // 18
console.log(Object.getPrototypeOf(friend) === person) // false

Vor Object.assign() haben viele JS-Bibliotheken die Mischmethode mixin() angepasst, um die Objektkombination zu implementieren :

function mixin(receiver, supplier) {
  Object.keys(supplier).forEach(function (key) {
    receiver[key] = supplier[key]
  })
  return receiver
}

Es ist ersichtlich, dass die Methode mixin() die Zuweisungsoperation „=" verwendet und das Accessor-Attribut nicht kopieren kann führt nur den Zuweisungsvorgang aus. Die Empfängereigenschaften werden schließlich in Dateneigenschaften des empfangenden Objekts umgewandelt. Ein Beispiel lautet wie folgt:

// demo5
var animal = {
  name: 'lili',
  get type () {
    return this.name + type
  },
  set type (news) {
    type = news
  }
}
animal.type = 'cat'
console.log(animal.type) // lilicat

var pet = {}
Object.assign(pet, animal)
console.log(animal) // { name: 'lili', type: [Getter/Setter] }
console.log(pet) // { name: 'lili', type: 'lilicat' }

Object.assign()Object.setPrototypeOf( )

Normalerweise wird der Prototyp angegeben, wenn er über den Konstruktor oder Object.create() erstellt wird. ES6 fügt die Methode Object.setPrototypeOf() hinzu, um den Prototyp eines Objekts zu ändern.

Erstellen Sie beispielsweise ein Codiererobjekt, das das Personenobjekt erbt, und ändern Sie dann den Prototyp des Codiererobjekts:

// demo6
let person = {
  myname: 'Jenny',
  sayName () {
    console.log(this.myname)
  }
}

// 创建原型为 person 的 coder 对象
let coder = Object.create(person)
coder.sayName() // Jenny
console.log(Object.getPrototypeOf(coder) === person) // true

let hero = {
  myname: 'lee',
  sayName () {
    console.log(this.myname)
  }
}

// 改变 coder 对象的原型为 hero
Object.setPrototypeOf(coder, hero)
coder.sayName() // lee
console.log(Object.getPrototypeOf(coder) === hero) // true

Der Objektprototyp wird in der internen proprietären Eigenschaft [[Prototyp]] gespeichert. ], rufen Sie Object.getPrototypeOf() auf, geben Sie den darin gespeicherten Wert zurück und rufen Sie Object.setPrototypeOf() auf, um seinen Wert zu ändern. Diese Methode stärkt den Betrieb von Objektprototypen. Der nächste Abschnitt konzentriert sich auf andere Möglichkeiten zum Betrieb von Prototypen.

Erweiterter Objektprototyp

Prototyp ist die Grundlage der JS-Vererbung. ES6 hat viele Verbesserungen am Prototyp vorgenommen, um den Prototyp flexibler zu nutzen. Zusätzlich zum neuen Object.setPrototypeOf() zum Ändern des Prototyps wird auch das Super-Schlüsselwort eingeführt, um den Zugriff auf den Prototyp zu vereinfachen.

Super-Schlüsselwort

ES6 führt Super ein, um auf den Objektprototyp zuzugreifen Bequemer: Im vorherigen Abschnitt wurde vorgestellt, dass ES5 Object.getPrototypeOf() verwenden kann, um den Objektprototyp zurückzugeben. Ein Beispiel veranschaulicht die Zweckmäßigkeit von Super. Wenn ein Objekt Prototypmethoden wiederverwenden und seine eigenen Methoden neu definieren muss, lauten die beiden Implementierungsmethoden wie folgt:

// demo7
let coder1 = {
  getName () {
    console.log("coder1 name: ")
    Object.getPrototypeOf(this).sayName.call(this)
  }
}

// 设置 coder1 对象的原型为 hero（demo6）
Object.setPrototypeOf(coder1, hero)
coder1.getName() // coder1 name: lee

let coder2 = {
  getName () {
    console.log("coder2 name: ")
    super.sayName()
  }
}

Object.setPrototypeOf(coder2, hero)
coder2.getName() // coder2 name: lee

Rufen Sie in der getName-Methode des coder1-Objekts (this) auf. Es ist auch erforderlich, sicherzustellen, dass es verwendet wird. Die Prototypmethode ist relativ kompliziert, und bei der Mehrfachvererbung treten rekursive Aufrufstapel-Überlauffehler auf. Die direkte Verwendung von Super ist jedoch sehr einfach und sicher.

Beachten Sie, dass Super in der Abkürzungsmethode verwendet werden muss, da sonst ein Fehler gemeldet wird. Beispielsweise weist der folgende Code beim Ausführen einen Syntaxfehler auf:

let coder4= {
  getName: function () { // getName () 正确
    super.sayName() // SyntaxError: 'super' keyword unexpected here
  }

Weil im Beispiel getName wird Ein von der anonymen Funktion definiertes Attribut. Im aktuellen Kontext ist es illegal, eine Super-Referenz aufzurufen. Wenn Sie es nicht verstehen, können Sie sich die abhängigen Objekte der Methode genauer ansehen.

Untergeordnete Objekte von Methoden

Vor ES6 waren „Methoden“ Objekteigenschaften mit Funktionen und nicht mit Daten. In ES6 wurden Methoden offiziell so definiert, dass sie [[HomeObject]] innerhalb eines Attributs haben Funktionen. Das Attribut

[[HomeObject]] speichert das untergeordnete Objekt der aktuellen Methode, zum Beispiel:

let coder5 = {
  sayName () {
    console.log("I have HomeObject")
  }
}

function shareName () {
    console.log("No HomeObject")
}

coder5 Der Attributwert [[HomeObject]] der Methode sayName() des Objekts ist coder5, und die definierte Funktion shareName() weist es dem Objekt nicht zu, sodass seine [[HomeObject]]-Eigenschaft nicht definiert ist, was bei Verwendung von Super wichtig ist.

Super besteht darin, Object.getPrototypeOf() für das Attribut [[HomeObject]] aufzurufen, um die Prototypreferenz zu erhalten, dann den Prototyp zu durchsuchen, um die Funktion mit demselben Namen zu erhalten, und schließlich diese Bindung so festzulegen, dass sie aufgerufen wird entsprechende Methode.

Destrukturierende Zuweisung

ES6 bietet eine neue Funktion für Array- und Objektliterale – Destrukturierung, die den Prozess der Datenextraktion vereinfachen und homogenen Code reduzieren kann. Ein grundlegendes Syntaxbeispiel für die Destrukturierung lautet wie folgt:

let user = {
  name: 'jenny',
  id: 18
}
let {name, id} = user
console.log(name, id) // jenny 18

注意在这段代码中，user.name 存储在与对象属性名同名的 name 变量中。

默认值

如果解构时变量名称与对象属性名不同，即在对象中不存在，那么这个变量会默认为undefined：

let user = {
  name: 'jenny',
  id: 18
}
let {name, id, job} = user
console.log(name, id, job) // jenny 18 undefined

非同名变量赋值

非同名变量的默认值为undefined，但更多时候是需要为其赋值的，并且会将对象属性值赋值给非同名变量。ES6 为此提供了扩展语法，与对象字面量属性初始化程序很像：

let user = {
  name: 'jenny',
  id: 18
}
let {name, id = 16, job = 'engineer'} = user
console.log(name, id, job) // jenny 18 engineer

let {name: localName, id: localId} = user
console.log(localName, localId) // jenny 18

let {name: otherName = 'lee', job: otherJob = 'teacher'} = user
console.log(otherName, otherJob) // jenny teacher

可以看出这种语法实际与对象字面量相反，赋值名在冒号左，变量名在右，并且解构赋值时，只是更新了默认值，不能覆盖对象原有的属性值。

嵌套解构

解构嵌套对象的语法仍然类似对象字面量，使用花括号继续查找下层结构：

let user = {
  name: 'jenny',
  id: 18,
  desc: {
    pos: {
      lng: 111,
      lat: 333
    }
  }
}

let {desc: {pos}} = user
console.log(pos) // { lng: 111, lat: 333 }

let {desc: {pos: {lng}}} = user
console.log(lng) // 111

let {desc: {pos: {lng: longitude}}} = user
console.log(longitude) // 111

对象类别

ES6 规范定义了对象的类别，特别是针对浏览器这样的执行环境。

普通（Ordinary）对象
具有 JS 对象所有的默认内部行为

特异（Exotic）对象
具有某些与默认行为不符的内部行为

标准（Standard）对象
ES6 规范中定义的对象
可以是普通对象或特异对象，例如 Date、Array 等

内建对象
脚本开始执行时存在于 JS 执行环境中的对象
所有标准对象都是内建对象

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung neuer Funktionen und destrukturierende Zuweisung von Objekten in ES6 (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!