Jane said
Prototype and prototype chain are the basic interview questions will be asked, so want a high salary must understand, in fact, there is no understanding, just remember the following points, and then conduct an example to illustrate the interview question.
I wrote this article mainly through this article and add my own understanding:
JavaScript In-depth series directory address: github.com/mqyqingfeng… .
This in-depth JavaScript series is designed to help you understand the basics of JavaScript, including prototypes, scopes, execution contexts, variable objects, this, closures, passing by value, call, apply, bind, new, and inheritance.
If there is any mistake or not precise place, please be sure to give correction, thank you very much. If you like or are inspired by it, welcome star and encourage the author.
First we need to know a few things:
- JavaScript sets a prototype for each object it creates, pointing to its prototype object.
- When we use
obj.xxxWhen accessing a property of an object, the JavaScript engine looks for the property on the current object. If it doesn’t find it, it looks for the property on its prototype object. If it doesn’t find it, it goes back upObject.prototypeObject, and finally, if it has not been found, can only be returnedundefined.
3. Every function has a Prototype property, which is the prototype we see in various examples
We start by creating a constructor and creating the instance object. Easy to understand
function Person() {}var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin
console.log(person)
Copy the codeGet into the business
I think a prototype chain is a diagram of several properties, and it’s not hard to take them apart. If you still don’t understand the whole article after reading it, I suggest you read it again or find another article. There is always an article that makes you understand. So just to give you a sense of what’s going on, I’m going to show you the whole prototype chain and the person print
By the way, the chain of connected prototypes in the diagram is the prototype chain, the blue line.
It doesn’t matter if you don’t understand. Let’s take it apart one by one
###prototype
Prototype = person; prototype = person; Let’s do a picture just to remember what the prototype of the example is.
Prototype is the prototype of its constructor, person.prototype. You can see this from the person object print above.
So we know the prototype. What is the prototype?
You can think of it this way: every JavaScript object (except null) is associated with another object when it is created, and this object is called a prototype, from which each object “inherits” properties.
The prototype is an object that is associated with the Person instance object, and each property on the prototype is “inherited” by the instance object.
It doesn’t matter if you don’t understand, let’s give an example:
function Person(){
}
Person.prototype.name = 'xiaoMing'
var person = new Person()
console.log(person.name) //xiaoMing
Copy the codeWe didn’t define the name attribute in the constructor and object, but we ended up printing it. Why is that?
Because of the prototype chain, it says that the JavaScript engine looks for the current object, and if it doesn’t have one, it looks all the way up the prototype chain, and if it doesn’t find one, it returns undefined
Note: Only functions have Prototype
Note: Only functions have Prototype
Note: Only functions have Prototype
Say the main thing three times.
If I simply create an object var obj = {}, what is its prototype?
Var obj = new Object() var obj = new Object() var obj = new Object() Now let’s talk about the second property
###__proto__
This is a property that every JavaScript object (except null) has, called __proto__, which points to the object’s prototype.
There’s not much to say about this property, just go ahead and click on it yourself in the console and have a look to understand the following
// The same function
function Person(){}var person = new Person()
console.log(person.__proto__ === Person.prototype) // true
Copy the codeI’m giving you a diagram
Since both the instance object and the constructor can point to the stereotype, does the stereotype have properties that point to the constructor or the instance?
###constructor
Pointing to an instance is missing, since a constructor can generate multiple instances, but there are prototype-pointing constructors, which brings us to the third property: constructor, where each stereotype has a constructor property pointing to the associated constructor.
To test this, we can try:
function Person() {}console.log(Person === Person.prototype.constructor); // true
Copy the codeUpdate the diagram
To sum up, we can draw the following conclusions:
function Person() {}var person = new Person();
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// Learn an ES5 method to get a prototype of an object
console.log(Object.getPrototypeOf(person) === Person.prototype) // true
Copy the codePerson.prototype is an object and every object (except null) has a prototype
### Prototype of prototype
Directly above
var obj = new Object()
obj.name = 'Kevin'
console.log(obj.name) // Kevin
//
Copy the codePrototype Object. Prototype Object. Prototype Object. We can also verify this with __proto__
function Person() {}var person = new Person();
console.log(Person.prototype.__proto__ === Object.prototype) //true
Copy the codeHow about the Object. Prototype?
Prototype is null
We also use __proto__ to verify this
function Person() {}var person = new Person();
console.log(Object.prototype.__proto__ === null) //true
Copy the codeFinally, revisit the entire diagram
By the way, the chain of connected prototypes in the diagram is the prototype chain, the blue line.
supplement
Finally, three things that you might not notice:
constructor
First, the constructor attribute. Let’s look at an example:
function Person() {}var person = new Person();
console.log(person.constructor === Person); // true
Copy the codeThe constructor property is not available when the person. Constructor property is fetched from the person’s prototype. This property happens to be in the prototype, so:
person.constructor === Person.prototype.constructor
Copy the code__proto__
The second is __proto__. Most browsers support this nonstandard method of accessing prototypes, but it doesn’t exist in Person.prototype. In fact, it comes from Object.prototype. More like a getter/setter, when used with obj.__proto__, it can be interpreted as returning Object.getProtoTypeof (obj).
Is it really inheritance?
Finally, inheritance. Earlier we said that “every object ‘inherits’ properties from its prototype.” In fact, inheritance is a very confusing term, to quote from JavaScript you Don’t Know:
Inheritance means copying operations, but JavaScript by default does not copy the properties of an object. Instead, JavaScript simply creates an association between two objects so that one object can access the properties and functions of the other through delegation, so it is more accurate to call it delegation than inheritance.