Comment JS implémente-t-il la programmation orientée objet ? Introduction aux principes de la programmation orientée objet js

Le contenu de cet article porte sur la manière dont JS implémente la programmation orientée objet ? L'introduction aux principes de la programmation orientée objet js a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'elle vous sera utile.

1. Qu'est-ce que la programmation orientée objet

C'est une manière abstraite de créer un modèle de programmation basé sur un modèle du monde réel (combinant des données et des instructions de programme en objets)

2. Le but de la programmation orientée objet

est de promouvoir une meilleure flexibilité et maintenabilité dans la programmation, et est très populaire dans les projets logiciels à grande échelle.

3. Avantages de la programmation orientée objet (héritage, polymorphisme, encapsulation)

Héritage : obtenez toutes les données et fonctions de la classe parent et réalisez la copie.
Polymorphisme : Un même nom de méthode a des comportements différents selon l'objet implémentant la méthode.
Encapsulation : Agréger les données et fonctions des objets, et restreindre leurs contacts avec le monde extérieur (droits d'accès).

Comment implémenter la programmation orientée objet en JS (référence)

1. Héritage de chaîne prototypique

function Person() {
    this.name = 'per'
    this.obj = {
        name: ''
    }
}
Person.prototype.getName = function() {
    return this.obj.name
}
Person.prototype.setName = function(name) {
    this.name = name
    // 引用类型的赋值会同步给所有子类
    this.obj.name = name
}
function Student() {
    
}
Student.prototype = new Person()

const stu1 = new Student()
const stu2 = new Student()

stu1.setName('stu')
stu1.getName()
stu2.getName()

Inconvénients : Lorsque le type de référence est modifié, il le sera. synchronisé avec toutes les sous-classes

2. Héritage du constructeur

function Person() {
    this.obj = {
        name: 'a'
    }
    this.setName = name => {
        this.obj.name = name
    }
    this.getName = () => {
        return this.obj.name
    }
}
function Student() {
    Person.call(this)
}
const stu1 = new Student()
const stu2 = new Student()
stu1.setName('stu')
stu1.getName()
stu2.getName()

Inconvénients : Les fonctions de la classe parent ne sont pas partagées sous la sous-classe, ce qui équivaut à copier dynamiquement une copie du code

3. Héritage de combinaison

function Person() {
    this.obj = {
        name: 'a'
    }
}
Person.prototype.getName = function() {
    return this.obj.name
}
Person.prototype.setName = function(name) {
    this.name = name
    // 引用类型的赋值会同步给所有子类
    this.obj.name = name
}
function Student() {
    // 继承属性
    Person.call(this)
}
// 继承方法
Student.prototype = new Person()

Inconvénients : La copie d'attribut dans la classe parent est exécutée deux fois

4. Héritage de combinaison parasite

function Person() {
    this.obj = {
        name: 'a'
    }
}
Person.prototype.getName = function() {
    return this.obj.name
}
Person.prototype.setName = function(name) {
    this.name = name
    // 引用类型的赋值会同步给所有子类
    this.obj.name = name
}
function Student() {
    // 继承属性
    Person.call(this)
}
// 这里实现方法的继承
function inherit(sub, parent) {
    sub.prototype = Object.create(parent.prototype)
    sub.prototype.constructor = sub       
}
inherit(Student, Person)

Composition est résolu ici Problème d'exécution secondaire du code de la classe parent avec héritage de style

5. Héritage d'implémentation de classe (référence)

class Person {
    constructor(){
        this.obj = {
            name: 'a'
        }
    }
    get name() {
        return this.obj.name
    }
    set name(name) {
        this.obj.name = name
    }
}
class Student extends Person {
    constructor() {
        super()
    }
}

Recommandations associées :

Objet orienté js Résumé des différentes méthodes de création d'objets_js orienté objet

programmation orientée objet javascript code_js orienté objet

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!