Clever Geek Handbook

Javascript: understanding the prototype chain

I created a simple class like this:

var Class = function() {};
Class.prototype.testObj = {a:2, b:3};

Now if I do console.log(Class.testObj)

, I get undefined

. But if I create an instance of this class like this:

var instance = new Class();
console.log(instance.testObj)

I am getting the expected result.

In my understanding, all variables are treated as objects and have a prototype property. When any key is not found in the object, the prototype chain is traversed to find a key-value pair. But in the case of a class, it doesn't traverse the prototype chain.

What am I missing? What adds the keyword new

so that the property is available?

+3


source to share


5 answers


  • It should be clear to you what Class()

    is yours constructor

    , not instance object

    . so Class.testObject

    will return undefined

    because it Class

    doesn't have it property

    .

  • You can think of prototype

    like a recipe for an object. Almost every function has a property prototype

    that is used during the creation of new instances, and that prototype

    is common to all instances of an object

  • A constructor is simply a function that is used new

    to create an object

  • When you do this var instance = new Class();

    It means that you are instantiating an object Class

    , therefore instance

    inherits prototype

    properties Class

    .

  • Test:

    console.log(instance instanceof Class); // => true

console.log(instance.constructor === Class); // => true

console.log(Object.prototype.isPrototypeOf(Class)); // => true

console.log(Class.prototype.isPrototypeOf(instance)); // => true


+2


source


Whenever you create an object, like a function, it inherits from the constructor of Object, so this

var Class = function() {};

is an object, and it has its own property prototype

, which can be accessed with

Class.prototype

and you can create new properties of the object prototype

with

Class.prototype.testObj = {a:2, b:3};


if you want to access this you will really need to

console.log(Class.prototype.testObj)

as such, where it is, the property added to the property prototype

Class

.

When you use the keyword new

some magic happens, a whole new object (called an instance) is created and that object inherits from Class.prototype

, from the docs

When a new class is started (...), the following events occur:

  • A new object is created that inherits from Class.prototype.

  • The Class constructor function is called with the specified arguments and this

    bound to the newly created object. new class is equivalent to new class (), that is, if no argument list is specified, the class is called with no arguments.

  • The object returned by the constructor function becomes the result of the entire new expression. If the constructor function does not explicitly return an object, the object created in step 1 is used instead. (Constructors usually do not return values, but they can do so if they want to override the creation of a normal Process object.)

+1


source


You misunderstood the connection between Class

and Class.prototype

.

Class

is a constructor. Strictly speaking, JavaScript makes no distinction between constructors and general-purpose functions, but that doesn't matter right now. Class.prototype

is the prototype of instances of the class. That is, when you instantiate a class - var x = new Class()

- is Class.prototype

attached to x

as a delegate object.

This means that looking up x will propagate the delegate chain and refer to variables on that prototype instance.

In my understanding, all variables are treated as objects and have a prototype property.

This is not true. JavaScript has many primitive types, and only functions have a property named 'prototype'. Prototypic delegates only bind to reference types (objects, arrays, and functions) when they are created with a new

constructor or ECMAScript 5 writer object.create()

.

By the way, Class

has a prototype delegate since it is an instance Function()

. One instance of the delegate function method is apply()

.

+1


source


Simply put, Class

it is not an instance Class

, it is an instance Function

, so why does it inherit Class.prototype

? The first link in the prototype chain Class

Function.prototype

.

We see that if you select a function from Function.prototype

, for example call

, it exists on Class

.

typeof Class.call; //function

Object instances have their own prototype chain with a constructor prototype. Hence, for nnly objects that are instances Class

, the prototype chain will be set with Class.prototype

.

+1


source


You added the object to prototype

,
If you did console.log(Class.prototype)

, you will see the object.

The keyword new

instantiates an object that outputs properties associated with its prototype as properties of the object-object.
Because the newly created object actually inherits from the prototype

parent object and not the parent object itself.

0


source






More articles:


All Articles