Orienté objet - Un tremplin vers le stade avancé de JavaScript

avant-propos

En programmation informatique, l'objet est un concept très important. Cela peut nous aider à mieux organiser et gérer les données, et rendre le code plus modulaire et réutilisable. Un objet peut stocker plusieurs paires clé-valeur, chaque paire clé-valeur représentant un attribut, et l'attribut peut être une valeur d'un type de base ou d'un autre objet. Grâce aux objets, nous pouvons définir et appeler des méthodes, opérer sur des propriétés ou implémenter des fonctions spécifiques.

L'idée de la programmation orientée objet met l'accent sur l'organisation et la gestion du code à travers des objets et des classes, ce qui facilite sa compréhension et sa maintenance. En fait, décomposer les problèmes et les solutions en objets est une manière très naturelle et intuitive, et c'est aussi la clé pour parvenir à la réutilisation et à la modularisation du code.

Dans les études suivantes, nous comprendrons et maîtriserons ces concepts plus profondément, et pratiquerons et consoliderons les connaissances que nous avons apprises à travers de petits cas. Embarquons ensemble pour un voyage d'apprentissage!

1. Reconnaître l'objet

1. Qu'est-ce qu'un objet

• Concept : Object (objet) est une collection de "paires clé-valeur" , représentant la relation de mappage entre les attributs et les valeurs
  

• Syntaxe : k et v sont séparés par des deux-points , chaque groupe de k:v est séparé par des virgules et les virgules ne sont pas nécessaires après la dernière paire k:v

  • Si le nom de la clé de propriété de l'objet n'est pas conforme à la convention de dénomination de l'identifiant JS, le nom de la clé doit être placé entre guillemets
  • Par exemple : 'favorite-book':'舒克和贝塔'il y a un tiret dans le nom de l'attribut, qui n'est pas conforme à la convention de dénomination de l'identifiant ]S, et le nom de l'attribut doit être placé entre guillemets

• Accès aux propriétés de l'objet

  • Vous pouvez utiliser la " syntaxe à points " pour accéder à la valeur de la clé spécifiée dans l'objet

    xiaoming.name;//小明
    xiaoming.age;//12
    xiaoming.hobbys;//['足球'，游泳'，'编程]
    

  • Si le nom de l' attribut n'est pas conforme à la convention de dénomination de l'identifiant ]S, il doit être accessible entre crochets
    

    xiaoming['favorite-book'];//舒克和贝塔
    

  • Si le nom de l'attribut est stocké en tant que variable, il doit être entre crochets

    var obj = {
            
            
    	a:1,
    	b:2,
    	C:3
    };
    //属性名用变量存储
    var key ='b';
    console.log(obj.key); //undefined
    console.log(obj[key]);//2
    

• changement de propriété

  • Utilisez directement l'opérateur d'affectation pour réaffecter une propriété afin de modifier la propriété

    var obj ={
            
            
    	a:10
    }
    obj.a = 30;  //将obj里a的值改成了30
    ob].a++;    // a = 31
    

• création d'attribut

  • Si l'objet lui-même n'a pas de valeur de propriété, la propriété sera créée lorsque la syntaxe à points est utilisée pour attribuer une valeur

    var obj ={
            
            
    	a:10
    };
    obj.b = 40;  //在obj对象中创建了b:40这个键值对
    

• suppression de propriété

  • Si vous souhaitez supprimer une propriété d'un objet, vous devez utiliser l'opérateur de suppression

    var obj = {
            
            
    	a:1,
    	b:2
    };
    delete obj.a;
    

2. Méthodes objet

• Si une valeur de propriété est une fonction , elle est aussi appelée " méthode " de l'objet

  varxiaoming = {
        
        
  	sayHello:function(){
        
             //sayHello方法
  	 	console.log('你好,我是小明,今年12岁,我是个男生');
  	 	}
  }
  

• Appel d'une fonction avec la méthode pointxiaoming.sayHello();

• La méthode est également une fonction , mais la méthode est "l'attribut de fonction" de l'objet, et elle doit être appelée par l'objet

3. Traversée d'objets

• Avec la boucle for ... in ... , vous pouvez itérer sur chaque clé de l'objet
  

4. Clonage profond et superficiel d'objets

• Lorsque l'objet est une valeur de type référence
  • Un objet ne peut pas être var obj1 = obj2cloné en utilisant une syntaxe comme celle-ci
  • Lorsque vous utilisez == ou === pour comparer des objets, la comparaison est de savoir s'ils sont le même objet en mémoire , pas si les valeurs de comparaison sont les mêmes
• clone peu profond
  • Le clonage superficiel d'objets peut être réalisé en utilisant le cycle for ...in...
• Clone profond

  • Semblable au type de tableau, le clonage profond d'objets nécessite l'utilisation de la récursivité

       var obj1 = {
            
            
          a:1,
          b:2,
          c:[33,44,{
            
            
            m:55,
            n:66,
            p:[77,88]
          }]
        };
        // 定义一个深克隆函数
        function  deepClone(o){
            
            
          // 判断o是对象还是数组,必须先判断是不是数组,因为数组的类型也是对象
          if(Array.isArray(o)){
            
            
              //数组
            var result = [];
            for(var i=0;i < o.length;i++){
            
            
              result.push(deepClone(o[i]));
            }
          }else if(typeof o == 'object'){
            
            
              // 对象
            var result = {
            
            };
            for (var k in o){
            
            
              result[k] = deepClone(o[k])
            }
          }else{
            
            
              //基本类型值
            var result = o;
          }
          return result;
        }
        var obj2 = deepClone(obj1);
        console.log(obj2);
        
        // 测试一下
        console.log(obj1 === obj2); //false
        
        obj1.c.push(99);
        console.log(obj2);  //obj2是不变的,因为没有'藕断丝连'的现象
      
    

2. Connaître le contexte de la fonction

• Le contexte de la fonction ( ce mot clé) est déterminé par la méthode d'appel ; la même fonction est appelée sous différentes formes, et le contexte de la fonction est différent

  var xiaoming = {
        
        
  	nickname:小明，
  	age:12,
  	sayHello = function (){
        
        
  		console..log('我是'+this.nickname+',我'+this.age+'岁了)；
  	}
  };
  

  • Scénario 1 : La fonction est appelée par l'objet point, et ceci dans la fonction fait référence à l'objet pointillé

    xiaoming.sayHello();
    

  • Cas 2 : les parenthèses appellent directement la fonction, et ceci dans la fonction fait référence à l'objet fenêtre

    var sayHello = xiaoming.sayHello;
    sayHello();
    

• la fonction est la stratégie " contexte d'exécution "

• Si la fonction n'est pas appelée, le contexte de la fonction ne peut pas être déterminé

1. Règles de contexte pour les fonctions★

• Règle①

  • L'objet point appelle sa fonction de méthode, puis le contexte de la fonction est l'objet en pointillé
  • 对象.方法();

• Règle ②

  • Les parenthèses appellent directement la fonction et le contexte de la fonction est l'objet window
  • 函数();

• Règle ③

  • Le tableau (objet de type tableau) énumère la fonction à appeler, et le contexte est ce tableau (objet de type tableau)
    • Qu'est-ce qu'un objet de type tableau : un objet dont le nom de clé est une séquence de nombres naturels (à partir de 0) et qui a un attribut de longueur
    • L'objet arguments est l'objet de type tableau le plus courant, qui est la liste de paramètres réelle de la fonction
  • 数组[下标]();

• Règle ④

  • Fonction dans IIFE, le contexte est l'objet fenêtre

    (function(){
            
            
    
    })();
    

• Règle ⑤

  • La minuterie et le délai appellent la fonction, le contexte est l'objet fenêtre
  • setInterval(函数，时间)；
  • setTimeout(函数，时间)；

• Règle ⑥

  • Le contexte du gestionnaire d'événement est l'élément DOM auquel l'événement est lié

    DOM元素.onclick=function(){
            
            
    }
    

2. appelez et postulez ★

• call and apply peut spécifier le contexte de la fonction
• 函数.ca11(上下文)；Pour répertorier les paramètres avec des virgules
• 函数.apply(上下文)；Pour écrire les paramètres dans le tableau

3. Constructeur

1. Appelez la fonction avec le nouvel opérateur

• "Quatre étapes"

  • 1) Un objet vide est automatiquement créé dans le corps de la fonction
  • 2) Le contexte (this) de la fonction pointera vers cet objet
  • 3) L'instruction dans le corps de la fonction sera exécutée
  • 4) La fonction renverra automatiquement l'objet de contexte, même si la fonction n'a pas d'instruction de retour

2. Classes et instances

3. Constructeurs et 'classes'

• Java, C++, etc. sont des langages " orientés objet " (object-oriented)

• JavaScript est un langage « basé sur des objets »

• Le constructeur en JavaScript peut être comparé à la "classe" en langage OO La méthode d'écriture est en effet similaire, mais elle est toujours fondamentalement différente du vrai langage OO.

4. Prototype et chaîne de prototypes

1. Recherche de prototypes et de chaînes de prototypes★

• Toute fonction a un attribut prototype et prototype signifie "prototype"
• La valeur de la propriété prototype est un objet, qui par défaut a la propriété constructeur pointant vers la fonction
  
• L'attribut prototype pour les fonctions ordinaires est inutile, mais l'attribut prototype pour les constructeurs est très utile
  • La propriété prototype d'un constructeur est le prototype de son instance
    

          console.log(xiaoming.__proto__ === People.prototype); //true 
  

• recherche de chaînes de prototypes
  • JavaScript stipule qu'une instance peut accéder aux propriétés et méthodes de son prototype
• méthode hasOwnProperty()
  • Peut vérifier si l'objet "possède" réellement une propriété ou une méthode
• dans l'opérateur
  • Vous pouvez uniquement vérifier si une certaine propriété ou méthode est accessible par l'objet, vous ne pouvez pas vérifier s'il s'agit de votre propre propriété ou méthode

2. Ajouter des méthodes sur le prototype

• Inconvénients d'ajouter des méthodes directement aux instances : chaque instance et la fonction de méthode de chaque instance sont des fonctions différentes en mémoire, ce qui entraîne un gaspillage de mémoire
• Solution : ajouter la méthode au prototype
  

3. La fin de la chaîne des prototypes

• La fin de la chaîne de prototypes de toutes choses - Object.prototype

• exemple de code

    function People(){
        
        
  
    }
    var xiaoming = new People();
    console.log(xiaoming.__proto__.__proto__ === Object.prototype);	//true
    console.log(Object.prototype.__proto__);							 //null
  
    console.log(Object.prototype.hasOwnProperty('hasOwnProperty'));	 //true
  
  

• chaîne de prototypes du tableau

  

 var arr = [22,33,4,555];

  console.log(arr.__proto__ === Array.prototype);            //true
  console.log(arr.__proto__ .__proto__=== Object.prototype); //true
  console.log(Array.prototype.hasOwnProperty('push'));        //true

4. Héritage★

• L'héritage décrit la relation "est une sorte de" entre deux classes . Par exemple, un étudiant "est une sorte de" personne, donc une relation d'héritage est formée entre un être humain et une classe d'étudiants

• People est la " classe parente " (ou " super classe ", " classe de base "); Student est la " sous-classe " (ou " classe dérivée ")

• La sous-classe enrichit la classe parente, rendant la description de la classe plus spécifique et détaillée

• exemple

• Héritage via la chaîne de prototypes
  • Laissez le prototype du constructeur de la sous-classe pointer vers une instance de la classe parent :Student.prototype = new People();

		 //父类:人类
		  function People(name,age,sex){
    
    
		    this.name = name;
		    this.age = age;
		    this.sex = sex;
		  }
		  People.prototype.sayHello = function (){
    
    
		    console.log('你好,我是'+this.name +'我今年'+this.age+'岁了');
		  }
		  People.prototype.sleep = function (){
    
    
		    console.log(this.nam+'开始睡觉,zzzz');
		  }
		// 子类:学生
		  function Student(name,age,sex,school,studentNumber){
    
    
		    this.name = name;
		    this.age = age;
		    this.sex = sex;
		    this.school = school;
		    this.studentNumber = studentNumber;
		  }
		  //关键语句,实现继承
		  Student.prototype = new People();
		  Student.prototype.study = function (){
    
    
		    console.log(this.name + '正在学习');
		  }
		  Student.prototype.exam = function (){
    
    
		    console.log(this.name+'正在考试,加油!');
		  }
		
		  //实例化
		  var hanmeimei = new Student('韩梅梅',12,'女','CSDN大学',123456);
		  hanmeimei.study();
		  hanmeimei.sayHello();

Cinq, passant à l'orienté objet

• L'essence de l'orienté objet : définir différentes classes, laisser les instances de la classe fonctionner
• Avantages orientés objet : écriture de programme plus claire, structure de code plus serrée, code plus robuste et maintenance plus facile
• Occasions où l'orienté objet est souvent utilisé : occasions qui nécessitent une encapsulation et une réutilisation (réflexion par composants)

1. Petite mallette de feux tricolores

• En utilisant la programmation orientée objet, vous pouvez résoudre le problème d'un grand nombre de feux de signalisation en conflit avec la pensée " composante ".

• Programmation orientée objet, le plus important est d'écrire des classes

• Classe TrafficLight

  • Attributs : propre couleur actuelle, propre élément DOM dom
  • Méthode : Initialiser init(), changer de couleur changeColor(), lier l'événement bindEvent()

• Exemple de code :

   #box img{
        
        
              width: 80px ;
          }
  

  <div id="box" ></div>
  

  //定义红绿灯类,构造函数
          function TrafficLight(){
        
        
              //颜色属性,一开始都是红色
              //红色1,黄色2,绿色3
              this.color = 1;
              //调用自己的初始化方法
              this.init();
              //绑定监听
              this.bindEvent();
          }
          //初始化方法
          TrafficLight.prototype.init = function (){
        
        
              // alert('我是init方法');
              //创建自己的DOM
              this.dom = document.createElement('img');
              this.dom.src = this.color+'.jpg';
              box.appendChild(this.dom);
          }
          // 绑定监听
          TrafficLight.prototype.bindEvent = function (){
        
        
              //备份上下文,这里的this指的是JS实例
              var self = this;
              //当自己的dom被点击时
              this.dom.onclick = function (){
        
        
                  // 当被点击时,调用自己的changeColor方法
                  self.changeColor();
              };
          }
          // 改变颜色
          TrafficLight.prototype.changeColor = function (){
        
        
              // 改变自己的color属性,从而有一种"自治"的感觉,自己管理自己不干扰别的红绿灯
              this.color++;
              if(this.color == 4){
        
        
                  this.color = 1;
              }
              // 光color属性变化没用,还要更改自己的dom中src属性,才能更换图片
              this.dom.src = this.color+'.jpg';
          };
  
  
  
          // 得到盒子
          var box = document.getElementById('box');
  
          // 实例化100个
          var count = 100;
  
          // 当count-- 为0的时候,判断为false,跳出循环
          while(count--){
        
        
              new TrafficLight();
          }
  

2. Petit étui à billes coloré

• Propriétés de la classe Boll
  

• Méthodes de la classe Boll

  • méthode d'initialisation init()
  • méthode de mise à jour update()

• Réaliser l'animation de plusieurs petites balles

  • Mettez chaque instance de balle dans le même tableau
    • [{instance de balle},{instance de balle},{instance de balle},{instance de balle}]
  • Il vous suffit d'utiliser une minuterie pour parcourir chaque balle dans chaque image et appeler leur méthode de mise à jour

• Exemple de code :

   body{
        
        
          background-color: black;
        }
        .ball{
        
        
          position: absolute;
          border-radius: 50%;
        }
  

   //小球类
    function Ball(x,y){
        
        
      //属性x,y表示的是圆心的坐标
      this.x = x;
      this.y = y;
      //透明的
      this.opacity = 1;
      do{
        
        
          // 这个小球的x增量和y的增量
          this.dX = parseInt(Math.random()*20)-10;
          this.dY = parseInt(Math.random()*20)-10;
      }while(this.dX === 0 || this.dY === 0)
  
      // 小球的背景颜色
      this.color = colorArr[parseInt(Math.random()*colorArr.length)];
      // 小球半径
      this.r = 20;
      // 初始化
      this.init();
      // 把自己推入数组,注意:这里的this不是类本身,而是实例
        ballArr.push(this);
    }
    Ball.prototype.init = function (){
        
        
      //创建自己的dom
      this.dom = document.createElement('div');
      this.dom.className = 'ball';
      this.dom.style.width = this.r *2 +'px';
      this.dom.style.height = this.r *2 +'px';
      this.dom.style.left = this.x - this.r+'px';
      this.dom.style.top = this.y - this.r+'px';
      this.dom.style.backgroundColor = this.color;
      //上树
        document.body.appendChild(this.dom);
    }
  
    // 更新
    Ball.prototype.update = function (){
        
        
        // 位置改变
        this.x += this.dX;
        this.y -= this.dY;
        // 半径改变
        this.r += 0.2;
        // 透明度改变
        this.opacity -= 0.05;
        this.dom.style.width = this.r *2 +'px';
        this.dom.style.height = this.r *2 +'px';
        this.dom.style.left = this.x - this.r+'px';
        this.dom.style.top = this.y - this.r+'px';
        this.dom.style.opacity = this.opacity;
        // 当透明度小于0,就需要从数组中删除自己,DOM元素也要删除自己
        if(this.opacity<0){
        
        
            //从数组中删除自己
            for (var i = 0; i<ballArr.length;i++){
        
        
                if(ballArr[i] == this){
        
        
                    ballArr.splice(i,1);
                }
                //还要删除自己的dom
                document.body.removeChild(this.dom);
            }
        }
  
    };
  
  
    // 把所有的小球实例都放到一个数组中
    var ballArr = [];
    // 初始颜色数组
    var colorArr = ['#66CCCC','#CCFFCC','#FF99CC','#FF6666','#CC3399','#ff6600']
  
    // 定时器,负责更新所有的小球实例
    setInterval(function (){
        
        
        //遍历数组 ,调用update方法
        for(var i= 0;i<ballArr.length;i++){
        
        
          ballArr[i].update();
        }
    },20);
    // 鼠标指针的监听
    document.onmousemove = function (e){
        
        
        //得到鼠标指针的位置
        var x = e.clientX;
        var y = e.clientY;
        new Ball(x,y);
    }
  
  

Six, objets intégrés JS

1. Emballage

• Les instances de Number(), String() et Boolean() sont toutes des types d'objets et leurs propriétés Primitivevalue stockent leurs propres valeurs.
• La valeur de type de base de new peut normalement participer à l'opération
• Le but des classes wrapper est de permettre aux valeurs de type de base d'obtenir des méthodes à partir du prototype de leurs constructeurs

2. Objet mathématique★

• Puissance et racine carrée : Math.pow(), Math.sqrt()

• Arrondir vers le haut et vers le bas : Math.ceil(), Math.floor()

• Méthode Math.round() : arrondi

  • arrondir à deux décimales
    

• Math.max() : Récupère la valeur maximale de la liste des paramètres

  • Utilisez Math.max() pour trouver la valeur maximale d'un tableau

    • Math.max() exige que le paramètre soit "listé", pas un tableau

    • Avec la méthode apply, il peut spécifier le contexte de la fonction et transmettre des "valeurs dispersées" en tant que paramètres de la fonction sous la forme d'un tableau

      var arr = [3,6,9,2];
      var max = Math.max.apply(null,arr);
      console.log(max);  // 9
      

• Math.min() : Récupère la valeur minimale de la liste des paramètres

• Math.random() : Récupère un nombre décimal entre 0 et 1

  • Pour obtenir un entier dans l'intervalle [a,b], vous pouvez utiliser cette formule :
    • parseInt(Math.random()*(ba +1))+a

Objet 3.Date★

• Utilisez new Date() pour obtenir l'objet date de l'heure actuelle, qui est une valeur de type objet
  • Utilisez new Date(2023,6,26) pour obtenir l'objet date de la date spécifiée,
    • Notez que le deuxième paramètre représente le mois, à partir de 0, et 6 représente juillet
  • Il peut également être écrit sous la forme new Date('2023-07-26')
• Méthodes courantes de l'objet Date
  
• horodatage

  • L'horodatage représente le nombre de millisecondes à partir d'un certain moment le 1er janvier 1970 à zéro heure

  • L'objet date peut être transformé en horodatage par la méthode getTime() ou la fonction Date.parse()

  • En écrivant une nouvelle date (horodatage), l'horodatage peut être changé en un objet date

7. Héritage et constructeurs intégrés

• constructeur intégré

  • JavaScript possède de nombreux constructeurs intégrés . Par exemple, Array est le constructeur du type tableau, Function est le constructeur du type fonction et Object est le constructeur du type objet.
  • Le constructeur intégré est très utile. Toutes les méthodes de ce type sont définies sur le prototype de son constructeur intégré . Nous pouvons ajouter de nouvelles méthodes à cet objet pour étendre les fonctionnalités d'un certain type
  • Number\String\Boollearn est une classe wrapper pour trois types de valeurs de base. Les appeler avec new peut générer des versions "objet" des valeurs de type de base

• Relations constructeur intégrées

  • Toute fonction peut être considérée comme Fonction "nouvelle", y compris l'Objet
    

• Avec des constructeurs (également appelés "faux objets" ou "héritage classique")

  • Avantages : Résoudre le problème causé par la valeur du type de référence contenue dans le prototype et le problème inélégant du constructeur de la sous-classe
  • Principe : appelez le constructeur de la superclasse à l'intérieur du constructeur de la sous-classe , mais faites attention à utiliser call() pour lier le contexte

      function People(name,sex,age){
        
        
        this.name = name;
        this.sex = sex;
        this.age = age;
        this.arr = [22,33,44];
      }
      function Student(name,sex,age,school,sid){
        
        
        People.call(this,name,sex,age);  // 借助构造函数
        this.school = school;
        this.sid = sid;
      }
      var xiaoming = new Student('小明','男',12,'CSDN学校',123455);
      console.log(xiaoming);
    </script>
  

• Héritage de composition (le plus couramment utilisé)

  • Principe : La technologie d'emprunt de la chaîne prototype et d'emprunt du constructeur est combinée, aussi appelée héritage pseudo-classique
  • Inconvénients : Dans tous les cas, le constructeur de la superclasse sera appelé deux fois, une fois lors de la création du prototype de la sous-classe, et une fois à l'intérieur du constructeur de la sous-classe

      //父类
    function People(name,sex,age){
        
        
      this.name = name;
      this.sex = sex;
      this.age = age;
    }
    People.prototype.sayHello = function (){
        
        
        console.log('你好,我是'+this.name+'今年'+this.age+'岁了');
    }
    People.prototype.sleep = function (){
        
        
        console.log(this.name+'正在睡觉');
    }
  
      //子类
    function Student(name,sex,age,school,sid){
        
        
        //借助构造函数
        People.call(this,name,sex,age);
      this.school = school;
      this.sid = sid;
    }
    //实现继承:借助原型链
    Student.prototype = new People();
    Student.prototype.exam = function (){
        
        
        console.log(this.name + '正在考试')
    }
    Student.prototype.sayHello = function (){
        
        
        console.log('敬礼!你好,我是'+this.name+'今年'+this.age+'岁了'+this.school+'的学生');
    }
    var xiaoming = new Student('小明','男',12,'CSDN学校',123455);
    console.log(xiaoming);
    xiaoming.sayHello();
    xiaoming.sleep();
    xiaoming.exam();
  

• héritage prototype

  • Rencontrez Object.creat ()
    • IE9+ commence à prendre en charge la méthode Object.create(), qui peut créer un nouvel objet basé sur l'objet spécifié en tant que prototype , sans recourir au constructeur
    • Exemple:var obj2 = Object.create(obj1);
      
  • Concept : dans le cas où il n'est pas nécessaire de créer un constructeur, mais que vous souhaitez simplement que le nouvel objet soit "similaire" à l'objet existant, Object.create() peut être utilisé, ce qui s'appelle l'héritage prototypal

• héritage parasitaire

  • Écrivez une fonction qui reçoit un paramètre o, renvoie un nouvel objet p avec o comme prototype et ajoute une nouvelle méthode préfabriquée à p
    
  • L'héritage parasite consiste à écrire une fonction qui peut " améliorer l'objet ". Tant que l'objet est passé dans cette fonction, la fonction créera un nouvel objet basé sur cet objet et affectera une nouvelle méthode prédéfinie au nouvel objet.
  • L'héritage parasite est également un modèle utile dans les cas où les objets sont principalement considérés plutôt que les types et constructeurs personnalisés.
  • Inconvénients : l'utilisation de l'héritage parasite pour ajouter des fonctions aux objets réduira l'efficacité en raison de l'impossibilité de réutiliser les fonctions, c'est-à-dire que "la méthode n'est pas écrite sur le prototype "

• héritage compositionnel parasite

  • Hériter des propriétés en empruntant des constructeurs
  • Héritage des méthodes via une forme hybride de la chaîne prototype
  • Idée de base : Il n'est pas nécessaire d'appeler le constructeur du supertype pour spécifier le prototype du sous-type, tout ce dont nous avons besoin est une copie du prototype du supertype. Essentiellement, utilisez l'héritage parasite pour hériter du prototype du supertype, puis attribuez le résultat au prototype du sous-type

• opérateur instanceof

  • L'opérateur instanceof est utilisé pour détecter "si un objet est une instance d'une certaine classe", comme : xiaoming instanceof Student
  • Mécanisme sous-jacent : vérifiez si l'attribut Student.prototype est sur la chaîne de prototypes de xiaoming (combien de couches sont correctes, tant qu'il est là)