Comment comprendre la chaîne de prototypes javascript

La chaîne de prototypes est en fait une chaîne limitée entre des objets à instance limitée et des prototypes, qui est utilisée pour implémenter les propriétés partagées et l'héritage. Il existe deux problèmes principaux : 1. Il n'est pas pratique de transmettre des paramètres au type parent. 2. Le type référence dans le type parent est partagé par toutes les instances ;

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Que fait exactement le nouvel opérateur ? C’est en fait très simple, il fait trois choses.

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

Dans la première ligne, nous créons un objet vide obj

Dans la deuxième ligne, nous pointons le membre __proto__ de cet objet vide vers l'objet membre prototype de l'objet fonction de base

Dans la troisième ligne, nous pointons la fonction de base membre __proto__ de l'objet Remplacez le pointeur this par obj, puis appelez la fonction Base, nous attribuons donc une variable membre id à l'objet obj. La valeur de cette variable membre est "base".

Avant de parler de chaîne de prototypes, nous devons d'abord comprendre la relation entre les fonctions personnalisées et les fonctions, et quelles sont les relations inextricables entre les constructeurs, les prototypes et les instances ? En fait, toutes les fonctions sont des instances de Function. Il y a un attribut prototype sur le constructeur, qui est également un objet ; puis il y a un attribut constructeur sur l'objet prototype, qui pointe vers le constructeur et il y a un attribut _proto_ sur l'objet instance, qui pointe également vers le prototype ; . Objet, et cette propriété n'est pas une propriété standard et ne peut pas être utilisée en programmation. Cette propriété est utilisée en interne par le navigateur.

// _proto_
在函数里有一个属性prototype
由该函数创建的对象默认会连接到该属性上
    //prototype 与 _proto_ 的关系
_proto_是站在对象角度来说的
prototype 是站在构造函数角度来说的

Ensuite, regardons les images pour parler.

1. La relation entre les constructeurs, les prototypes et les instances

①+Objet

　 ②+Fonction+Objet+Array

Après avoir compris cela, discutons de ce qu'est une chaîne de prototypes. Pour parler franchement, il s'agit en fait d'une chaîne limitée formée entre des objets à instance limitée et des prototypes, qui est utilisée pour implémenter les propriétés partagées et l'héritage. Ensuite, regardons le code.

 var obj = new Object();
对象是有原型对象的
原型对象也有原型对象
   obj._proto_._proto_._proto_
原型对象也有原型对象，对象的原型对象一直往上找，会找到一个null
// 原型链示例
   var arr = [];
   arr -> Array.prototype ->Object.prototype -> null
   var o = new Object();
   o -> Object.prototype -> null;

function Foo1(){
   this.name1 = '1';
}
function Foo2(){
   this.name2 = '2';
}
Foo2.prototype = new Foo1();
function Foo3(){
   this.name = '3';
}
Foo3.prototype = new Foo2();
var foo3 = new Foo3();
console.dir(foo3);

　La prochaine étape est la question de l'héritage.

2. Héritage

　1) Héritage prototypique

function Animal(name){
       this.name = name;
   }
   function Tiger(color){
       this.color = color;
   }
//   var tiger = new Tiger('yellow');
//   console.log(tiger.color);
//   console.log(tiger.name);  //undefined
//      Tiger.prototype = new Animal('老虎');   //一种方式
   Object.prototype.name = '大老虎';   //第二种方式
        var tiger = new Tiger('yellow');
        console.log(tiger.color);
        console.log(tiger.name);

Il convient de noter qu'il y a deux problèmes principaux ici : ① Il n'est pas pratique de transmettre des paramètres au type parent ② Le type référence dans le type parent est utilisé par tous ; instances Share

2) ES5 fournit la méthode Object.create() pour implémenter l'héritage

————做兼容
  //shim垫片
    function create(obj){
        if(Object.create){
            return Object.create(obj);
        }else{
            function Foo(){}
            Foo.prototype = obj;
            return new Foo();
        }
    }

Cette méthode est une nouvelle fonctionnalité d'ES5, qui est en fait un héritage par copie.

3) Héritage de copie

var obj = {};
obj.extend = function(obj){
    for(var k in obj){
      this[k] = obj[k];
    }
}

4) Héritage de constructeur emprunté

- les membres du prototype dans le constructeur emprunté ne sont pas empruntés

function Animal(name){
    this.name = name;
}
function Mouse(nickname){
    Animal.call(this,'老鼠');
    this.nickname = nickname;
}
var m = new Mouse('杰瑞');
console.log(m.name);
console.log(m.nickname);

Problèmes existants : le problème de passage de paramètres dans l'héritage prototypique peut être résolu, mais les membres (propriétés et méthodes ) sur l'objet prototype dans le type parent ne peut pas être hérité de

5) Héritage combiné

- les objets prototypes sont dynamiques

function Person(name){
   this.name = name;
}
Person.prototype.showName = function(){
   console.log(this.name);
}
function Student(name,age){
   Person.call(this,name);
   this.age = age;
}
Student.prototype = new Person();
Student.prototype.contructor = Student;
Student.prototype.showAge = function(){
    console.log(this.age);
}
var stu = new Student('张三',12);
stu.showName();
stu.showAge();

[Héritage prototypique + héritage constructeur emprunté] Ses caractéristiques Cela signifie que chaque instance de l'attribut a une copie , et la méthode est partagée

[Résumé] Pour utiliser un mot très grossier, la soi-disant chaîne de prototypes est une façon de rechercher une mère, qui peut être comprise comme une personne née d'une mère humaine et d'un démon est né d'un monstre de. Il n'y a en fait qu'un seul noyau dans la chaîne de prototypes : le partage d'attributs et le contrôle indépendant. Lorsque votre instance d'objet nécessite des attributs indépendants, l'essence de toutes les méthodes est de créer des attributs dans l'instance d'objet. Si vous ne réfléchissez pas trop, vous pouvez définir directement les attributs indépendants dont vous avez besoin dans Person pour remplacer les attributs du prototype. En bref, lorsque vous utilisez l'héritage prototypique, vous devez accorder une attention particulière aux attributs du prototype, car ils affectent tous le corps entier. La méthode la plus utilisée actuellement est le mode combiné.

1. Chaîne de prototypes

1) La relation entre le constructeur, le prototype et l'instance

①Le constructeur a un attribut prototype, qui est un objet (une instance d'objet)

②Le prototype d'objet prototype a un attribut constructeur, cet attribut pointe au constructeur auquel appartient l'objet prototype

③Les objets d'instance ont un attribut _proto_, qui pointe également vers l'objet prototype du constructeur. Il s'agit d'un attribut non standard et ne peut pas être utilisé pour la programmation. navigateur lui-même

2) La relation entre prototype et _proto_

①prototype est un attribut du constructeur

②_proto_ est un attribut de l'objet instance

向 -Les deux pointent vers le même objet

[Résumé] i) la fonction est aussi un objet, l'objet n'est pas nécessairement la fonction

II) objets de l'objet : paires de valeurs clés désordonnées ; valeurs qu'il contient Il peut s'agir d'une valeur de n'importe quel type de données

      iii) L'objet est un conteneur, et ce conteneur contient (propriétés et méthodes)

3) Recherche d'attributs

  ① Lors de l'accès à un membre de l'objet, il sera d'abord dans l'objet Rechercher s'il y en a

② S'il n'y en a pas dans l'objet courant, trouver

③ ③ s'il n'est pas trouvé dans l'objet prototype dans l'objet prototype de la fonction structure, trouver le prototype de l'objet prototype.

2. Fonction

- Toutes les fonctions sont des instances de Fonction

①Objets locaux : objets indépendants de l'environnement hôte (navigateur) - y compris Objet, Tableau, Date, RegExp, Fonction, Erreur, Numéro, String , Boolean

②Objets intégrés - y compris Math, Global (fenêtre, variables globales en js), aucun nouveau

n'est nécessaire lors de leur utilisation ③Objets hôtes - y compris les objets personnalisés, DOM, BOM

【Apprentissage recommandé :

javascript tutoriel avancé】

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!