Learn more about JS prototypes

Yihe Road 2021-05-03 19:19:20
learn js prototypes


1 Problems with constructors

Such as the following code through the constructor and new Create an instance object person1 and person2.

function Person() {
this.age = age;
this.say = function () {
console.log(' I want to fly ');
};
}
var person1 = new Person();
var person2 = new Person();
 Copy code 

There are methods in the constructor say() It's a complex data type , As shown in the figure below, each call creates a new space . Although instance objects person1 and person2 The method called is the same method , But to open up two identical say() Space , If there are a lot of instance objects, it will cause a lot of memory waste .

image.png

2 Prototype object prototype The role of

What is the prototype ? It's the object .

What is the role of archetype ? Sharing method .

prototype Prototype objects solve the problem of constructors , Put the method in the constructor into the prototype In the prototype object , Different instance objects use say() When the method is used , It's all from prototype objects say(), As shown in the figure below , It saves a lot of memory .

image.png

3 Object prototype __proto__ And constructor constructor

3.1 __ proty __

Each instance object will have a __proto__ To the constructor prototype Prototype object , So we can use the instance object's __proto__ Use the properties and methods of the constructor prototype object . As in the following code __proto__ Object prototypes and prototype objects prototype It is equivalent. .

function Person() {}
var person1 = new Person();
console.log(Person.prototype === person1.__proto__);// return true
 Copy code 

3.2 constructor

Object prototype __proto__ And constructor prototype There is an attribute in the prototype object constructor attribute ,constructor We call it constructors , Because it points back to the constructor itself . constructor It is mainly used to record which constructor the object refers to , It allows the prototype object to point back to the original constructor .

Be careful : It can be modified , unreliable .

4 Constructors 、 Instance object 、 The relationship between prototype object and the three .

  • By constructor Person and new Created an object instance person1.
  • person1.__ptoto__ Pointing constructor Person.prototype Prototype object
  • Person.prototype Of constructor Points to the constructor Person

image.png

5 JS Search mechanism

  • When accessing the properties of an object ( Including method ) when , First, find out if the object itself has this property .
  • If not, look for its prototype ( That is to say __proto__ Point to the prototype Prototype object ).
  • If not, find the prototype of the prototype object (Object Prototype object ).
  • And so on all the time Object until (null).
  • __proto__ The significance of object prototype is to provide a direction for the search mechanism of object members , Or a route .

6 Prototype chain

According to the search mechanism, we can easily figure out the prototype chain , It should be noted that :

  • stay JS in , Function is Function The instance object of the function , All functions are Function Tectonic .
  • Object.prototype It's all objects ( Directly or indirectly ) The prototype of the .

image.png

7 Function and Object The particularity of .

  • First Function The constructor of is itself , namely Function.__proto__ === Function.prototype.

  • Function It's also Object Constructor for , therefore Function.prototype === Object.__proto__.

  • meanwhile Function Of prototype Prototype objects are also Object Instance object of Function.prototype.__proto__ === Object.prototype however Object again Function Instance object of .Object.__proto__ === Function.prototype You are my object , I'm your object .

  • The final prototype Prototype objects belong to ObjectObject.prototype.__proto__ === null

版权声明
本文为[Yihe Road]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210503191542547e.html

  1. CSS layout
  2. Application scenario explanation of Vue dynamic component
  3. Redux learning notes 04 -- using multiple reducers to manage data
  4. After three months of typescript writing, what have I learned?
  5. Node family - what is a callback?
  6. React -- a simple implementation of render & create element
  7. JS learning simple usage of jquery
  8. Seamless love
  9. 小白前端入门笔记(12),设置哑链接
  10. Small white front-end entry notes (12), set dumb links
  11. Vue2. X opens composition API and TSX
  12. Interview record and thinking of social recruitment for one and a half years (Alibaba, Tencent, baidu offer)
  13. Flex learning notes
  14. The most essential closure article in the eastern hemisphere
  15. 2021-05-03 hot news
  16. Sword finger offer -- reverse order pair in array (JS Implementation)
  17. Working process of scaffold
  18. Use decorator mode to strengthen your fetch
  19. [JS] scope (Introduction)
  20. Employment information statistics network (interface document)
  21. Analysis of MVC
  22. [middle stage] please stay and join me in the backstage
  23. Understanding front end garbage collection
  24. [continuous update] front end special style implementation
  25. Flutter product analysis and package reduction scheme
  26. XPath positioning
  27. 前端开发css中的flex布局的使用
  28. The use of flex layout in front end development CSS
  29. JQuery核心函数和静态方法
  30. JQuery core functions and static methods
  31. Node family - understanding of blocking and non blocking
  32. 热点微前端Microfrontend的讨论:谷歌AdWords是真实的微前端
  33. Vue source code analysis (2) initproxy initialization proxy
  34. What's TM called react diff
  35. Summary of common front end data structure
  36. Useeffect in hooks
  37. [encapsulation 02 design pattern] Command pattern, share meta pattern, combination pattern, proxy pattern, strategy pattern
  38. Front end notes: virtual Dom and diff of vue2. X
  39. The best code scanning plug-in of flutter
  40. The simplest plug-in for rights management of flutter
  41. 21. Object oriented foundation "problems and solutions of object traversal"
  42. Discussion on hot micro front end: Google AdWords is a real micro front end
  43. Usecallback and usememo for real performance optimization
  44. 【前端圭臬】十一:从规范看 JavaScript 执行上下文(下)
  45. [front end standard] 11: Javascript execution context from the perspective of specification (2)
  46. Hexagonal六角形架构ReactJS的实现方式 - Janos Pasztor
  47. Transaction of spring's reactive / imperative relational database
  48. The implementation of hexagonal hexagonal reactjs Janos pasztor
  49. HTTP状态码:402 Payment Required需要付款 - mozilla
  50. HTTP status code: 402 payment required - Mozilla
  51. Factory mode, constructor mode and prototype mode
  52. Build the scaffold of react project from scratch (Series 1: encapsulating a request method with cache function based on Axios)
  53. Cocos Quick Start Guide
  54. Comparison of three default configurations of webpack5 modes
  55. A case study of the combination of flutter WebView and Vue
  56. CSS: BFC and IFC
  57. A common error report and solution in Vue combat
  58. JS: this point
  59. JS: prototype chain
  60. JavaScript series -- promise, generator, async and await