recherche
Maisoninterface Webjs tutorielQu'est-ce que le constructeur js ? Explication détaillée des méthodes d'héritage des constructeurs et de leurs avantages et inconvénients

Qu'est-ce que le constructeur js ? Est-ce différent des fonctions ordinaires ? Cet article présente principalement l'héritage des constructeurs js (héritage de classe), et comprend également l'introduction des deux méthodes d'héritage d'ES5 et ES6. S'il y a des parties déraisonnables dans l'article, vous êtes invités à me corriger.

constructeur js

Prototype

Tout d'abord, présentons brièvement les attributs/méthodes de l'instance et les attributs/méthodes du prototype pour mieux comprendre ce qui suit

function Persion(name){
    this.name = name;                                       // 属性
    this.setName = function(nameName){                      // 实例方法
        this.name = newName;
    }
}
Persion.prototype.sex = 'man';                              // 向 Persion 原型中追加属性(原型方法)

var persion = new Persion('张三');                          // 此时我们实例化一个persion对象,看一下name和sex有什么区别

Affichez la persistance sur la console et imprimez-la comme suit :
Quest-ce que le constructeur js ? Explication détaillée des méthodes dhéritage des constructeurs et de leurs avantages et inconvénientsLes attributs initialement ajoutés via le prototype apparaîtront dans la chaîne de prototypes de l'objet instance,
chaque objet aura un objet proto intégré, lorsqu'un attribut n'est pas trouvé dans l'objet actuel, il sera recherché dans sa chaîne de prototypes (c'est-à-dire la chaîne de prototypes)

Regardons l'exemple suivant
Remarque : Dans le constructeur, il y a généralement peu d'attributs de référence sous forme de tableaux. Dans la plupart des cas, ce sont : des attributs de base + des méthodes.

function Animal(n) {                                       // 声明一个构造函数
    this.name = n;                                         // 实例属性
    this.arr = [];                                         // 实例属性(引用类型)
    this.say = function(){                                 // 实例方法
        return 'hello world';
    }
}
Animal.prototype.sing = function() {                       // 追加原型方法  
    return '吹呀吹呀,我的骄傲放纵~~';
}
Animal.prototype.pArr = [];                                // 追加原型属性(引用类型)

Jetons ensuite un coup d'œil à la différence entre les propriétés/méthodes d'instance et les propriétés/méthodes de prototype
Le but de l'objet prototype est de stocker les méthodes et propriétés partagées pour chaque objet d'instance .C'est juste un objet ordinaire. Et toutes les instances partagent le même objet prototype, donc contrairement aux méthodes ou propriétés d’instance, il n’existe qu’une seule copie de l’objet prototype. Il existe de nombreuses instances, et les propriétés et méthodes des instances sont indépendantes.

var cat = new Animal('cat');                               // 实例化cat对象
var dog = new Animal('dog');                               // 实例化狗子对象

cat.say === dog.say                                        // false 不同的实例拥有不同的实例属性/方法
cat.sing === dog.sing                                      // true 不同的实例共享相同的原型属性/方法

cat.arr.push('zz');                                        // 向cat实例对象的arr中追加元素;(私有)
cat.pArr.push('xx');                                       // 向cat原型对象的pArr中追加元素;(共享)
console.log(dog.arr);                                      // 打印出 [],因为cat只改变了其私有的arr
console.log(dog.pArr);                                     // 打印出 ['xx'], 因为cat改变了与狗子(dog)共享的pArr

Bien entendu, les attributs du prototype sont des types de données de base et ne seront pas partagés
Dans le constructeur : pour la confidentialité des attributs (attributs de base de l'instance) et des méthodes (attributs de référence d'instance ) réutilisation et partage. Nous préconisons :
1. Encapsuler les propriétés dans les constructeurs
2. Définir des méthodes sur les objets prototypes

Méthode d'héritage ES5

Tout d'abord, nous définissons une classe parent Animal

function Animal(n) {                              
    this.name = n;                                          // 实例属性
    this.arr = [];                                          // 实例属性(引用类型)
    this.say = function(){                                  // 实例方法
        return 'hello world';
    }
}
Animal.prototype.sing = function() {                        // 追加原型方法  
    return '吹呀吹呀,我的骄傲放纵~~';
}
Animal.prototype.pArr = [];                                 // 追加原型属性(引用类型)
1. Héritage de la chaîne de prototypes

function Cat(n) {
    this.cName = n;
}
Cat.prototype = new Animal();                               // 父类的实例作为子类的原型对象

var tom = new Cat('tom');                                   // 此时Tom拥有Cat和Animal的所有实例和原型方法/属性,实现了继承
var black = new Cat('black');

tom.arr.push('Im tom');
console.log(black.arr);                                     // 打印出 ['Im tom'], 结果其方法变成了共享的,而不是每个实例所私有的,这是因为父类的实例方法/属性变成了子类的原型方法/属性了;

Avantages : Implémente des méthodes d'instance/propriétés et des méthodes de prototype/d'objets enfants vers des objets parents/Héritage d'attributs ; 🎜>Inconvénients : les instances de sous-classe partagent les attributs de type de données de référence du constructeur de classe parent.
2. Constructeur d'emprunt

function Cat(n) {
    this.cName = n;                     
    Animal.call(this, this.cName);                           // 核心,把父类的实例方法属性指向子类
}

var tom = new Cat('tom');                                    // 此时Tom拥有Cat和Animal的所有实例和原型方法/属性,实现了继承
var black = new Cat('black');

tom.arr.push('Im tom');
console.log(black.arr);                                      // 打印出 [], 其方法和属性是每个子类实例所私有的;
tom.sing();                                                  // undefind 无法继承父类的原型属性及方法;
Avantages :

1. Implémentation de la méthode d'instance de l'objet enfant vers l'objet parent/Héritage de attributs, les méthodes et attributs de l'instance de classe parent hérités par chaque instance de sous-classe sont privés ;
2 Lors de la création d'une instance de sous-classe, vous pouvez transmettre des paramètres au constructeur de classe parent ;
Inconvénients : les instances de sous-classe ne peuvent pas hériter des attributs structurels et des méthodes de la classe parent
3. Héritage combiné

Avantages :

function Cat(n) {
this.cName = n;                     
    Animal.call(this, this.cName);                          // 核心,把父类的实例方法属性指向子类
}
Cat.prototype = new Parent()                                // 核心, 父类的实例作为子类的原型对象
Cat.prototype.constructor = Cat;                            // 修复子类Cat的构造器指向,防止原型链的混乱

tom.arr.push('Im tom');
console.log(black.arr);                                     // 打印出 [], 其方法和属性是每个子类实例所私有的;
tom.sing();                                                 // 打印出 '吹呀吹呀,我的骄傲放纵~~'; 子类继承了父类的原型方法及属性

1. Pour créer une instance de sous-classe, vous pouvez transmettre des paramètres au constructeur de la classe parent
2 La méthode d'instance de la classe parent est définie sur l'objet prototype du parent ;
3. Ne partagez pas le constructeur et les attributs de la classe parent
Inconvénient : le constructeur de la classe parent est appelé ; deux fois
4. Héritage de combinaison parasite

Avantages :

function Cat(n) {
this.cName = n;                     
    Animal.call(this, this.cName);                          // 核心,把父类的实例方法属性指向子类
}
Cat.prototype = Parent.prototype;                           // 核心, 将父类原型赋值给子类原型(子类原型和父类原型,实质上是同一个)
Cat.prototype.constructor = Cat;                            // 修复子类Cat的构造器指向,防止原型链的混乱

tom.arr.push('Im tom');
console.log(black.arr);                                     // 打印出 [], 其方法和属性是每个子类实例所私有的;
tom.sing();                                                 // 打印出 '吹呀吹呀,我的骄傲放纵~~'; 子类继承了父类的原型方法及属性
tom.pArr.push('publish');                                   // 修改继承于父类原型属性值 pArr;
console.log(black.pArr);                                    // 打印出 ['publish'], 父类的原型属性/方法 依旧是共享的,
// 至此简直是完美呀~~~ 然鹅!
Cat.prototype.childrenProp = '我是子类的原型属性!';
var parent = new Animal('父类');
console.log(parent.childrenProp);                           // 打印出'我是子类的原型属性!' what? 父类实例化的对象拥有子类的原型属性/方法,这是因为父类和子类使用了同一个原型

1. Créez une instance de sous-classe et transmettez les paramètres au parent. constructeur de classe ;
2. Les instances de sous-classes ne partagent pas le constructeur et les attributs de la classe parent
3. Le constructeur de la classe parent n'est appelé qu'une seule fois ; ;
Inconvénients : La classe parent et la sous-classe utilisent le même prototype, ce qui fait que la modification du prototype de la sous-classe affecte la classe parent
5. (tout simplement parfait)

Avantages : Implémentation parfaite de l'héritage

function Cat(n) {
this.cName = n;                     
    Animal.call(this, this.cName);                          // 核心,把父类的实例方法属性指向子类;
}
var F = function(){};                                       // 核心,利用空对象作为中介;
F.prototype = Parent.prototype;                             // 核心,将父类的原型赋值给空对象F;
Cat.prototype = new F();                                    // 核心,将F的实例赋值给子类;
Cat.prototype.constructor = Cat;                            // 修复子类Cat的构造器指向,防止原型链的混乱;
tom.arr.push('Im tom');
console.log(black.arr);                                     // 打印出 [], 其方法和属性是每个子类实例所私有的;
tom.sing();                                                 // 打印出 '吹呀吹呀,我的骄傲放纵~~'; 子类继承了父类的原型方法及属性;
tom.pArr.push('publish');                                   // 修改继承于父类原型属性值 pArr;
console.log(black.pArr);                                    // 打印出 ['publish'], 父类的原型属性/方法 依旧是共享的;
Cat.prototype.childrenProp = '我是子类的原型属性!';
var parent = new Animal('父类');
console.log(parent.childrenProp);                           // undefind  父类实例化的对象不拥有子类的原型属性/方法;

Inconvénients : Implémentation relativement complexe
Attaché avec la bibliothèque YUI ; implémenter l'héritage

signifie définir un attribut uber pour l'objet enfant, qui pointe directement vers l'attribut prototype de l'objet parent. (Uber est un mot allemand signifiant « en haut » ou « un niveau au-dessus ».) Cela équivaut à ouvrir un canal sur l'objet enfant, et vous pouvez appeler directement la méthode de l'objet parent. Cette ligne est placée ici uniquement pour obtenir l'intégralité de l'héritage et est uniquement à des fins de sauvegarde.

function extend(Child, Parent) {
    var F = function(){};
    F.prototype = Parent.prototype;
    hild.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;                          
}
// 使用
extend(Cat,Animal);
Méthode d'héritage ES6

Child.uber = Parent.prototype;

apache php mysql

Articles connexes
class Animal{                                                // 父类
    constructor(name){                                       // 构造函数
        this.name=name;
    }
    eat(){                                                   // 实例方法
        return 'hello world';
    }
}
class Cat extends Animal{                                    // 子类
  constructor(name){
      super(name);                                           // 调用实现父类的构造函数
      this.pName = name;            
  }
  sing(){
     return '吹呀吹呀,我的骄傲放纵~~';
  }
}

Méthode d'héritage du constructeur php, héritage du constructeur php

Héritage des constructeurs de l'héritage prototypique JavaScript

Vidéos associées :

Tutoriel vidéo orienté objet PHP de la Geek Academy

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!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

SublimeText3 Linux nouvelle version

SublimeText3 Linux nouvelle version

Dernière version de SublimeText3 Linux

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel