The prototype chain in JavaScript is deeply understood

Source: Internet
Author: User
Tags constructor

  to figure out the prototype chain is to understand the function type first, there is no concept of class in JavaScript, is a function, so it is a functional programming language

To find out the prototype chain is to understand the function type first, in JavaScript there is no class concept, are functions, so it is a functional programming language. A class has an important feature, which is that it can create an object that is a template based on its constructor. In JavaScript, the function has 2 functions     First, as a general function call   Second, as its prototype object's constructor is also new ()     We look at an example of the     code as follows: function A () {  this.name = ' A '; }    When creating a function, what happens?     First, it will create 1 function objects namely a itself     second, it will create 1 prototype objects @a (expressed in @)     Third, the function object will have a prototype pointer, It points to the corresponding prototype object, which points to the @a    IV, @a object has a construtor pointer to its constructor, which points to a    http://img.blog.csdn.net/ 20140222125611500?watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvbgpsmtu3mdex/font/5a6l5l2t/fontsize/400/fill/ I0JBQKFCMA ==/dissolve/70/gravity/southeast    What is the use of this prototype attribute?     In fact, the prototype property represents the range that the current function can control (or it indicates whose constructor the current function is), where a is the constructor of the @a prototype object, so we'll see that the writing     code is as follows: function A () {  this.name = ' A '; }    var a1 = new A ();      This is similar to other common languages, and new is to invoke a prototype object ( Creates a new object instance from the inside constructor (constructor) within the prototype pointer.     So modified the PROtotype points to the attributes inside the object, and it affects all instances created with the template, we can verify that the       code is as follows: function A () {  this.name = ' A '; }     var a1 = new A ();  a.prototype.age = 1;  alert (a1.age);    Results:1    Then why A1 object can be straight Access to the age attribute? A1 Object I didn't define the age attribute.,    That's because all instances have a reference _proto_ (direct access under Firfox,chrome, IE does not support) point to the prototype, which points to the @a,    Code as follows: function A () {  this.name = ' A '; }    var a1 = new A ();  alert (a1._proto_ = = A.protot ype)     results:true    in accessing the properties, will first look inside the A1 object, if not, will follow the _PROTO_ pointed to the inside of the object to look for, here will be found in the @a, find on the return value, Did not find to return to undefined, using an idiom to describe, is to track down!     This is the meaning of the prototype chain came out, because the prototype object also has a _proto_ pointer, and pointed to another prototype, one after another, formed a prototype chain. Object.prototype is the topmost prototype, so if you modify the properties of the Object.prototype, it affects all of the objects.     To see a code     code as follows: function A () {  this.name = ' A '; }    function B () {  this . Age = 1; }    B.prototype = new A ();  alert (new B (). Name);    We show that the prototype of B points to an instance of a, and then the instance of B is also can accessThe properties of a. This is the inheritance of JavaScript, so why does B.prototype point to an instance of a instead of pointing directly to A.prototype?     Code as follows: B.prototype = new a.prototype;    If it's written like this, Modifying the attributes in the P.prototype, the prototype of a will also change, which is not appropriate if the subclass modifies the parent class and the subclass and the parent class are blended together. In other words, B has become a @a constructor, A,b is a lateral relationship.     We can next define:    function A inherits function B which makes function a the constructor of an instance of function B archetype, the property declared in the constructor is function a itself, and the attribute in the prototype instance is the successor B   The code is as follows: var $ = JQuery = function (selector,context) { //cannot construct itself again in its own constructor, so it returns an instance of another constructor   return new Init ( Selector,context); }  Jquery.fn = Jquery.prototype = {  size:function () {  return this.length;  } }    function init (selector,context) {   }  init.prototype = Jquery.fn;;  }    This is a piece of jquery source code, when we use jquery, and do not use the New keyword, how does it construct objects?     With the above knowledge, you can explain that jquery here is just a call to a generic function that returns the object created by another constructor of the jquery prototype, that is, new Init ()  
Related Article

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.