当前位置:网站首页>How to understand the prototype chain

How to understand the prototype chain

2021-01-23 16:14:11 MangoGoing

The questions of prototype chain type belong to the high frequency test site in the interview , Now use a classic interview question to restore js The true face of Zhongyuan chain .

Excuse me, :f There are ways to a And methods b Do you ?

var F = function () {};
Object.prototype.a = function () {};
Function.prototype.b = function () {} ;
var f = new F()

Before we do this , Be sure to understand js Some inheritance relations of Zhongyuan type chain , Keep that inheritance diagram in mind , Then, when you see the title, you can find the inheritance relationship one by one , I went through a detour before , Beginners js Find the diagram of prototype chain on the Internet , It's complicated and hard to remember , Like this :
201622785912987.jpg
Don't look , Anyway, I can't watch it .

wholesome talk

stay js in , Object has __proto__ attribute , This is usually called an implicit prototype , The implicit prototype points to the prototype that constructs the object's constructor .
Functions are special , It's just like any other object __proto__ attribute , There are also their own unique attributes ----prototype, This property is a pointer , Point to an object that contains properties and methods shared by all instances , Called prototype object . Prototype objects also have a constructor attribute , This attribute refers back to the function .

According to the above theory, the constructor can be ( function )、 object ( Constructors new Coming out )、Object( The object at the top ) The general relationship between . It's like this :
 Prototype chain .jpg

This is my picture in Wuhua javascript Screenshots from advanced courses , So far .
Remember the four most important points ok 了 , Compare the picture above to understand memory :

  1. Objects all have Implicit prototype __proto__), It points to the prototype object of the constructor (prototype).
  2. The prototype object of the constructor also has a Implicit prototype __proto__) It points to Object Prototype object (prototype).
  3. Object There is a prototype object of constructor Point to Object In itself .
  4. Constructor's constructor Point to the constructor itself .

You can understand the object after reading it here toString() perhaps valueof() How come , A print Object Prototype object , I get the answer , You go to the properties of the object ( Including method ), He will first find out if he has this attribute , If not, they will go up the prototype chain one by one , For example, the picture above , I want to visit obj Of showAge Method , He himself has , Back to his own showAge Method , To visit showUserName,obj No, , I'll follow the implicit prototype to see if the prototype object of the constructor has , If so, return to , If not, go on Object Find the prototype object of , Up in turn . It's not hard to understand why there are all kinds of objects toString() The method .

Their thinking

After understanding the prototype chain , Back to the original interview question :

  1. First ,f What is it? ?
    f It's a constructor F new Out object , According to what I said above , Objects have an implicit prototype , It points to the prototype object of the constructor , namely f Of __proto__ Point to F.prototype.
  2. Along the prototype chain ,F.prototype.__proto__ Point to Object.prototype, That's the first answer ,f You can get it. a Method , because f I didn't go through Function.prototype,Function.prototype yes Object.prototype Created , Only along the _proto_ Look up so you can't get b Method .
  3. Functions are all created by Function new Coming out , Here you can think of it as a constructor that is used by another constructor new Ordinary objects coming out , therefore F The implicit prototype of this constructor also points to Function Prototype object , namely F.__proto__ Point to Function.prototype, therefore F Function can take b Method ( Maybe a little dizzy , The following will explain )

Function

stay JavaScript in , use new Keyword to call the function , It's called a constructor . The first letter of a constructor is usually capitalized

What I understand is that theoretically any function can be regarded as a constructor .
In fact, there is a part of the prototype above Function I didn't draw it .
Before you know this , Think about it with another interview question :
What's at the top of the prototype chain ? According to the picture above, you might think it's Object perhaps Object.prototype, It's not .
Be careful :

To understand the top level of the prototype chain, there should be some differences between the understanding of other parts of the prototype chain , here Object and Function And its prototype should be seen separately , You can't take prototype and itself for granted
  1. Object.prototype and Object The relationship between
    Object.prototype yes JS The first generation in the world , In theory, there's a prototype (Object.prototype) It will have itself (Object), However Object The content of the book is made up of Function Composed of . In a more popular way, it means , With Object.prototype And then there is Object The body of , However Object My soul is made up of Function Composed of .
  2. Object.prototype.__proto__
    Object.prototype It's created by the upper object ( Some static languages , image C++ and Java), Here, in order not to cause misunderstanding, it points to null

 Top level map .png

Summarize the top-level relationship of prototype chain

  1. Object.prototype It's created by the upper object ( Some static languages , image C++ and Java), Here, in order not to cause misunderstanding, it points to null
  2. Object.prototype Created Function.Prototype
  3. Function.prototype Created Function
  4. Object Created other objects (window, document, Custom object )
  5. Object yes Function An example of
  6. Any function inherits from Function.prototype
  7. Any object ultimately inherits from Object.prototype

版权声明
本文为[MangoGoing]所创,转载请带上原文链接,感谢
https://chowdera.com/2021/01/20210123161244311S.html