Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to understand the prototype and prototype chain in JavaScript". In the daily operation, I believe that many people have doubts about how to understand the prototype and prototype chain in JavaScript. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "how to understand the prototype and prototype chain in JavaScript". Next, please follow the editor to study!

Know the corresponding relation first.

Prototype: prototype

_ _ proto__: prototype chain (link point)

Subordinate relationship

Prototype: an attribute of the function-> Don't think too complicated, it is actually an ordinary object {}

_ _ proto__: an attribute on the object-> Don't think too complicated, it's actually an ordinary object {}

The _ _ proto__ of the object holds the prototype of the constructor of the object

Function is a special object, so _ _ proto__ also exists on the function, and it is a function.

What people often forget is that Object is a method (constructor) and new Object is an instance object!

Console.log (Object) / / typeof Object = 'function'console.log (new Object) / / typeof new Object = =' object'constructor

Constructor is the constructor of the instantiated object

/ / test.constructor-> the constructor Testconsole.log (test.constructor===Test) / / true// for instantiating the test object is understood here to mean that you never end up calling yourself to solve the problem without finding the relevant article. Console.log (test.constructor.prototype.constructor===Test) / / trueconsole.log (test.constructor.prototype.constructor.prototype.constructor===Test) / / true//constructor allows you to change function Test2 () {this.a=123} test.constructor=Test2console.log (test) prototype function Test () {} let test=new Test () / / new after test is an instance object console.log (test.__proto__===Test.prototype) / / according to the correspondence table above True//Test.prototype is also an object in order to know the result. So he must also have _ _ proto__//Test.prototype.__proto__ has reached the end point, what is the end point, the end point is the Object constructor, so the following result is tureconsole.log (Test.prototype.__proto__.constructor===Object) / / and according to the rules in the corresponding relation above and the result of the above The next result is also tureconsole.log (Test.prototype.__proto__===Object.prototype) / the end point is nullconsole.log (Object.prototype.__proto__) / / null

Can you describe the prototype chain?

The _ _ proto__ of the object holds the constructor of the object, and the prototype,prototype is also an object, so it also has its own _ _ proto__, to and fro to the destination Object.__proto__, so as to form a chain of prototype objects with the value of _ _ proto__ as the link point (key) as the construction method, that is, the prototype chain.

/ / _ _ proto__test {b:333, a:1, _ _ proto__:Test.prototype= {c:222, b:2, _ _ proto__:Object.prototype= {c:3, _ _ proto__:null}

Special function object

Important: in JS, function is a special object!

Remember the correspondence table at the beginning of the article

/ / function is a special object, so _ _ proto__ exists and is a functionconsole.log (Test.__proto__) / / functionconsole.log (Test.prototype) / / object

Since Test is a function, the underlying layer must also be implemented by new Function, so

/ / the _ _ proto__ of the object holds the prototypeconsole.log (Test.__proto__===Function.prototype) / / true of the constructor of the object. Does it correspond to the relational table and can understand const obj= {} const obj2=new Object () console.log (Object) / / functionconsole.log (typeof Object) / / 'function' normally?

Since Function is a constructor, should he also have _ _ proto__ and prototype? yes, but there is a special point to keep in mind.

The underlying rule states that Function.__proto__===Function.prototype is equal and that both return a function. My understanding is that Function constructs itself.

/ / normally, the Test.prototype of a function should be an object,//Function.prototype is a function, which is also a special point typeof Test.prototype==='object' / / trueconsole.log (Function.__proto__) / / a functionconsole.log (Function.prototype) / / since a function//Function is a function object _, its _ proto__ points to the prototype of his constructor, that is, / / Function.__proto__===Function.prototype If you adjust yourself, there is nothing wrong with understanding it in this way. Since console.log (Function.__proto__===Function.prototype) / / true//Object is a constructor, the underlying layer is also new Functionconsole.log (Object.__proto__===Function.prototype) / / true//. Because of Function.__proto__===Function.prototype, the following code is true (Object.__proto__===Function.__proto__) = truehasOwnProperty and in

HasOwnProperty

HasOwnProperty is used to determine whether it is an attribute of the object itself (inherited by a non-prototype chain)

Let test= {Object.prototype.c=3console.log (test.hasOwnProperty ('a')) / / trueconsole.log (test.hasOwnProperty ('b')) / / trueconsole.log (test.hasOwnProperty ('c')) / / false

In

In is used to check whether an object contains an attribute (including attributes on the prototype chain)

Console.log ('a'in test) / / trueconsole.log ('b' in test) / / trueconsole.log ('c' in test) / / trueconsole.log ('toString' in test) / / trueconsole.log (' d' in test) / / false, the study on "how to understand prototypes and prototype chains in JavaScript" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.