The relationship between __proto__ (internal prototype) and prototype (constructor prototype) in JS

Source: Internet
Author: User

__proto__ of all constructors/functions point to Function.prototype, which is an empty function

number.__proto__ = = = Function.prototype//trueboolean.__proto__ = = = Function.prototype//truestring.__proto__ = = = Function.prototype//trueobject.__proto__ = = = Function.prototype//truefunction.__proto__ = = = Function.prototype//truearray.__proto__ = = = Function.prototype//trueregexp.__proto__ = = = Function.prototype//trueerror.__proto__ = = = Function.prototype//truedate.__proto__ = = = Function.prototype//true

There is a total of 12 built-in (build-in) constructors/objects in JavaScript (new JSON in ES5), and 8 constructors are listed here. As the rest of the global cannot be accessed directly, arguments is only created by the JS engine when the function is called, and Math,json exists as an object without new. Their __proto__ are object.prototype. As follows

math.__proto__ = = = Object.prototype  //  truejson.__proto__ = = = Object.prototype  //  True

The "all constructors/functions" mentioned above certainly includes a custom. As follows

// function Declaration function Person () {} // function Expression var function  //  trueconsole.log (man.__proto__ = = = Function.prototype)    //  True

What does that mean?

All constructors come from Function.prototype, even the root constructor object and the function itself. All constructors inherit the properties and methods of the Function.prototype. such as length, call, apply, bind (ES5).

Function.prototype is also the only prototype that typeof Xxx.prototype as "function". The prototype of other constructors is an object. As follows

Console.log (typeofFunction.prototype)//functionConsole.log (typeofObject.prototype)//ObjectConsole.log (typeofNumber.prototype)//ObjectConsole.log (typeofBoolean.prototype)//ObjectConsole.log (typeofString.prototype)//ObjectConsole.log (typeofArray.prototype)//ObjectConsole.log (typeofRegexp.prototype)//ObjectConsole.log (typeofError.prototype)//ObjectConsole.log (typeofDate.prototype)//ObjectConsole.log (typeofObject.prototype)//Object

Oh, the above also mentions that it is an empty function, alert (function.prototype) look under.

Knowing that all constructors (with built-in and custom) __proto__ are Function.prototype, who is Function.prototype __proto__?

I believe I have heard that the function in JavaScript is also a class citizen, where can it be manifested? As follows

// true

This means that all constructors are also a common JS object, which can add/remove attributes to the constructor, and so on. It also inherits all the methods on Object.prototype: ToString, ValueOf, hasOwnProperty, and so on.

Who was the last Object.prototype __proto__?

NULL  // true

has been to the top, null.

The __proto__ of all objects point to the prototype of their constructors

The above tests all the built-in constructors and the __proto__ of the custom constructors, and then look at who the __proto__ of all the instance objects of these constructors point to?

First look at the JavaScript engine built-in constructor

varobj = {name: ' Jack '}vararr = [A.]varReg =/hello/gvarDate =NewDatevarErr =NewError (' Exception ') Console.log (obj.__proto__= = = Object.prototype)//trueConsole.log (arr.__proto__ = = = Array.prototype)//trueConsole.log (reg.__proto__ = = = Regexp.prototype)//trueConsole.log (date.__proto__ = = = Date.prototype)//trueConsole.log (err.__proto__ = = = Error.prototype)//true

Then look at the custom constructor, where a person is defined

function Person (name) {  this. Name = name } var New Person (' Jack '//  true

P is an instance object of person, and the internal prototype of P always points to the prototype of its constructor person.

Each object has a constructor property that can get its constructor, so the following print results are also identical

1 function Person (name) {2 this. Name = name3} 4 var New Person (' Jack ')5//  true

The person above does not add a property or method to its prototype, which adds a GetName method to its prototype

1 functionPerson (name) {2 This. Name =name3 }4 //Modifying Prototypes5Person.prototype.getName =function() {}6 varp =NewPerson (' Jack ')7Console.log (p.__proto__ = = = Person.prototype)//true8Console.log (p.__proto__ = = = P.constructor.prototype)//true

You can see that both p.__proto__ and person.prototype,p.constructor.prototype are identical, meaning they all point to the same object.

If you set up a prototype in a different way, the result is a little differently.

 function   person (name) {       this . Name = name}  Span style= "color: #008000;" >//  rewrite prototype  person.prototype = {     getname:  function   () {}}  var  p = new  person (' Jack ' ) Console.log (p.__proto__  = = = Person.prototype) //  true  Console.log (p.__proto__ = = = P.constructor.prototype) //  false  

The Person.prototype is rewritten directly here (note: The previous example was to modify the prototype). The output shows that p.__proto__ still points to person.prototype, not p.constructor.prototype.

It's also good to understand that assigning a value to Person.prototype is an object with a direct amount of {getname:function () {}}, an object whose constructor (constructor), which is defined using the object's direct amount, points to the root constructor object, Object.prototype is an empty object {},{} is naturally not equal to {getname:function () {}}. As follows

1 var p = {}2//  is an empty object {}3//  Object Direct volume defines the object with its constructor asobject4//  is true and does not explain

The __proto__ used in the above code is currently not supported in IE6/7/8/9. You can use Object.getprototypeof (ES5) in IE9 to get an internal prototype of an object.

var p = {}var __proto__ =//  true

Reprint: http://www.cnblogs.com/snandy/archive/2012/09/01/2664134.html

The relationship between __proto__ (internal prototype) and prototype (constructor prototype) in JS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.