Quelles sont les méthodes d'héritage en js ? Introduction à deux méthodes d'héritage js (avec code)

L'héritage de js est différent de l'héritage traditionnel de java js, c'est un héritage basé sur la chaîne de prototypes. L'héritage JavaScript peut être divisé en deux catégories : l'héritage basé sur les objets et l'héritage basé sur le type. Examinons de plus près l'héritage js.

Héritage basé sur des objets js
L'héritage basé sur les objets est également appelé héritage prototypique. Nous savons que les objets créés via des littéraux JavaScript seront connectés à Object.prototype, nous utilisons donc Object.prototype pour implémenter l'héritage. Essentiellement, la classe est abandonnée et le constructeur n'est pas appelé. Au lieu de cela, Object.create() est utilisé pour laisser directement le nouvel objet hériter des propriétés de l'ancien objet. Par exemple :

var person = {
    name: "Jack",
    getName: function () { return this.name; }
}
var p1 = Object.create(person);
console.log(p1.getName());    //Jack

Le code est très simple, la personne a un attribut et une méthode. L'objet p1 est hérité via Object.create(). Le premier paramètre prototype pointe vers le prototype de la personne, donc l'objet p1 hérite des attributs et des méthodes de la personne.
Object.create() peut également spécifier un deuxième paramètre, un attribut de données, à ajouter au nouvel objet. L'attribut data peut être défini sur 4 valeurs de descripteur, inscriptibles, énumérables et configurables. La signification des trois derniers peut être devinée en regardant les noms. S'il n'est pas spécifié, la valeur par défaut est false. Comme cela n'a pas grand-chose à voir avec cet article, je ne m'éloignerai pas de cela. Regardez simplement la définition de la valeur :

var p2 = Object.create(person, {
    name: {
        value: "Zhang"
    }
});
console.log(p2.getName());    //Zhang

Utiliser Object.create() équivaut à créer un tout nouvel objet. l'objet Ajoutez n'importe quel nouvel attribut et remplacez ses propriétés et méthodes :

var person = {
    name: "Jack",
    getName: function () { return this.name; },
    getAge: function() { return this.age; } //注意并没有age这个成员变量，依赖子类实现
}

var p3 = Object.create(person);
p3.name = 'Rose';
p3.age = 17;
p3.location = '上海';
p3.getLocation = function() { return this.location; }

console.log(p3.getName());    //Rose
console.log(p3.getAge());     //17
console.log(p3.getLocation());    //上海

Il n'y a pas d'attribut d'âge en personne, vous serez donc indéfini lorsque vous appellerez person.getAge();. Mais l'attribut age est nouvellement défini dans l'objet p3, donc la méthode getAge de la classe de base peut être appelée correctement. De plus, la sous-classe surcharge la valeur de name et définit à nouveau l'attribut location et la méthode getLocation. Les résultats sont présentés ci-dessus et ne seront pas décrits à nouveau.

Héritage basé sur les classes js
L'héritage basé sur le type est un héritage qui dépend du prototype via le constructeur, plutôt que de l'objet. Par exemple :

function Person(name) {
    this.name = name;
    this.getName = function () { return this.name; };  
}
function Student(name, age) {
    Person.call(this, name);
    this.age = age;
    this.getAge = function () { return this.age; }; 
}
Student.prototype = new Person();    //需要通过new来访问基类的构造函数

var p = new Person('Cathy');
var s = new Student('Bill', 23);

console.log(p.getName());    //Cathy
console.log(s.getName());    //Bill
console.log(s.getAge());     //23

Étudiant hérite de Personne. Bien que le nom soit défini dans la classe de base Person, après avoir appelé le constructeur de Person avec new, celui-ci sera lié à l'objet Student de la sous-classe, donc le nom est finalement défini sur l'objet Student de la sous-classe. Les résultats sont présentés ci-dessus et ne seront pas décrits à nouveau.
Protéger la confidentialité
La raison pour laquelle getName, getAge et d'autres méthodes sont définies est que nous ne voulons pas que les utilisateurs accèdent directement à des attributs tels que le nom, l'âge, etc. Malheureusement, aucun des deux héritages ci-dessus ne peut protéger la confidentialité et ils peuvent accéder directement à des propriétés telles que p.name et p.age. Si vous pensez que la confidentialité de ces attributs est très importante et que vous souhaitez simuler l'effet des attributs privés en langage OO, vous pouvez utiliser la modularisation des fonctions.
La soi-disant modularisation de fonction signifie essentiellement créer un nouvel objet dans la fonction, en utilisant les propriétés de l'objet paramètre dans la méthode du nouvel objet, puis en renvoyant le nouvel objet. À l'heure actuelle, il n'y a aucun attribut de l'objet paramètre dans le nouvel objet, atteignant ainsi l'objectif de protection de la vie privée. Le code est le suivant :

var person = function(spec) {
    var that = {};        //新对象
    that.getName = function () { return spec.name; };  //使用参数的属性
    that.getAge = function() { return spec.age; };  //使用参数的属性
    return that;        //返回新对象
}

var p4 = person({name: 'Jane', age: 20});

console.log(p4.name);    //undefined
console.log(p4.age);     //undefined
console.log(p4.getName());    //Jane
console.log(p4.getAge());     //20

Parce que la fonction person renvoie le nouvel objet et qu'il n'y a aucun attribut de nom et d'âge dans celui-ci, l'accès direct entraînera un résultat indéfini. Le nom et l'âge ne peuvent être obtenus que via les deux interfaces exposées par celui-ci.
Il est également très pratique d'implémenter davantage l'héritage multicouche. L'effet est le suivant, qui ne sera pas décrit en détail :

var student = function(spec) {
    var that = person(spec);        //新对象继承自person
    that.getRole = function() { return 'student'; };  //新对象增加方法
    that.getInfo = function() {
        return spec.name + ' ' + spec.age + ' ' + that.getRole();
    };
    return that;    //返回新对象
};

var p5 = student({name:'Andy', age:12});

console.log(p5.name);       //undefined
console.log(p5.getName());  //Andy
console.log(p5.getRole());  //student
console.log(p5.getInfo());  //Andy 12 student

Articles connexes recommandés :

Héritage JS - héritage de chaîne de prototypes et classes Inheritance_Basic knowledge

Plusieurs façons d'implémenter l'héritage dans JS

L'héritage comme l'héritage dans JavaScript_javascript Conseils

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!