#__proto__

[obscurejavascript]

__Proto__ vs Prototype In JavaScript

Note that since let and const are supported in all modern browsers and a good practice I will be using them instead of var. To support legacy environments, just use var instead.

prototype refers to a set of properties and functions that custom objects will have that inherit from the object that it is on. It can be thought of as a blueprint for child objects. For example:

console.log('prototype example:'); const ObjectA = function() {}; ObjectA.prototype.property1 = 'value1'; // Inherit (The constructor was not updated but is unused here) const ObjectAChild = function() {}; ObjectAChild.prototype = Object.create(ObjectA.prototype); ObjectAChild.prototype.property2 = 'value2'; let objectA = new ObjectA(); console.log(objectA.property1); // value 1 let objectAChild = new ObjectAChild(); console.log(objectAChild.property1, objectAChild.property2); // value 1 value 2 ObjectA.prototype.property1 = 'another value'; console.log(objectA.property1, objectAChild.property1); // another value another value

Notice how properties can be updated and instantly reflect in children. This is because if a property is not found at a current object, it checks its prototype (what the parent said should be inherited). Then if not found, it checks the prototypes prototype and so on until the Object prototype is reached. The implication is that inherited objects are just objects linked in a special way to another object.

The value of these links is the standard that makes accessing and analyzing them easier and the built in prototype checking algorithm. One of the ways to analyze an object is to look at an objects internal prototype. Remember that an objects prototype is for objects inherited from it, not the objects internal prototype. __proto__ allows you to get this. This can be used to get the properties that the project has that were not inherited. Using the previous code:

console.log(objectAChild.__proto__); // { property2: 'value2' }

Of course, you could just use the prototype directly on parent object that the child object was created from if you have access to it:

console.log(ObjectAChild.prototype); // { property2: 'value2' }

Finally, __proto__ has great JS environment support and is part of the ECMAScript standard (Which JavaScript is based on). But it was only added as a temporary measure until better APIs are fully supported like Object.getPrototypeOf(). So it is best to use Object.getPrototypeOf() when possible.

Github Location: https://github.com/Jacob-Friesen/obscurejs/blob/master/2017/protoVsPrototype.js

[yellowoverall]

Classes and Objects

Summary

Inheritance in JavaScript is all about setting up the prototype chain. This allows us to subclass, that is, create a "child" object that inherits most or all of a "parent" object's properties and methods. We can then implement any of the child object's unique properties and methods separately, while still retaining data and functionality from its parent.

An object (instance) is secretly linked to its constructor function's prototype object through that instance's __proto__ property. You should never use the __proto__ in any code you write. Using __proto__ in any code, or even inheriting just the prototype directly, leads to some unwanted side effects.

To efficiently manage inheritance in JavaScript, an effective approach is to avoid mutating the prototype completely. Object.create() allows us to do just that, taking in a parent object and returning a new object with its __proto__ property set to that parent object.

[mlbors]

prototype, __proto__ and classes with JS

Those aforementioned three words are relative to JavaScript and could sound very weird. Let's try to understand them!

JavaScript’s object system is based on prototypes, not classes. But what is the difference?

A class is like a blueprint. It is  a description of the object to be created. Classes inherit from classes and create subclass relationships.

A prototype is a working object instance. Objects inherit directly from other objects.

Every JavaScript object has a prototype. The prototype is also an object. All JavaScript objects inherit their properties and methods from their prototype. Objects created using an object literal, or with new Object(), inherit from a prototype called Object.prototype. The Object.prototype is on the top of the prototype chain.

function talk() { console.log(this.sound); } let animal() { talk; } let cat() { sound: "Dog" } let cat() { sound: "Maouw" } Object.setPrototypeOf(dog, animal); Object.setPrototypeOf(cat, animal); dog.talk; //will output "Woof" cat.talk; //will output "Maouw"

If we want to add a property or a method to the prototype, we can do it like so:

Animal.prototype.name = "My pet"; Animal.prototype.beNice = function() { console.log("I am nice"); };

We can also use the new operator which will call a constructor function. A constructor could be any function. Basically, when a constructor function is called, the following things happen:

A new object is created

The constructor property of the object is set

The object is set to delegate to the prototype

The prototype is called in the context of the new object

So, with a constructor function, we can use the new keyword to create new objects from the same prototype:

function Animal(sound) { this.sound = sound; this.makeSound = function() { console.log(this.sound); } } var dog = new Animal("Woof"); var cat = new Animal("Maouw"); dog.makeSound(); //will output "Woof" cat.makeSound(); //will output "Maouw"

Adding a new property to an existing object can be done like that:

dog.color = "Brown";

The property will be added to dog, not to cat and not to any other Animal objects.

Adding a new method to an existing object can be done this way:

cat.playWithMouse = function () { return "I am playing with a mouse!"; };

The method will only be added to cat.

Now, maybe you saw something like __proto__ and asked what it is.

__proto__ is the actual object that is used in the lookup chain to resolve methods. It is a property that all objects have. This is the property which is used by the JavaScript engine for inheritance. According to ECMA specifications it is supposed to be an internal property, however most vendors allow it to be accessed and modified. The use of __proto__ is controversial, and has been discouraged. It was never originally included in the ECMA specifications, but modern browsers decided to implement it anyway.

prototype is a property belonging only to functions. It is used to build __proto__ when the function happens to be used as a constructor with the new keyword.

So, where are the classes? In essence, a JavaScript class is just a Function object that serves as a constructor plus an attached prototype object Empty also referred as this. Classes in ES6 don't add any functionality to what we already have in the language, they are just a simpler syntax for building the same objects as we had before. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.

class Animal { constructor(sound) { this.sound = sound; } talk() { console.log(this.sound); } }

[edmundleex-blog]

Javascript Prototype, __proto__

Understanding prototype is the key of understanding inheritance chain in JS. Me, and many others were confused in the beginning by the concept of prototype and __proto__. In this post, I will attempt to address this confusion but will not go into inheritance chain.

In JS, all functions are objects. If you come from ruby, an object in JS is very much like a hash, or in python, a dictionary, which essentially are incapsulated key value pairs. Since function is an object, it can be stored as a value in these key value pair as a value. These key value pairs are called properties of the object in JS. Consider these two examples:

var foo = {     bar: ‘bar’,     foobar: ‘foobar’ };

var foobar = function () {     bar: ‘bar’,     foobar: function () {         return ‘foobar’;     } };

Function can serve purpose like ‘method’ in ruby. It can also be used as a class, or constructor function in JS language.

function foobar() {     return ‘foobar’; }

function Foobar() {     this.name = ‘foobar’; }

The second form of function is usually used as a constructor and can be invoked using the new keyword. Then it will create an object.

var foobar = new Foobar(); foobar.name // => ‘foobar’

But please be not confused by the capitalized name. They are both just a regular functions (capitalizing don’t serve any functional difference other than producing more readable codes in JS). As functions, they both can be invoked in a normal way, or as a constructor.

Let’s talk about prototype. 

Prototype is a property of function objects. And prototype is really just an object itself. It is an object that have key value pairs that stores all the functions of a specific constructor. Translate into ruby like explanation, the prototype object stores all the instance methods. All functions in JS have a prototype. Consider the function Foobar() example above. It will have a prototype property that looks as below.

{  constructor: function Foobar(),    __proto__: Object }

And we can add prototype function (or instance methods) like so:

Foobar.prototype.sayHello = function () {     return “Hello, I’m foobar”; }

After this, the prototype property (or object) of Foobar function will look like this:

{  constructor: function Foobar(),   __proto__: Object,   sayHello: function () }

What just happened is just simply a plain old property assignment. It has nothing different than doing this: cat.name = “Markov”.

In summary, prototype is just a storage property that keeps all the ‘instance methods’. And indeed, no one can prevent you from assigning a variable to it.

Foobar.prototype,aPlainStringVariable = “Just a string”; // this will work without any issue, and we will get a prototype like this: {  constructor: function Foobar(),  __proto__: Object,  sayHello: function (),   aPlainStringVariable: “Just a string” }

Ok, let’s talk about __proto__. This mysterious property is in all objects in JS. What it really is is just a pointer to the prototype object of its constructor function. Consider this:

var foobar = new Foobar(); return foobar.__proto__ === Foobar.prototype; // true

And because of this pointer, when we try to invoke a function on foobar, it will look for it in the foobar object literal. If it’s not found, then it will look for it in the prototype object, then chase up the chain (not going to discuss this though).

One thing to keep in mind is, prototype can be reassigned:

var Cat = function () {}; Cat.prototype = Foobar.prototype;

This will let my Cat have the exact same prototype as Foobar. But __proto__ can not be reassigned. If you ever attempt to, JS will just silently do nothing.

That’s all that I want to say today. If you are not satisfied, JavaScript Prototype in Plain Language by Richard is a good read about prototype.

[kazu69]

[kazu69]

[reinit-img-blog]