web-dev-qa-db-fra.com

__proto__ VS. prototype en JavaScript

Cette figure montre à nouveau que chaque objet a un prototype. Constructeur function Foo a aussi son propre __proto__ qui est Function.prototype, et qui à son tour fait également référence à nouveau par l'intermédiaire de sa propriété __proto__ à le Object.prototype. Ainsi, répétez, Foo.prototype est juste un explicite propriété de Foo qui fait référence au prototype d’objets b et c.

var b = new Foo(20);
var c = new Foo(30);

Quelles sont les différences entre les propriétés __proto__ et prototype?

enter image description here

Le chiffre est tiré de ici .

664
0x90

__proto__ est l'objet utilisé dans la chaîne de recherche pour résoudre les méthodes, etc. prototype est l'objet utilisé pour générer __proto__ lorsque vous créez un objet avec new:

( new Foo ).__proto__ === Foo.prototype;
( new Foo ).prototype === undefined;
652
Mark Kahn

prototype est une propriété d'un objet Function. C'est le prototype des objets construits par cette fonction.

__proto__ est la propriété interne d'un objet pointant vers son prototype. Les normes actuelles fournissent une méthode Object.getPrototypeOf(O) équivalente, bien que le __proto__ de facto standard soit plus rapide.

Vous pouvez trouver les relations instanceof en comparant la prototype d'une fonction à la chaîne __proto__ d'un objet et vous pouvez rompre ces relations en modifiant prototype.

function Point(x, y) {
    this.x = x;
    this.y = y;
}

var myPoint = new Point();

// the following are all true
myPoint.__proto__ == Point.prototype
myPoint.__proto__.__proto__ == Object.prototype
myPoint instanceof Point;
myPoint instanceof Object;

Ici Point est une fonction constructeur, elle construit un objet (structure de données) de manière procédurale. myPoint est un objet construit par Point() afin que Point.prototype soit enregistré dans myPoint.__proto__ à ce moment.

304
Imp

La propriété prototype est créée lorsqu'une fonction est déclarée. 

Par exemple:

 function Person(dob){
    this.dob = dob
 }; 

La propriété Person.prototype est créée en interne une fois que vous avez déclaré la fonction ci-dessus . De nombreuses propriétés peuvent être ajoutées à Person.prototype et sont partagées par les instances Person créées à l'aide de new Person ().

// adds a new method age to the Person.prototype Object.
Person.prototype.age = function(){return date-dob}; 

Il est à noter que Person.prototype est un littéral Object par défaut (il peut être modifié si nécessaire). 

Chaque instance créée à l'aide de new Person () a une propriété __proto__ qui pointe vers le Person.prototype. Il s'agit de la chaîne utilisée pour parcourir une propriété pour un objet particulier. 

var person1 = new Person(somedate);
var person2 = new Person(somedate);

crée 2 instances de Person, ces 2 objets peuvent appeler la propriété age de Person.prototype comme person1.age, person2.age.

Dans l'image ci-dessus, vous pouvez voir que Foo est un objet Function. Il comporte donc un lien __proto__ vers Function.prototype, qui est à son tour une instance de Object et un lien __proto__ vers Object.prototype. Le lien proto se termine ici par __proto__ dans Object.prototype pointant vers null.

Tout objet peut avoir accès à toutes les propriétés de sa chaîne proto liées par __proto__, formant ainsi la base de l'héritage prototypique.

__proto__ n'est pas un moyen standard d'accéder à la chaîne de prototypes, l'approche standard mais similaire consiste à utiliser Object.getPrototypeOf (obj).

Le code ci-dessous pour l'opérateur instanceof donne une meilleure compréhension:

object instanceof L'opérateur de classe retourne true lorsqu'un objet est une instance d'une classe. Plus précisément, si Class.prototype est trouvé dans la chaîne proto de cet objet, l'objet est une instance de cette classe.

function instanceOf(Func){
var obj = this;
while(obj !== null){
    if(Object.getPrototypeOf(obj) === Func.prototype)
        return true;
    obj = Object.getPrototypeOf(obj);
}
return false;
}

La méthode ci-dessus peut être appelée en tant que: instanceOf.call(object,Class) qui renvoie true si object est une instance de Class.

104
sid_k_reddy

Une bonne façon de penser à cela est ...

prototype est utilisé par les fonctions constructor(). Cela aurait dû vraiment s'appeler quelque chose comme, "prototypeToInstall", puisque c'est ce que c'est.

et __proto__ est ce "prototype installé" sur un objet (créé/installé sur l'objet à partir de ladite fonction constructor())

60
sarink

Prototype VS. __proto__ VS. [[Prototype]]

Lors de la création d'une fonction, un objet de propriété appelé prototype est créé automatiquement (vous ne l'avez pas créé vous-même) et est associé à l'objet de fonction (la constructor).
Note: ce nouvel objet prototype pointe également vers, ou possède un lien interne privé à, l'objet JavaScript natif.

Exemple:

function Foo () {
    this.name = 'John Doe';
}

// Foo has an object property called prototype.
// prototype was created automatically when we declared the function Foo.
Foo.hasOwnProperty('prototype'); // true

// Now, we can assign properties and methods to it:
Foo.prototype.myName = function () {
    return 'My name is ' + this.name;
}

Si vous créez un nouvel objet à partir de Foo à l'aide du mot clé new, vous créez (entre autres) un nouvel objet comportant un lien internal ou privé vers le prototype de la fonction Foo dont nous avons déjà parlé:

var b = new Foo();

b.[[Prototype]] === Foo.prototype  // true


Le lien private à l'objet de cette fonction appelé prototype de doubles crochets ou simplement [[Prototype]]. De nombreux navigateurs nous fournissent un lien public appelé __proto__!

Pour être plus précis, __proto__ est en fait une fonction getter qui appartient à l’objet JavaScript natif. Il renvoie le lien prototype interne-privé de la liaison this (renvoie le [[Prototype]] de b):

b.__proto__ === Foo.prototype // true

Il est à noter que, à partir de ECMAScript5, vous pouvez également utiliser la méthode getPrototypeOf pour obtenir le lien privé interne:

Object.getPrototypeOf(b) === b.__proto__ // true


NOTE: cette réponse ne vise pas à couvrir tout le processus de création de nouveaux objets ou de nouveaux constructeurs, mais à aider à mieux comprendre ce qu'est __proto__, prototype et [[Prototype]] et son fonctionnement.

43
Lior Elrom

Pour expliquer laissez-nous créer une fonction

 function a (name) {
  this.name = name;
 }

Lorsque JavaScript exécute ce code, il ajoute la propriété prototype à a. La propriété prototype est un objet comportant deux propriétés:

  1. constructor
  2. __proto__

Alors quand on fait

a.prototype il retourne 

     constructor: a  // function definition
    __proto__: Object

Comme vous pouvez le constater, constructor n'est rien d'autre que la fonction a elle-même Et __proto__ pointe vers le niveau racine Object de JavaScript.

Voyons ce qui se passe lorsque nous utilisons la fonction a avec la clé new Word.

var b = new a ('JavaScript');

Lorsque JavaScript exécute ce code, il fait 4 choses:

  1. Il crée un nouvel objet, un objet vide // {}
  2. Il crée __proto__ sur b et le fait pointer sur a.prototype so b.__proto__ === a.prototype
  3. Il exécute a.prototype.constructor (qui est la définition de la fonction a) avec le nouvel objet créé (créé à l'étape 1) comme contexte (this), d'où la propriété name passée en tant que 'JavaScript' (qui est ajouté à this) est ajouté à la nouvelle objet créé.
  4. Il retourne le nouvel objet créé (créé à l’étape 1) afin que var b soit affecté à l’objet nouvellement créé.

Maintenant, si nous ajoutons a.prototype.car = "BMW" et faisons b.car, la sortie "BMW" apparaît.

en effet, lorsque JavaScript a exécuté ce code, il a recherché la propriété car sur b et n'a pas trouvé le code JavaScript utilisé alors b.__proto__ (qui a été créé pour pointer sur 'a.prototype' à l'étape 2) et a trouvé la propriété car afin de renvoyer "BMW" .

41
Manishz90

Pour être un peu clair en plus des bonnes réponses ci-dessus:

function Person(name){
    this.name = name
 }; 

var eve = new Person("Eve");

eve.__proto__ == Person.prototype //true

eve.prototype  //undefined

Les instances ont_PROTO_, classes ont prototype .

24
serkan

En JavaScript, une fonction peut être utilisée en tant que constructeur. Cela signifie que nous pouvons créer des objets avec le nouveau mot-clé. Chaque fonction constructeur est livrée avec un objet intégré enchaîné avec elles. Cet objet intégré s'appelle un prototype. Instances of a constructor function use __proto__ to access the prototype property of its constructor function.

 prototype diagram

  1. Nous avons d'abord créé un constructeur: function Foo(){}. Pour être clair, Foo est juste une autre fonction. Mais nous pouvons en créer un objet avec le nouveau mot-clé. C'est pourquoi nous l'appelons la fonction constructeur

  2. Chaque fonction a une propriété unique appelée la propriété prototype. Ainsi, la fonction constructeur Foo a une propriété prototype qui pointe vers son prototype, qui est Foo.prototype (voir image).

  3. Les fonctions de constructeur sont elles-mêmes une fonction qui est une instance d'un constructeur de système appelé constructeur [[Fonction]]. On peut donc dire que function Foo est construit par un constructeur [[Fonction]]. Donc, __proto__ de notre Foo function pointera vers le prototype de son constructeur, qui est Function.prototype.

  4. Function.prototype n'est en soi qu'un objet construit à partir d'un autre constructeur système appelé [[Object]]. Donc, [[Object]] est le constructeur de Function.prototype. Donc, nous pouvons dire que Function.prototype est une instance de [[Object]]. Donc, __proto__ sur Function.prototype pointe sur Object.prototype.

  5. Object.prototype est le dernier homme debout dans la chaîne du prototype. Je veux dire qu'il n'a pas été construit. C'est déjà là dans le système. Donc, son __proto__ pointe sur null.

  6. Nous arrivons maintenant aux exemples de Foo. Lorsque nous créons une instance à l'aide de new Foo(), il crée un nouvel objet qui est une instance de Foo. Cela signifie que Foo est le constructeur de ces instances. Ici nous avons créé deux instances (x et y). __proto__ de x et y pointe donc vers Foo.prototype.

8
AL-zami

Un autre bon moyen de le comprendre:

var foo = {}

/* 
foo.constructor is Object, so foo.constructor.prototype is actually 
Object.prototype; Object.prototype in return is what foo.__proto__ links to. 
*/
console.log(foo.constructor.prototype === foo.__proto__);
// this proves what the above comment proclaims: Both statements evaluate to true.
console.log(foo.__proto__ === Object.prototype);
console.log(foo.constructor.prototype === Object.prototype);

Seulement après IE11 __proto__ est pris en charge. Avant cette version, telle que IE9, vous pouviez utiliser constructor pour obtenir le __proto__.

6
Yad Smood

J'apprends le prototype de Vous ne savez pas JS: this & Object Prototypes , qui est un livre merveilleux pour comprendre la conception sous-jacente et clarifier de nombreuses idées fausses des choses comme instanceof). 

Mais j'ai la même question que les gens ont demandé ici. Plusieurs réponses sont vraiment utiles et éclairantes. J'aimerais aussi partager mes compréhensions. 


Qu'est ce qu'un prototype?

Les objets en JavaScript ont une propriété interne, désignée dans la spécification par le code[[Prototype]], qui est simplement une référence à un autre objet. Presque tous les objets reçoivent une valeur non -null pour cette propriété, au moment de leur création.

Comment obtenir le prototype d'un objet?

via __proto__ou Object.getPrototypeOf

var a = { name: "wendi" };
a.__proto__ === Object.prototype // true
Object.getPrototypeOf(a) === Object.prototype // true

function Foo() {};
var b = new Foo();
b.__proto__ === Foo.prototype
b.__proto__.__proto__ === Object.prototype

Quelle est la prototype?

prototype est un objet créé automatiquement en tant que propriété spéciale d'un function, utilisé pour établir la chaîne de délégation (héritage), également appelée chaîne de prototype.

Lorsque nous créons une fonction a, prototype est automatiquement créée en tant que propriété spéciale sur a et enregistre le code de fonction sous le constructor sur prototype.

function Foo() {};
Foo.prototype // Object {constructor: function}
Foo.prototype.constructor === Foo // true

J'aimerais bien considérer cette propriété comme l'endroit où stocker les propriétés (y compris les méthodes) d'un objet fonction. C'est aussi la raison pour laquelle les fonctions utilitaires dans JS sont définies comme suit: Array.prototype.forEach(), Function.prototype.bind(), Object.prototype.toString().

Pourquoi accentuer la propriété d'une fonction?

{}.prototype // undefined;
(function(){}).prototype // Object {constructor: function}

// The example above shows object does not have the prototype property.
// But we have Object.prototype, which implies an interesting fact that
typeof Object === "function"
var obj = new Object();

Donc, Arary, Function, Object sont toutes les fonctions. Je dois admettre que cela rafraîchit mon impression sur JS. Je sais que les fonctions sont des citoyens de première classe dans JS, mais il semble que cela repose sur des fonctions.

Quelle est la différence entre __proto__ et prototype?

__proto__a référence fonctionne sur chaque object pour faire référence à sa propriété [[Prototype]].

prototype est un objet créé automatiquement en tant que propriété spéciale d'un function, utilisé pour stocker les propriétés (y compris les méthodes) d'un objet fonction.

Avec ces deux, nous pourrions tracer mentalement la chaîne de prototypes. Comme cette image illustre:

function Foo() {}
var b = new Foo();

b.__proto__ === Foo.prototype // true
Foo.__proto__ === Function.prototype // true
Function.prototype.__proto__ === Object.prototype // true
6
ifyouseewendy

Pour le dire simplement:

> var a = 1
undefined
> a.__proto__
[Number: 0]
> Number.prototype
[Number: 0]
> Number.prototype === a.__proto__
true

Cela vous permet d'attacher des propriétés à X.prototype APRÈS que les objets de type X aient été instanciés et qu'ils aient toujours accès à ces nouvelles propriétés via la référence __proto__ utilisée par le moteur Javascript pour remonter la chaîne de prototypes.

4
Andreas Bergström

prototype

le prototype est une propriété d'une fonction. C'est le plan de création d'objets en utilisant cette fonction (constructeur) avec un nouveau mot clé.

__proto__

__proto__ est utilisé dans la chaîne de recherche pour résoudre des méthodes, des propriétés. lorsqu'un objet est créé (à l'aide de la fonction constructeur avec un nouveau mot clé), __proto__ est défini sur (constructeur) Function.prototype

function Robot(name) {
    this.name = name;
}
var robot = new Robot();

// the following are true   
robot.__proto__ == Robot.prototype
robot.__proto__.__proto__ == Object.prototype

Voici mon explication (imaginaire) pour effacer la confusion:

Imaginez qu’il existe une classe imaginaire (blueprint/coockie cutter) associée à une fonction. Cette classe imaginaire est utilisée pour instancier des objets. prototype est le mécanisme d'extention (méthode d'extention en C # ou Swift Extension) permettant d'ajouter des éléments à cette classe imaginaire. 

function Robot(name) {
    this.name = name;
}

Ce qui précède peut être imaginé comme:  

// imaginary class
class Robot extends Object{

    static prototype = Robot.class  
    // Robot.prototype is the way to add things to Robot class
    // since Robot extends Object, therefore Robot.prototype.__proto__ == Object.prototype

    var __proto__;

    var name = "";

    // constructor
    function Robot(name) {

        this.__proto__ = prototype;
        prototype = undefined;

        this.name = name;
    }

} 

Alors,  

var robot = new Robot();

robot.__proto__ == Robot.prototype
robot.prototype == undefined
robot.__proto__.__proto__ == Object.prototype

Ajout de la méthode à la prototype de Robot:

Robot.prototype.move(x, y) = function(x, y){ Robot.position.x = x; Robot.position.y = y};
// Robot.prototype.move(x, y) ===(imagining)===> Robot.class.move(x, y)

Ce qui précède peut être imaginé comme une extension de la classe Robot: 

// Swift way of extention
extension Robot{
    function move(x, y){    
        Robot.position.x = x; Robot.position.y = y
    }
}

Lequel, à son tour,  

// imaginary class
class Robot{

    static prototype = Robot.class // Robot.prototype way to extend Robot class
    var __proto__;

    var name = "";

    // constructor
    function Robot(name) {

        this.__proto__ = prototype;
        prototype = undefined;

        this.name = name;
    }

    // added by prototype (as like C# extension method)
    function move(x, y){ 
        Robot.position.x = x; Robot.position.y = y
    };
}
4
Hassan Tareq

Je sais, je suis en retard, mais laissez-moi essayer de le simplifier. 

Disons qu'il y a une fonction 

    function Foo(message){

         this.message = message ; 
     };

     console.log(Foo.prototype);

La fonction Foo aura un objet prototype lié. Ainsi, chaque fois que nous créons une fonction en JavaScript, un objet prototype lui est toujours associé. 

Continuons maintenant et créons deux objets en utilisant la fonction Foo. 

    var a = new Foo("a");
    var b = new Foo("b");
    console.log(a.message);
    console.log(b.message);
  1. Maintenant nous avons deux objets, objet a et objet b. Les deux sont créés En utilisant le constructeur Foo. Gardez à l'esprit le constructeur n'est qu'un mot ici. 
  2. Les objets a et b ont tous deux une copie de la propriété de message.
  3. Ces deux objets a et b sont liés à l'objet prototype du constructeur Foo.
  4. Sur les objets a et b, nous pouvons accéder au prototype Foo en utilisant la propriété proto dans tous les navigateurs et dans IE, nous pouvons utiliser Object.getPrototypeOf (a) ou Object.getPrototypeOf (b)

Maintenant, Foo.prototype, a. proto , et b. proto tout dénote le même objet. 

    b.__proto__ === Object.getPrototypeOf(a);
    a.__proto__ ===  Foo.prototype;
    a.constructor.prototype  === a.__proto__;

tout ce qui précède reviendrait vrai. 

Comme nous le savons, en JavaScript, les propriétés peuvent être ajoutées dynamiquement. Nous pouvons ajouter une propriété à un objet 

    Foo.prototype.Greet = function(){

         console.log(this.message);
    }
    a.Greet();//a
    b.Greet();//b
    a.constructor.prototype.Greet();//undefined 

Comme vous le voyez, nous avons ajouté la méthode Greet () dans Foo.prototype, mais elle est accessible dans a et b ou dans tout autre objet construit à l'aide de Foo. 

Lors de l'exécution de a.Greet (), JavaScript recherchera d'abord Greet dans la liste des propriétés de l'objet. En ne trouvant pas, il montera dans proto chain of a. Comme a. proto et Foo.prototype sont identiques, JavaScript trouvera la méthode Greet () et l’exécutera. 

J'espère que maintenant prototype et proto est un peu simplifié. 

3
debugmode

Prototype ou Object.prototype est une propriété d'un littéral d'objet. Il représente l'objet prototype Object que vous pouvez remplacer pour ajouter d'autres propriétés ou méthodes plus loin dans la chaîne de prototypes. 

_PROTO_ est une propriété d'accesseur (fonction get et set) qui expose le prototype interne d'un objet via lequel il est accédé.

Références:

  1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype
  2. http://www.w3schools.com/js/js_object_prototypes.asp

  3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto

3
akodevs

Résumé:

La propriété __proto__ d'un objet est une propriété mappée sur la prototype de la fonction constructeur de l'objet. En d'autres termes:

instance.__proto__ === constructor.prototype // true

Ceci est utilisé pour former la chaîne prototype d'un objet. La chaîne prototype est un mécanisme de recherche des propriétés sur un objet. Si l'on accède à la propriété d'un objet, JavaScript examinera d'abord l'objet lui-même. Si la propriété n’y est pas trouvée, elle montera jusqu’à protochain jusqu’à ce qu’elle soit trouvée (ou non)

Exemple:

function Person (name, city) {
  this.name = name;
}

Person.prototype.age = 25;

const willem = new Person('Willem');

console.log(willem.__proto__ === Person.prototype); // the __proto__ property on the instance refers to the prototype of the constructor

console.log(willem.age); // 25 doesn't find it at willem object but is present at prototype
console.log(willem.__proto__.age); // now we are directly accessing the prototype of the Person function 

Notre premier journal a pour résultat true, car, comme indiqué, la propriété __proto__ de l'instance créée par le constructeur fait référence à la propriété prototype du constructeur. N'oubliez pas qu'en JavaScript, les fonctions sont aussi des objets. Les objets peuvent avoir des propriétés et une propriété par défaut de toute fonction est une propriété nommée prototype.

Ensuite, lorsque cette fonction est utilisée en tant que fonction constructeur, l'objet instancié à partir de celle-ci recevra une propriété appelée __proto__. Et cette propriété __proto__ fait référence à la propriété prototype de la fonction constructeur (que chaque fonction possède par défaut).

Pourquoi est-ce utile?

JavaScript a un mécanisme lors de la recherche de propriétés sur Objects qui s'appelle 'héritage prototypal' , voici en gros ce qu'il fait:

  • Tout d'abord, il est vérifié si la propriété est située sur l'objet lui-même. Si tel est le cas, cette propriété est renvoyée.
  • Si la propriété n'est pas située sur l'objet lui-même, il "montera le protocole". Il s’agit essentiellement de l’objet référencé par la propriété __proto__. Là, il vérifie si la propriété est disponible sur l'objet référencé par __proto__.
  • Si la propriété ne se trouve pas sur l'objet __proto__, elle remontera la chaîne __proto__ jusqu'à l'objet Object.
  • S'il ne peut trouver la propriété nulle part sur l'objet et sa chaîne prototype, il renverra undefined.

Par exemple:

function Person (name) {
  this.name = name;
}

let mySelf = new Person('Willem');

console.log(mySelf.__proto__ === Person.prototype);

console.log(mySelf.__proto__.__proto__ === Object.prototype);

2
Willem van der Veen

DÉFINITIONS

(le numéro entre parenthèses () est un lien vers le code écrit ci-dessous)

prototype- un objet qui consiste en:
=> fonctions (3) de ceci ConstructorFunction.prototype (5) particulier accessible par chaque objet (4) créé ou à créer via cette fonction constructeur (1)
=> la fonction constructeur elle-même (1)
=> __proto__ de cet objet particulier (objet prototype)

__proto__(dandor proto?) - un lien entre tout objet (2) créé par une fonction constructeur particulière (1) ET les propriétés de l'objet prototype (5) de ce constructeur qui permet à chaque objet créé (2) d'avoir accès aux fonctions et méthodes du prototype (4) (__proto__ est inclus par défaut dans chaque objet de JS)

CLARIFICATION DU CODE

1.

    function Person (name, age) {
        this.name = name;
        this.age = age;  

    } 

2.

    var John = new Person(‘John’, 37);
    // John is an object

    Person.prototype.getOlder = function() {
        this.age++;
    }
    // getOlder is a key that has a value of the function

4.

    John.getOlder();

5.

    Person.prototype;
2
Eduard

Chaque fonction que vous créez a une propriété appelée prototype et commence sa vie en tant qu’objet vide. Cette propriété ne sert à rien tant que vous n’utilisez pas cette fonction en tant que fonction constructeur, c’est-à-dire avec le mot clé 'new' 

Ceci est souvent confondu avec la propriété __proto__ d'un objet. Certains pourraient être confus et sauf que la propriété prototype d'un objet pourrait leur donner le proto d'un objet. Mais ce n'est pas le cas. prototype est utilisé pour obtenir le __proto__ d'un objet créé à partir d'un constructeur de fonction.

Dans l'exemple ci-dessus:

function Person(name){
    this.name = name
}; 

var eve = new Person("Eve");

console.log(eve.__proto__ == Person.prototype) // true
// this is exactly what prototype does, made Person.prototype equal to eve.__proto__

J'espère que ça a du sens.

1
Malkeet Singh

Exemple explicatif: 

function Dog(){}
Dog.prototype.bark = "woof"

let myPuppie = new Dog()

À présent, myPupppie a la propriété __proto__ qui pointe vers Dog.prototype.

> myPuppie.__proto__
>> {bark: "woof", constructor: ƒ}

mais myPuppie n'a PAS de propriété prototype.

> myPuppie.prototype
>> undefined

Ainsi, __proto__ de mypuppie est la référence de la propriété .prototype de la fonction constructeur utilisée pour instancier cet objet (et l'objet myPuppie en cours a une relation "délégués à" avec cet objet __proto__), alors que La propriété de myPuppie est simplement absente (puisque nous ne l’avons pas définie).

Bonne explication par MPJ ​​ici: proto vs prototype - Création d’objet en JavaScript

1
Nitin Jadhav

Je vais essayer une explication de 4e année:

Les choses sont très simples. Un prototype est un exemple de la manière dont quelque chose devrait être construit. Alors:

  • Je suis une function et je construis de nouveaux objets similaires à ma prototype

  • Je suis une object et j'ai été construit en utilisant mon __proto__ comme exemple

preuve :

function Foo() { }

var bar = new Foo()

// `bar` is constructed from how Foo knows to construct objects
bar.__proto__ === Foo.prototype // => true

// bar is an instance - it does not know how to create objects
bar.prototype // => undefined
1
vladCovaliov

__proto__ est la base pour construire prototype et une fonction constructeur, par exemple: function human(){} a prototype qui est partagée via __proto__ dans la nouvelle instance de la fonction constructeur. Une lecture plus détaillée ici

1
Jyoti Duhan

  JavaScript prototype vs __prototype__

'use strict'
function A() {}
var a = new A();
class B extends A {}
var b = new B();
console.log('====='); // =====
console.log(B.__proto__ === A); // true
console.log(B.prototype.__proto__ === A.prototype); // true
console.log(b.__proto__ === B.prototype); // true
console.log(a.__proto__ === A.prototype); // true
console.log(A.__proto__ === Function.__proto__); // true
console.log(Object.__proto__ === Function.__proto__); // true
console.log(Object.prototype === Function.__proto__.__proto__); // true
console.log(Object.prototype.__proto__ === null); // true

En JavaScript, chaque objet (la fonction est aussi un objet!) A une propriété __proto__, la propriété fait référence à son prototype.

Lorsque nous utilisons l'opérateur new avec un constructeur pour créer un nouvel objet, la propriété __proto__ de Du nouvel objet est définie avec la propriété prototype du constructeur, puis le constructeur est appelé par le nouvel objet, Le processus "ceci" sera une référence au nouvel objet dans la portée du constructeur, pour finalement renvoyer le nouvel objet.

Le prototype du constructeur est la propriété __proto__, la propriété du constructeur prototype correspond au travail avec l'opérateur new.

Le constructeur doit être une fonction, mais la fonction n'est pas toujours constructeur même si elle possède la propriété prototype.

La chaîne de prototypes est en réalité la propriété __proto__ de l'objet pour référencer son prototype, .__ et la propriété __proto__ du prototype pour référencer le prototype du prototype, et ainsi de suite, .__ jusqu'à la référence à la propriété __proto__ du prototype de l'objet qui est référée à null.

Par exemple:

console.log(a.constructor === A); // true
// "a" don't have constructor,
// so it reference to A.prototype by its ``__proto__`` property,
// and found constructor is reference to A

La propriété [[Prototype]] et __proto__ est en fait la même chose.

Nous pouvons utiliser la méthode getPrototypeOf de Object pour obtenir le prototype de quelque chose.

console.log(Object.getPrototypeOf(a) === a.__proto__); // true

Toute fonction que nous avons écrite peut être utilisée pour créer un objet avec l'opérateur new, Ainsi, n'importe laquelle de ces fonctions peut être un constructeur.

1
林奕忠

Qu'en est-il de l'utilisation de __proto__ pour les méthodes statiques?

function Foo(name){
  this.name = name
  Foo.__proto__.collection.Push(this)
  Foo.__proto__.count++

}

Foo.__proto__.count=0
Foo.__proto__.collection=[]

var bar = new Foo('bar')
var baz = new Foo('baz')

Foo.count;//2
Foo.collection // [{...}, {...}]
bar.count // undefined
0
Barrard

Comme ceci à juste titre

__proto__ est l'objet utilisé dans la chaîne de recherche pour résoudre les méthodes, etc. prototype est l'objet utilisé pour générer __proto__ lorsque vous créez un objet avec le nouveau:

( new Foo ).__proto__ === Foo.prototype;
( new Foo ).prototype === undefined;

Nous pouvons en outre noter que la propriété __proto__ d'un objet créé à l'aide du constructeur de la fonction pointe vers l'emplacement de mémoire pointé par prototype, propriété de ce constructeur respectif.

Si nous changeons l'emplacement mémoire de prototype de la fonction constructeur, __proto__ de l'objet dérivé continuera à pointer vers l'espace d'adressage d'origine. Par conséquent, pour rendre la propriété commune disponible dans la chaîne d'héritage, ajoutez toujours la propriété à la fonction constructeur prototype, au lieu de la réinitialiser (ce qui changerait l'adresse de sa mémoire).

Prenons l'exemple suivant:

function Human(){
    this.speed = 25;
}

var himansh = new Human();

Human.prototype.showSpeed = function(){
    return this.speed;
}

himansh.__proto__ === Human.prototype;  //true
himansh.showSpeed();    //25

//now re-initialzing the Human.prototype aka changing its memory location
Human.prototype = {lhs: 2, rhs:3}

//himansh.__proto__ will still continue to point towards the same original memory location. 

himansh.__proto__ === Human.prototype;  //false
himansh.showSpeed();    //25
0
Himansh

(function(){ 
      let a = function(){console.log(this.b)};
      a.prototype.b = 1;
      a.__proto__.b = 2;
      let q = new a();
      console.log(a.b);
      console.log(q.b) 
    })()

Essayez ce code pour comprendre

0
Timur