Héritage prototypage

Comme pour les autres types de données, un hérite des propriétés et méthodes d'un prototype Object intégré. Cela signifie que l'objet obtenu contient à la fois les propriétés que vous avez définies et propriété prototype contenant les méthodes héritées du prototype:

let myObject = {
   
'booleanValue' : true
};

myObject
;
> Object { booleanValue: true }
    booleanValue
: true
   
[[prototype]]: Object { }
            __defineGetter__
: function __defineGetter__()
            __defineSetter__
: function __defineSetter__()
            __lookupGetter__
: function __lookupGetter__()
            __lookupSetter__
: function __lookupSetter__()
            __proto__
:
                constructor
: function Object()
                hasOwnProperty
: function hasOwnProperty()
                isPrototypeOf
: function isPrototypeOf()
                propertyIsEnumerable
: function propertyIsEnumerable()
                toLocaleString
: function toLocaleString()
                toString
: function toString()
                valueOf
: function valueOf()
               
<get __proto__()>: function __proto__()
               
<set __proto__()>: function __proto__()

Les propriétés de prototype ne sont pas destinées à être accessibles directement par la clé de propriété. En tant que Comme vous pouvez le remarquer dans l'exemple précédent, cela est implicite par le [[prototype]] ou <prototype> utilisée dans les navigateurs consoles pour développeurs et les sources documentation pour la clé de propriété du prototype:

// Chrome:
let emptyObject
= {};

emptyObject
;
> {}
 
[[prototype]]: Object
// Firefox:
let emptyObject
= {};

emptyObject
;
> Object {  }
 
<prototype>: Object { }

Bien que tous les navigateurs courants utilisent __proto__ comme norme de facto, il ne s'agit pas formellement standardisées et doivent être évitées dans le code de production.

let emptyObject = {};

emptyObject
.__proto__;
> Object { }
    __defineGetter__
: function __defineGetter__()
    __defineSetter__
: function __defineSetter__()
    __lookupGetter__
: function __lookupGetter__()
    __lookupSetter__
: function __lookupSetter__()
    __proto__
:
        constructor
: function Object()
        hasOwnProperty
: function hasOwnProperty()
        isPrototypeOf
: function isPrototypeOf()
        propertyIsEnumerable
: function propertyIsEnumerable()
        toLocaleString
: function toLocaleString()
        toString
: function toString()
        valueOf
: function valueOf()
       
<get __proto__()>: function __proto__()
       
<set __proto__()>: function __proto__()

À la place, vous pouvez accéder directement au [[Prototype]] d'un objet et le modifier à l'aide des fonctionnalités intégrées Object.getPrototypeOf() et Object.setPrototypeOf() méthodes:

let myObj = { "value" : 5 };
let protoParent
= { "protoValue" : true };

myObj
;
Object { value: 5 }
    value
: 5
   
<prototype>: Object { }

Object.getPrototypeOf( myObj );
> Object { }
    __defineGetter__
: function __defineGetter__()
    __defineSetter__
: function __defineSetter__()
    __lookupGetter__
: function __lookupGetter__()
    __lookupSetter__
: function __lookupSetter__()
    __proto__
:
    constructor
: function Object()
    hasOwnProperty
: function hasOwnProperty()
    isPrototypeOf
: function isPrototypeOf()
    propertyIsEnumerable
: function propertyIsEnumerable()
    toLocaleString
: function toLocaleString()
    toString
: function toString()
    valueOf
: function valueOf()
   
<get __proto__()>: function __proto__()
   
<set __proto__()>: function __proto__()

Object.setPrototypeOf( myObj, protoParent );
> Object { value: 5 }
    value
: 5
   
<prototype>: Object { protoValue: true }

Pour différencier les propriétés héritées des propriétés définies par l'auteur, cette dernière est généralement appelée "propres propriétés" de l'objet.

La méthode Object.hasOwn() intégrée renvoie true si la propriété spécifiée est une propriété directe de l'objet, et false si la propriété est héritée ou n'existe pas. Dans la mesure du possible, utilisez Object.hasOwn(). au lieu de la méthode hasOwnProperty() héritée, qui n'est pas compatible Object.create()

let myObject = {
   
'myValue' : 100
};

Object.hasOwn( myObject, 'myValue' );
> true

myObject
.__proto__; // The Object prototype inherited by `myObject` is present:
> Object { }

Object.hasOwn( myObject, '__proto__' ); // The Object prototype inherited by `myObject` is not an "own property:"
> false

Testez vos connaissances

Pourquoi devez-vous éviter d'utiliser __proto__ ?

Elle n'est pas standardisée.
Cela perturbera les futurs responsables de votre code.
Elle n'est pas compatible avec de nombreux navigateurs.