Deep understanding of JS prototype and prototype chain, and deep understanding of js prototype

Source: Internet
Author: User

Deep understanding of JS prototype and prototype chain, and deep understanding of js prototype

PrototypeIt is a concept that is hard to understand in JavaScript. There are also many prototype-related attributes, the object has the prototype attribute, and the function object has the prototype attribute, the prototype object has the "constructor" attribute.

I. Initial Knowledge prototype
In JavaScript, the Prototype is also an object, and the property inheritance of the object can be realized through the Prototype. The JavaScript Object contains an internal property of [[Prototype, this property corresponds to the prototype of the object.
"[[Prototype]" is an internal attribute of an object and cannot be directly accessed. To facilitate viewing the prototype of an object, Firefox and Chrome provide the _ proto _ non-standard (not all browsers support this) (ECMA introduces the standard Object prototype accesser "Object. getPrototype (object )"). The JavaScript prototype object also contains a "constructor" attribute, which corresponds to creating constructors for all instances pointing to the prototype.

Ii. Rules
In JavaScript, each function has a prototype attribute. When a function is used as a constructor to create an instance, the prototype attribute value of this function is assigned to all object instances as the prototype (that is, set the '_ proto _' attribute of the instance), that is, all instances reference the prototype attribute of the function. (*** 'This attribute is available only to function objects! '****)

The new process is divided into three steps.

Var p = new Person ('zhang san', 20 );

1. var p ={}; Initialize an object p.
2. p. _ proto _ = Person. prototype;, set the property of object p _ proto _ to Person. prototype
3. Person. call (p, "Zhang San", 20); call the constructor Person to initialize p. Call/apply

Iii. Initial Knowledge of Objects
The Object itself is a function Object. (Code test) since it is an Object function, there will certainly be the prototype attribute, so we can see that the value of "Object. prototype" is the prototype Object. In turn, when you access the "constructor" attribute of the "Object. prototype" Object, you get the Obejct function.
In addition, when "Object. prototype. _ proto _ "when obtaining the prototype of the Object prototype," null "will be obtained, that is," Object {} "is the end point of the prototype chain.
Iv. Initial Knowledge of Function
As in the constructor in the preceding example, the JavaScript function is also an object, so you can use _ proto _ to find the prototype of the constructor object.
As a Function, the function object has the prototype attribute, which corresponds to the "Function () {}" object.
As an object, a Function object has the _ proto _ attribute, which corresponds to "Function. prototype", that is, "Function. _ proto _ = Function. prototype ".

Here we will briefly introduce prototype and proto:
All objects have the _ proto _ attribute, which corresponds to the prototype of the object.
In addition to the _ proto _ attribute, function objects also have the prototype attribute. When a function is used as a constructor to create an instance, the prototype attribute value of this function is assigned to all object instances as the prototype (that is, the _ proto _ attribute of the instance)

Prototype Link Structure

Prototype chain
Because each object and prototype have a prototype, the prototype of the object points to the prototype object,
The prototype of the parent points to the parent, and the prototype is connected to form a prototype chain.

1. Search for Attributes
When you look for an Object's properties, JavaScript will traverse the prototype chain up until the property of the given name is found until the search reaches the top of the prototype chain (that is, the Object. prototype). If the specified property is still not found, undefined is returned.

function Person(name, age){     this.name = name;     this.age = age;   } Person.prototype.MaxNumber = 9999;Person.__proto__.MinNumber = -9999;var will = new Person("Will", 28); console.log(will.MaxNumber); // 9999 console.log(will.MinNumber); // undefined 

In this example, give "Person. prototype "and" Person. the "MaxNumber" and "MinNumber" attributes are added to the prototype objects. The difference between "prototype" and "proto" needs to be clarified here.

"Person. prototype "corresponds to the prototype of all instances constructed by Person, that is," Person. prototype "is part of the prototype chain of these instances, so when these instances perform attribute search, it will reference" Person. properties in prototype.

How objects are created affects the prototype chain.

Var July = {name: "zhangsan", age: 28, getInfo: function () {console. log (this. name + "is" + this. age + "years old") ;}} console. log (July. getInfo ());

When an Object is created in this way, the prototype chain becomes the prototype of the. July Object, which is "Object. prototype". That is, the Object construction method will affect the form of the prototype chain.

{} Structure of the object prototype chain

Summary
1. All objects have the _ proto _ attribute, which corresponds to the prototype of the object.
2. All function objects have the prototype attribute. The value of this attribute is assigned to the _ proto _ attribute of the 3. image created by the function.
4. All prototype objects have the constructor attribute, which corresponds to creating constructors for all instances pointing to the prototype.
5. Function objects and prototype objects are correlated through the prototype and constructor attributes.

The above will introduce the JS prototype and prototype chain in detail, hoping to help you learn.

Articles you may be interested in:
  • Javascript prototype chain
  • Principle of prototype chain in Javascript study note 7
  • The origin of the prototype chain of a Javascript Object
  • Javascript learning notes (9) prototype in javascript and Inheritance of prototype chains
  • Js prototype chain principles
  • JS inheritance-prototype chain inheritance and class inheritance
  • How to Use the constructor + prototype link hybrid mode based on the Inheritance Mechanism of JavaScript
  • Prototype chaining Based on JavaScript
  • Basic explanation of JavaScript inheritance (prototype chain, borrow constructor, hybrid mode, original type inheritance, parasitic inheritance, and parasitic combined inheritance)
  • Javascript learning notes (5) prototype and prototype chain

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.