Vertiefendes Verständnis der objektorientierten js

Dieses Mal werde ich Ihnen ein tiefgreifendes Verständnis von js objektorientiert vermitteln. Was sind die Vorsichtsmaßnahmen für ein tiefgreifendes Verständnis von js objektorientiert? Fälle, werfen wir einen Blick darauf.

Klassendeklaration

1. Konstrukteur

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

2. ES6-Klasse

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

Vererbung

1. Vererbung mit Hilfe von Konstruktoren implementieren

Prinzip: Ändern Sie diesen Punkt der Unterklasse beim Ausführen, aber das -Attribut in der Prototypenkette der übergeordneten Klasse wird nicht vererbt, was eine unvollständige Vererbung

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())

darstellt 2. Vererbung mithilfe der Prototypenkette implementieren

Prinzip: Prototypkette, aber wenn ein Attribut in der übergeordneten Klasse in einer untergeordneten Klasseninstanz geändert wird, ändert das Attribut in anderen Instanzen auch das untergeordnete Element, was ebenfalls eine unvollständige Vererbung darstellt

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())

3. Konstrukteur + Prototypenkette

Best Practices

// 父类
function Parent() {
 this.name = 'Parent'
 this.arr = [1, 2, 3]
}
Parent.prototype.say = function(){
 console.log('hello')
}
// 子类
function Child() {
 Parent.call(this)
 this.type = 'Child'
}
// 避免父级的构造函数执行两次，共用一个 constructor
// 但是无法区分实例属于哪个构造函数
// Child.prototype = Parent.prototype
// 改进：创建一个中间对象，再修改子类的 constructor
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child
// 实例化
let s1 = new Child()
let s2 = new Child()
let s3 = new Parent()
s1.arr.push(4)
console.log(s1.arr, s2.arr) // [1, 2, 3, 4] [1, 2, 3]
console.log(s2.constructor) // Child
console.log(s3.constructor) // Parent
console.log(new Parent())
console.log(new Child())
console.log(new Child().say())

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis der objektorientierten js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!