Compréhension approfondie de js orienté objet

Cette fois, je vais vous apporter une compréhension approfondie de js orienté objet Quelles sont les précautions pour une compréhension approfondie de js orienté objet Voici des exemples pratiques. cas, jetons un coup d'oeil.

Déclaration de classe

1. Constructeur

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

2. Classe ES6

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

Héritage

1. Implémenter l'héritage à l'aide de constructeurs

Principe : modifiez le pointeur this de la sous-classe lors de l'exécution, mais l'attribut sur la chaîne de prototypes de la classe parent n'est pas hérité, ce qui est 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())

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

Principe : Chaîne de prototypes, mais si un attribut de la classe parent est modifié dans une instance de classe enfant, l'attribut des autres instances changera également l'enfant, ce qui est également un héritage incomplet

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

Meilleures pratiques

// 父类
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())

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

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!