The constructor creates the object

Before learning about prototypes, you need to know what a constructor is and what an instance is.

Foo is a constructor (constructors usually start with a capital letter, just like normal functions), and child1 and child2 are instances of new created by the constructor, which are objects.

Function Foo() {} // define a constructor const child1 = new Foo() // create an instance. Child1 const child2 = new Foo() // Create an instanceCopy the code

prototype

Each function has a prototype property, which is automatically created when we declare the function, and whose value is an object (i.e., a prototype) with only a constructor property

Notice, throughbind()The function returned by theDo not haveThe prototype property

const test = Function.prototype.bind()
console.log(test.prototype)  // undefined
Copy the code

Remind yourself,Only functions haveThe prototype attribute does not exist on normal objects. Make no mistake about it.

constructor

Constructor is a public non-enumerable property that points to the function itself and lets the instance object know what function constructed it.

Function Foo() {} define a constructor const child1 = new Foo() // create an instance of child1 console.log(child1.constructor == Foo) // trueCopy the code

__proto__

__proto__ is the implicit stereotype property that every object has. When we create an instance using new, the instance automatically has the __proto__ property, which gives it access to the prototype property of the constructor.

Function Foo() {} // Define a constructor const child1 = new Foo() // create an instance of child1 console.log(child1.__proto__ == foo.prototype) //  trueCopy the code

The overall relationship

Constructor (Foo), instance (child1), prototype, constructor, __proto__

  • Foo refers to foo.prototype via prototype
  • Child1. Point __proto__ Foo. The prototype
  • Foo. The prototype. The constructor to Foo

Note, however, that the Prototype property is itself an instance object and can also refer to its associated prototype via __proto__

The specific relationship is shown in the figure below:

Prototype’s __proto__ ends up pointing to Object.prototype, and its own __proto__ attribute points to null.

Prototype chain

When we access an object’s property, if the object doesn’t have the property inside it, then __proto__ looks for the property on prototype, which in turn looks for its own prototype on __ptoto__. Until the property is found or null is found. That’s the concept of a prototype chain.

In simple terms, a prototype chain is a route through which an object looks up properties, but that route is connected by __proto__.

Function.__proto__ === function.prototype?

Prototype and Object.prototype are two special objects that are created by the engine.

Prototype was first created and then function. prototype was created, and __proto__ connected the two.

So why doesn’t a call to bind() return a function with a prototype attribute?

Because bind() is on function.prototype, and function.prototype is created by the engine, the engine assumes that functions returned by bind() do not need the Prototype attribute.

Although Object.prototype and function. prototype are both objects, they are not created by Object. Therefore: All instances are objects, but objects are not necessarily instances.

Take a look at the following code:

console.log(typeof Function.prototype) // function
Copy the code

We found that… New Function(); new Function(); new Function(); new Function();

conclusion

  • Function of theprototypeA property is an object, i.eThe prototype.
  • The instance__proto__To the prototype, the prototype__proto__The prototype that points to the prototype is connected to form the prototype chain
  • When accessing an object property, it now looks for itself and passes if it cannot find it__proto__Look for attributes on the stereotype until null is found.
  • Function.prototype 和 Object.prototypeIt’s created by the engine. It’s special.
  • Except for these two objects created by the engine, all other objects are constructed by New.
  • Function.prototype.bind() has no prototype attribute becauseFunction.prototypeIt was created by the engine, which thought it didn’t need the Prototype property.