Une première introduction au JavaScript orienté objet

Les connaissances orientées objet JS sont le point de connaissances d'entrée de gamme le plus basique. Ce qui suit est une introduction détaillée aux connaissances orientées objet js à travers l'exemple de code de cet article. Les amis intéressés peuvent apprendre ensemble

Déclaration de classe de

1. 🎜>2. Classe ES6

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

Héritage de classe

1. Implémenté à l'aide du constructeur Héritage

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

Principe : modifiez le pointeur this de la sous-classe lors de l'exécution, mais les attributs de la chaîne de prototypes de la classe parent ne sont pas hérités, ce qui est un héritage incomplet

2. Implémenter l'héritage à l'aide d'une chaîne de prototypes

Principe : chaîne de prototypes, mais si les attributs sont dans le parent la classe sont modifiées dans une instance de sous-classe, les propriétés de la classe parent changeront dans d'autres instances. Cette propriété modifiera également l'enfant, ce qui est également un héritage incomplet

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. Constructeur + chaîne de prototypes

la plupart des meilleures pratiques

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!