Eine erste Einführung in objektorientiertes JavaScript

JS-objektorientiertes Wissen ist der grundlegendste Wissenspunkt für Einsteiger. Im Folgenden finden Sie eine detaillierte Einführung in js-objektorientiertes Wissen anhand des Beispielcodes dieses Artikels.

Klassendeklaration von

1 🎜>2. ES6-Klasse

function Animal() {
 this.name = 'name'
}
// 实例化
new Animal()

Vererbung der Klasse

class Animal {
 constructor() {
  this.name = 'name'
 }
}
// 实例化
new Animal()

1. Implementiert mit Hilfe der Konstruktorvererbung

Prinzip: Ändern Sie den this-Zeiger der Unterklasse beim Ausführen, aber die Attribute in der Prototypenkette der übergeordneten Klasse werden nicht vererbt, was eine unvollständige Vererbung darstellt

2. Implementieren Sie die Vererbung mithilfe der Prototypenkette

Prinzip: Prototypenkette, aber wenn die Attribute im übergeordneten Element vorhanden sind Wenn die Klasse in einer Unterklasseninstanz geändert wird, ändern sich die Eigenschaften in anderen Instanzen. Diese Eigenschaft ändert auch das untergeordnete Element, was ebenfalls eine unvollständige Vererbung ist

function Parent() {
 this.name = 'Parent'
}
Parent.prototype.say = function(){
 console.log('hello')
}
function Child() {
 Parent.call(this)
 this.type = 'Child'
}
console.log(new Parent())
console.log(new Child())

3. Konstrukteur + Prototypenkette

die meisten Best Practices

function Parent() {
 this.name = 'Parent'
 this.arr = [1, 2, 3]
}
Parent.prototype.say = function(){
 console.log('hello')
}
function Child() {
 this.type = 'Child'
}
Child.prototype = new Parent()
let s1 = new Child()
let s2 = new Child()
s1.arr.push(4)
console.log(s1.arr, s2.arr)
console.log(new Parent())
console.log(new Child())
console.log(new Child().say())

Das obige ist der detaillierte Inhalt vonEine erste Einführung in objektorientiertes JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!