The premise

New, what happened?

function A(){
  this.name = 'kavin'
}
var a = new A();Copy the code

1. Create a new object;

var a = new Object() // {};Copy the code

1. Assign the constructor’s scope to the new object (so this refers to the object);

a.constructor = A;   // a.constructor.call(a)
a.__proto__ = A.prototypeCopy the code

1. Execute the code in the constructor (add attributes to the new object);

a.constructor()Copy the code

1. Returns a new object.

return aCopy the code

In general, it looks like this:

var a = (function(name) {
    var new_a = { =
      constructor: A, 
      __proto__: A.prototype,
    };
    new_a.constructor(name); 
    returnnew_a; }) ();Copy the code

basis

prototype

In JavaScript, every function has a prototype property that points to the function’s prototype object.

Such as:

function Person(age) {
    this.age = age       
}
Person.prototype.name = 'kavin'
var person1 = new Person()
var person2 = new Person()
console.log(person1.name) //kavin
console.log(person2.name)  //kavinCopy the code

In the example above, the function’s prototype points to an object that is the prototype of the instance created when the constructor is called, namely person1 and person2.

What is a prototype? Look at the code below.

function Person(age) {
    this.age = age       
}
Person.prototype.name = 'kavin'
var person1 = new Person()
        person1.name = "jake"
var person2 = new Person()
console.log(person1.name) //jake
console.log(person2.name)  //kavinCopy the code

The above example illustrates a problem: after passing new, a new Person instance is generated (a copy is made), so using person1.name = “jake” does not affect Person itself. This is also the biggest use of constructors — reusability.

The concept of stereotypes: Every javascript object (except null) created is associated with another object, which is called a stereotype, from which each object “inherits” properties.

Let’s use a diagram to show the relationship between constructors and instance stereotypes:

__proto__

This is a property that every object (except null) has, called __proto__, which points to the prototype of that object.

function Person() {
}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // trueCopy the code

Let’s try this one again:

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype, person.prototype, Person.__proto__); 
// trueƒ(){[native code]}Copy the code

If a function is instantiated, it no longer has the prototype property. To put it another way, it becomes an object after being instantiated, since prototype is only available to function objects. But any object has _ _

Property, the _ of the function

Is an anonymous function.

And the diagram:

Supplementary notes:

Most browsers support this nonstandard method access prototype, but it doesn’t exist in Person.prototype. In fact, it comes from Object.prototype, which is more of a getter/setter than an attribute. When using obj.__proto__, it is understood to return object.getProtoTypeof (obj).

constructor

Each stereotype has a constructor property that points to the association’s constructor.

function Person() {
}
console.log(Person===Person.prototype.constructor)  //trueCopy the code

So update the diagram:

function Person() {
}
var person = new Person();
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // trueCopy the code

Supplementary notes:

function Person() {
}
var person = new Person();
console.log(person.constructor === Person); // trueCopy the code

The constructor property is not available when the person. Constructor property is fetched from the person’s prototype. Just the prototype has the attribute, so: person. The constructor = = = person. The prototype. The constructor

conclusion

A little round, let’s summarize, a following code wei foundation we explain in turn:

function A(){} // a is an instance of a, we call a constructor, then a is constructed by A. // a is not a function object, but an instance object. Var a = new a () // __proto__ refers to the instance prototype of an object, which has both objects and functions. // The function's __proto__ (instance prototype) points to an anonymous function. But the instance object's prototype is undefined. // The function points to the prototype through prototype, and the object points to the prototype through __proto__. a.__proto__ === A.prototype; // The __proto__ of a pure Object points to the Object() constructor... Var b = {}; b.__proto__ === Object.prototype; var c = []; c.__proto__ === Array.prototype; ... // prototype: function. Prototype // But we can still see d.__proto__ pointing to an anonymous function through the debugger. var d =functionConstructor (){// we find that a.constructor and A. __proto__. Constructor refer to a, // it is automatic to skip __proto__ to find constructor. // (we can also draw the following conclusion) a.constructor === A; a.__proto__.constructor === A; a.__proto__ === A.prototype; A.prototype.constructor === A;Copy the code

Senior part

Examples and prototypes

When reading a property of an instance (object), if it cannot find the property, it looks for the property in the stereotype associated with the instance (object). If it cannot find the property, it looks for the stereotype until it reaches the topmost level (__)

= = = Object).

function Person() {

}

Person.prototype.name = 'Kevin';

var person = new Person();

person.name = 'Daisy';
console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // KevinCopy the code

In this example, we add the name attribute to the instance object Person. When we print Person. name, the result will be Daisy.

But when we delete the person name attribute and read the Person. name, we can’t find the name attribute in the Person object and we get the name attribute from the person’s prototype, person.__proto__, In Person. Prototype, luckily we found the name property, which is Kevin.

But what if they haven’t found it yet? What is the archetype of the archetype?

Prototype of prototype

In the previous section, we said that a prototype is also an object, and since it is an object, we can create it in the most primitive way, which is:

var obj = new Object();
obj.name = 'Kevin'
console.log(obj.name) // KevinCopy the code

The __proto__ of the instance refers to the prototype constructor, so let’s update the diagram:

You can go to the content premise and see what happens with the new field.

Prototype chain

A quick review of the relationship between constructors, stereotypes, and instances:

Each constructor has a prototype object, which contains a pointer to the constructor, and each instance object contains an internal pointer to the prototype object.

So what if we made the prototype object equal to an instance of another type? Obviously, the stereotype object will contain a pointer to another stereotype, which in turn will contain a pointer to another constructor.

If the other prototype is an instance of another type, the relationship still holds. In this way, a chain of examples and prototypes is formed. This is the basic concept of the so-called prototype chain.

— From javascript Advanced Programming

In fact, in simple terms, it is the above four – five process.

What about the Object. Prototype?

To quote teacher Ruan Yifeng’s the Difference between undefined and Null:

Null means “no object”, meaning there should be no value.

Object.prototype.__proto__ = null; Object. Prototype has no prototype.

Object. Prototype = Object. Prototype = Object.

The last diagram can also be updated to read:

The chain of linked prototypes is the prototype chain, the blue line.