Attention: high energy warning ahead, please carefully read it, after reading, draw the prototype diagram again, I believe you will have a deeper understanding. (Recommended chicken easy to draw flow chart software ProcessOn)
Constructor: function Foo () {};
Example object: let f1=new Foo;
let o1=new Foo;
Every Function has a prototype attribute, except function.prototype.bind (), which points to the prototype.
Each object has a __proto__ attribute that points to the prototype of the constructor that created the object. [[prototype]] is an internal attribute that we can’t access, so use _proto_.
Objects can find properties that are not part of the object by __proto__, which links objects together to form a prototype chain.
Here’s what the prototype diagram above means:
Concept:
Constructor: The function used to initialize the newly created object is a constructor. In this example, the Foo() function is the constructor.
2. Instance objects: Objects created by the constructor’s new operation are instance objects. Multiple instance objects can be constructed using a single constructor.
function Foo() {}; var f1 = new Foo; var f2 = new Foo; console.log(f1 === f2); //falseCopy the code
Prototype object and Prototype: The constructor has a prototype property that points to the prototype object of the instance object. Multiple objects instantiated through the same constructor have the same prototype object. Inheritance is often implemented using prototype objects.
function Foo() {}; Foo.prototype.a = 1; var f1 = new Foo; var f2 = new Foo; console.log(Foo.prototype.a); //1 console.log(f1.a); //1 console.log(f2.a); / / 1Copy the code
Constructor: The stereotype object has a constructor property that points to the corresponding constructor of the stereotype object. Since an instance object can inherit properties from a stereotype, it also has a constructor property that points to the corresponding stereotype object’s constructor.
console.log(Foo.prototype.constructor === Foo); //trueconsole.log(f1.constructor === Foo); //trueCopy the code
5. _proto_ : Instance objects have a proto attribute that points to the prototype object corresponding to the instance object.
console.log(f1.__proto__ === Foo.prototype); //trueCopy the code
Having introduced the concepts, I now elaborate on the relationship between the diagrams
[Part 1: Foo]
1. The instance object f1 is created by the new operation on the constructor Foo(). Constructor Foo()’s prototype object is foo.prototype; The instance object f1 also points to the prototype object foo. prototype via the __proto__ attribute.
console.log(f1.__proto === Foo.prototype); //true
Copy the code
2. The instance object f1 does not have the constructor property itself, but it inherits the constructor property of the prototype object Foo. Prototype
console.log(Foo.prototype.constructor === Foo); //trueconsole.log(f1.constructor === Foo); //true
console.log(f1.hasOwnProperty('constructor')); //falseCopy the code
Below is the console effect of the instance object F1
[Part 2: Object]
1. Foo. Prototype is the f1 prototype object, which is also the instance object. In fact, any Object can be treated as an Object instantiated by the new operation on the Object() constructor, so foo.prototype is the instance Object whose constructor is Object() and the prototype Object is object.prototype. Correspondingly, the prototype property of the constructor Object() refers to the prototype object.prototype; The proto property of the instance Object foo. prototype also points to the prototype Object object. prototype.
console.log(Foo.prototype.__proto__ === Object.prototype); //true
Copy the code
Prototype has its own constructor property, so it overrides the constructor property inherited from the prototype Object. Prototype.
console.log(Foo.prototype.constructor === Foo); //trueconsole.log(Object.prototype.constructor === Object); //true
console.log(Foo.prototype.hasOwnProperty('constructor')); //trueCopy the code
Below is the console look of the instance object foo. prototype
If object. prototype is the instance Object, the result is null. This may be one of the reasons why typeof null results in ‘object’.
console.log(Object.prototype.__proto__ === null); //true
Copy the code
【 Part 3: Function】
1. As mentioned earlier, functions are also objects, just objects with special functions. Any Function can be seen as the result of instantiation through the new operation of the Function() constructor. If Foo is an instance, its constructor is Function() and its prototype is function.prototype; Similarly, the constructor of the Object Function is Function(), whose prototype Object is function.prototype.
console.log(Foo.__proto__ === Function.prototype); //trueconsole.log(Object.__proto__ === Function.prototype); //trueCopy the code
Prototype the constructor property points to the constructor Function(); The instance objects Object and Foo do not have the constructor property themselves. You need to inherit the constructor property from the prototype Object Function. Prototype.
console.log(Function.prototype.constructor === Function); //trueconsole.log(Foo.constructor === Function); //true
console.log(Foo.hasOwnProperty('constructor')); //falseconsole.log(Object.constructor === Function); //true
console.log(Object.hasOwnProperty('constructor')); //false
Copy the code
All functions can be considered instantiations of the new operation on the constructor Function(). Function, then, can be thought of as the result of an instantiation of the new operation that calls itself. So, if Function is an instance object, its constructor is Function and its prototype object is function.prototype.
console.log(Function.__proto__ === Function.prototype); //trueconsole.log(Function.prototype.constructor === Function); //trueconsole.log(Function.prototype === Function.prototype); //trueCopy the code
4, If Function. Prototype is the instance object, what is the prototype object? As before, all objects can be viewed as instantiations of the new operation on the Object() constructor. Prototype’s prototype Object is object.prototype, and its prototype Function is Object().
console.log(Function.prototype.__proto__ === Object.prototype); //true
Copy the code
Conclusion:
[1] Function(Function also Function) is the result of new Function, so Function can be used as an instance object. Its constructor is Function(), and its prototype object is function.prototype.
[2] Objects (functions are also objects) are the result of new Object, so objects can be used as instance objects. The constructor is Object() and the prototype Object is Object.prototype
【3】Object. Prototype is null.