__proto__, when will it be gone? Alternatives?

by

Note: It’s considered a bad practice to change the value of __proto__. Doing so is strongly discouraged by Brendan Eich, the creator of JavaScript, amongst others. In fact the __proto__ property has been removed entirely from a few JavaScript engines like Rhino. If you wish to know why then read the following comment by Brendan Eich.

Update: Browsers are not going to remove the __proto__ property. In fact, ECMAScript Harmony has now standardized both the __proto__ property and the setPrototypeOf function. The __proto__ property is only supported for legacy reasons. You are strongly advised to use setPrototypeOf and getPrototypeOf instead of __proto__.

Warning: Although setPrototypeOf is now a standard, you are still discouraged from using it because mutating the prototype of an object invariably kills optimizations and makes your code slower. In addition, the use of setPrototypeOf is usually an indication of poor quality code.

You don’t need to worry about your existing code not working one day. The __proto__ property is here to stay.

Now, for the question at hand. We want to do something similar to this in a standards compliant way:

var a = {
    b: "ok"
};

a.__proto__ = {
    a: "test"
};

alert(a.a); // alerts test
alert(a.b); // alerts ok

Obviously you can’t use Object.create to achieve this end since we are not creating a new object. We are just trying to change the internal [[proto]] property of the given object. The problem is that it’s not possible to change the internal [[proto]] property of an object once it’s created (except via using __proto__ which we are trying to avoid).

So to solve this problem I wrote a simple function (note that it works for all objects except for functions):

function setPrototypeOf(obj, proto) {
    var result  = Object.create(proto);
    var names   = Object.getOwnPropertyNames(obj);
    var getProp = Object.getOwnPropertyDescriptor;
    var setProp = Object.defineProperty;
    var length  = names.length;
    var index   = 0;

    while (index < length) {
        var name = names[index++];
        setProp(result, name, getProp(obj, name));
    }

    return result;
}

So we can now change the prototype of any object after it’s created as follows (note that we are not actually changing the internal [[proto]] property of the object but instead creating a new object with the same properties as the given object and which inherits from the given prototype):

var a = {
    b: "ok"
};

a = setPrototypeOf(a, {
    a: "test"
});

alert(a.a); // alerts test
alert(a.b); // alerts ok
<script>
function setPrototypeOf(obj, proto) {
    var result  = Object.create(proto);
    var names   = Object.getOwnPropertyNames(obj);
    var getProp = Object.getOwnPropertyDescriptor;
    var setProp = Object.defineProperty;
    var length  = names.length;
    var index   = 0;

    while (index < length) {
        var name = names[index++];
        setProp(result, name, getProp(obj, name));
    }

    return result;
}
</script>

Simple and efficient (and we didn’t use the __proto__ property).

More Related Contents:

  1. Preserving a reference to “this” in JavaScript prototype functions [duplicate]
  2. How does __proto__ differ from constructor.prototype?
  3. What’s the purpose of prototype? [duplicate]
  4. Better way to sum a property value in an array
  5. Benefits of prototypal inheritance over classical?
  6. JavaScript: Class.method vs. Class.prototype.method
  7. prototype based vs. class based inheritance
  8. Understanding prototypal inheritance in JavaScript
  9. What does it mean that Javascript is a prototype based language?
  10. JavaScript instance functions versus prototype functions [duplicate]
  11. Defining prototype methods inside the constructor
  12. Javascript inheritance: call super-constructor or use prototype chain?
  13. Is there a good use case for the constructor property in Javascript?
  14. [[Prototype]] vs prototype: ..what is the difference? (MyCons.__proto__ === MyCons.prototype) equals FALSE
  15. prototypal inheritance concept in javascript as a prototype based language
  16. Is it ok to assign the JavaScript prototype object instead of just its properties?
  17. MongoDB, remove object from array
  18. Get the values from the “GET” parameters (JavaScript) [duplicate]
  19. How to find first element of array matching a boolean condition in JavaScript?
  20. How to loop through all the elements returned from getElementsByTagName [duplicate]
  21. React react-router-dom pass props to component
  22. Python library for rendering HTML and javascript [closed]
  23. Assign multiple variables to the same value in Javascript?
  24. How to set prefixed CSS3 transitions using JavaScript?
  25. How to programmatically clear/reset React-Select?
  26. Elegant way to copy only a part of an object [duplicate]
  27. Adding Prototype to JavaScript Object Literal
  28. AngularJS and WebSockets beyond
  29. Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null [closed]
  30. Conflict on Template of Twig and Vue.js

Leave a Comment