This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together.
preface
Prototype chain has always been js interview questions, but also JS very core basic knowledge, perhaps usually not often use, but to understand it will allow themselves to greatly deepen the understanding of this language, this article is very easy to understand the prototype chain, read down patiently, I believe that will be able to help you.
Constructor and instance
Suppose you declare a method called Foo(), then we can declare the instance by new Foo().
function Foo() {
console.log("I am a constructor.");
}
const f1 = new Foo();
Copy the code
Now you can clearly see that Foo() is the constructor and f1 is an instance of it.
Properties of the Prototype
The Foo() constructor is a method.
Methods are also object data types, so you can say that a method is an object.
Objects have properties, but methods have their own special property called Prototype. Other objects don’t.
This property points to a prototype object (foo.prototype), which also has a property of its own called constructor that contains a pointer back to the original constructor.
function Foo() {
console.log("I am a constructor.");
}
const f1 = new Foo();
console.log(Foo.prototype);//Foo's prototype object
console.log(f1.prototype);/ / no underfied f1
Copy the code
Attribute __proto__
The prototype above provides shared methods and attributes for all instances of the constructor.
How do instances access shared methods and properties?
The f1 instance doesn’t have prototype. Instead, it has an attribute __proto__, which all objects have. It points to the prototype object that builds its own constructor, and the js language uses this attribute to give instances access to shared properties and methods
Foo is the constructor of f1, and foo. prototype is the prototype object of Foo, so f1.__proto__ points to foo. prototype
function Foo() {
console.log("I am a constructor.");
}
const f1 = new Foo();
console.log(Foo.prototype);
console.log(f1.__proto__);
Copy the code
Access methods on the prototype
The Foo constructor adds it to its prototype object if it wants its instance to have the same property, such as name.
function Foo() {
console.log("I am a method.");
}
Foo.prototype.name = "I'm a shared property of an instance created by Foo.";
const f1 = new Foo();
const f2 = new Foo();
console.log(f1.name);// I am a property shared by instances created by Foo
console.log(f2.name);// I am a property shared by instances created by Foo
Copy the code
So this brief summary
SequenceDiagram Example f1 ->> Constructor Foo: creates constructor Foo->> constructor prototype object Foo. Prototype: Constructor instance f1->> constructor prototype object Foo. Prototype: __proto__
Constructors also have __proto__
All objects have a __proto__. Foo is a function and an object, so what is foo. __proto__?
Foo is a Function that has function-specific methods and properties, and its constructor is Function, which is a built-in js constructor, Its function. prototype gives all functions you create in JS the public methods and properties that come with the Function.
So foo.__proto__ points to Funtion. Prototype
The constructor’s prototype also has __proto__
Foo. Prototype is also an object, so it also has __proto__.
Foo. Prototype is an Object, pure Object, so its constructor is Object, so Object’s prototype is Object.prototype.
Foo. Prototype. __proto__ pointing to the Object. The prototype
This prototype Object is very special
The constructors Array, String, Funtion, and Object are all functions and instances of the Funtion constructor. Array.__proto__, String.__proto__, Funtion.__proto__, Object.__proto__ points to Funtion. Prototype, You can call some of the public methods of the Funtion. Prototype prototype, for example.
Prototype: array. prototype, String.prototype, and Funtion. Prototype are all objects that are instances of the Object constructor. Array.prototype.__proto__, string.prototype. __proto__, funtion.prototype. __proto__ points to Object. Prototype, So you can call the Object. Prototype public method,
Object.prototype.__proto__ points to null as the end of the prototype chain
conclusion
- Methods, functions, are there
prototype
Is the prototype of the method. - So an instance, in general, will have a corresponding constructor, which is the constructor of the instance
__proto__
Points to the stereotype of the constructor. - Js has many built-in constructors, such as Array, String, Funtion, Object, which are allocated according to some Object types of JS. Their prototypes provide many encapsulated common methods.
- all
A constructor
Itself isfunction
, it isFuntion
This js comes with a constructorThe instance
. - all
Construct the prototype of the method
Itself isobject
, it isObject
This js comes with a constructorThe instance
, except object.prototype. - Object. The prototype. __prototype pointing
null
As aEnd of prototype chain
.
Stern said
If you have any suggestions, please put forward, I will timely feedback, thank you.