JS: prototype chain

Enjoy 2021-05-03 18:22:15
js prototype chain

Prototypes and prototype chains (prototype chain)


  • Through prototype, this mechanism ,JavaScript Objects in inherit functional features from other objects ; This inheritance mechanism is different from that of classical object-oriented programming languages .

One . Prototype based language

  • JavaScript Often described as a Prototype based language (prototype-based language)—— Each object has a Prototype object

  • Objects are modeled on their prototypes 、 Inherit methods and properties from prototypes . Prototype objects may also have prototypes , And inherit methods and properties from it , One layer at a time 、 And so on .

  • This relationship is often called Prototype chain (prototype chain), It explains why an object has properties and methods defined in other objects .

  • To be exact , These properties and methods are defined in Object The constructor function of (constructor functions) Above prototype Attribute , Not the object instance itself .

Establishing a connection

  • In traditional object-oriented programming (Object Oriented Programming,OOP) in , First define “ class ”, After that, when you create an object instance , All properties and methods defined in the class are copied to the instance .

  • stay JavaScript It's not like this —— Instead, create a link between the object instance and its constructor ( It is __proto__ attribute , It's from the constructor prototype Property derived ), After that, by going up the prototype chain , Find these properties and methods in the constructor .

  • Be careful :__proto__ Is a property that exists on every instance ,prototype Is a property of a constructor , in other words

    • Object.getPrototypeOf(new Foobar())===new Foobar().__proto__===Foobar.prototype
       Copy code 

Two . Lookup process

1. Create an instance object

  • function doSomething(){}
    doSomething.prototype.foo = "bar";
    var doSomeInstancing = new doSomething();
    doSomeInstancing.prop = "some value";
     Copy code 

  • so , Constructor's prototype Medium constructor Point to yourself , Constructors are derived from functions , Constructor's prototype Objects are inherited from objects

2. Look up the prototype chain

  • When you visit doSomeInstancing A property of , The browser first looks for doSomeInstancing Does it have this property
  • If doSomeInstancing No such attribute , Then the browser will be in doSomeInstancing Of __proto__ Find this property in the ( That is to say doSomething.prototype).
  • If doSomeInstancing Of __proto__ ( That is to say doSomething.prototype) It has this property , that doSomeInstancing Of __proto__ This property on will be used .
  • otherwise , The browser will look up doSomeInstancing Of __proto__ Of __proto__ , See if it has this property .

3. prototype attribute : Where inheritance members are defined

4. create()

  • var person2 = Object.create(person1);
     Copy code 
  • **Object.create()** Method creates a new object , Using an existing object to provide a newly created object __proto__. Here we use person1 Created for prototype objects person2 object

5. constructor attribute

  • Each instance object inherits a from the prototype constructor attribute , This property points to the constructor used to construct this instance object .

  • You can constructor Add a pair of parentheses at the end of the property ( The required parameters are included in parentheses ), So you can use this constructor to create another object instance . After all, a constructor is a function , So you can call... Through parentheses ; Just add new keyword , You can use this function as a constructor .

  • function Person(name) {
    let person1=new Person('1')
    var person2 = new person1.constructor('2')
     Copy code 

6. Modify the prototype

  • You rarely see attributes defined in prototype Properties of the , Because the definition is not flexible enough .

  • When you want to set a prototype property value based on some property values of an instance

  • Person.prototype.fullName = this.name.first + ' ' + this.name.last;
    // Be careful , This setting has no effect , Because of the this The default point to window
     Copy code 
  • Person.prototype.fullName =function(){return this.name.first + ' ' + this.name.last;}
    // This setting will make the this Point to the instance object of the method in the calling prototype
     Copy code 

  1. 浅谈 React 中的 XSS 攻击
  2. XSS attack in react
  3. 自学前端教程整理,附不容错过的前端100篇文章合集
  4. Self taught front-end tutorial collation, with a collection of 100 front-end articles that can not be missed
  5. 使用OpenTracing跟踪Go中的HTTP请求延迟
  6. Using opentracing to track HTTP request latency in go
  7. Encapsulating databinding allows you to write less than 10000 lines of code
  8. 03-HTML5标签-HTML5极速入门
  9. 03-html5 tag-html5 quick start
  10. LayUI - 极易上手拿来即用的前端 UI 框架
  11. Layui - easy to use front end UI framework
  12. Interpretation of lodash source code (1)
  13. Why is the first parameter of node family callback error?
  14. 报告:JavaScript 开发者达1380 万,C#超越 PHP,Rust 增长最快
  15. Report: Javascript developers reach 13.8 million, C surpasses PHP, and rust grows fastest
  16. 小白前端入门笔记(10),怎么设置网站内部的超链接?
  17. How to set up hyperlinks inside the website?
  18. Using node and socket to realize online chat room
  19. The core competitiveness of Vue: data bidirectional binding
  20. React configuration agent
  21. CSS layout
  22. Application scenario explanation of Vue dynamic component
  23. Redux learning notes 04 -- using multiple reducers to manage data
  24. After three months of typescript writing, what have I learned?
  25. Node family - what is a callback?
  26. React -- a simple implementation of render & create element
  27. JS learning simple usage of jquery
  28. Seamless love
  29. 小白前端入门笔记(12),设置哑链接
  30. Small white front-end entry notes (12), set dumb links
  31. Vue2. X opens composition API and TSX
  32. Interview record and thinking of social recruitment for one and a half years (Alibaba, Tencent, baidu offer)
  33. Flex learning notes
  34. The most essential closure article in the eastern hemisphere
  35. 2021-05-03 hot news
  36. Sword finger offer -- reverse order pair in array (JS Implementation)
  37. Working process of scaffold
  38. Use decorator mode to strengthen your fetch
  39. [JS] scope (Introduction)
  40. Employment information statistics network (interface document)
  41. Analysis of MVC
  42. [middle stage] please stay and join me in the backstage
  43. Understanding front end garbage collection
  44. [continuous update] front end special style implementation
  45. Flutter product analysis and package reduction scheme
  46. XPath positioning
  47. 前端开发css中的flex布局的使用
  48. The use of flex layout in front end development CSS
  49. JQuery核心函数和静态方法
  50. JQuery core functions and static methods
  51. Node family - understanding of blocking and non blocking
  52. 热点微前端Microfrontend的讨论:谷歌AdWords是真实的微前端
  53. Vue source code analysis (2) initproxy initialization proxy
  54. What's TM called react diff
  55. Summary of common front end data structure
  56. Useeffect in hooks
  57. [encapsulation 02 design pattern] Command pattern, share meta pattern, combination pattern, proxy pattern, strategy pattern
  58. Front end notes: virtual Dom and diff of vue2. X
  59. The best code scanning plug-in of flutter
  60. The simplest plug-in for rights management of flutter