Talking about the JS prototype object and prototype chain, talking about the js prototype

Source: Internet
Author: User

Talking about the JS prototype object and prototype chain, talking about the js prototype

In Javascript, all objects are objects, but objects are also different. They can be divided into two types: common objects and Function objects ).

In general, the objects generated through the new Function are Function objects, and other objects are common objects.

Example:

function f1(){  //todo}var f2 = function(){  //todo};var f3 = new Function('x','console.log(x)'); var o1 = {};var o2 = new Object();var o3 = new f1(); console.log(  typeof f1,//function  typeof f2,//function  typeof f3,//function  typeof o1,//object  typeof o2,//object  typeof o3 //object);>> function function function object object object

F1 is a function declaration, and the most common function definition method. f2 is actually an anonymous function. It assigns a value to f2, which is a function expression. f3 is not common, but it is also a function object.

Function is an object that comes with JS. When f1 and f2 are created, JS will automatically build these objects using the new Function () method. Therefore, all three objects are created through new Function.

There are two ways to create an object in Javascript: the literal volume of the object and the new expression. The creation of o1 and o2 exactly corresponds to these two methods, if you use the Java and C # ideas to understand it, o3 is the Instance Object of f1, and o3 and f1 are of the same type. At least I thought so before, but it is not...

So how can we understand it? It's easy to see if o3 is generated through the new Function. Obviously not, since it is not a Function object, it is a common object.

After a simple understanding of function objects and common objects, let's take a look at the prototype and prototype chain in Javascript:

In JS, each time a function object f1 is created, this object has some built-in attributes, including prototype and _ proto __, prototype, which is the prototype object, it records some attributes and methods of f1.

It should be noted that prototype is invisible to f1, that is, f1 does not look for the attributes and methods in prototype.

function f(){}f.prototype.foo = "abc";console.log(f.foo); //undefined

So, what is prototype used? In fact, prototype is mainly used for inheritance. Generally speaking, the attributes and methods defined in prototype are reserved for their "descendants". Therefore, subclass can access the attributes and methods in prototype.

To know how f1 left prototype to "future generations", we need to know about the prototype chain in JS. At this time, _ proto _ in JS entered the market. This guy is very strange, it is so hidden that you often cannot see it, but it exists in both common objects and function objects. Its function is to save prototype objects of the parent class, when JS creates an object through the new expression, it usually assigns the prototype of the parent class to the _ proto _ attribute of the new object, which forms a generation-to-generation inheritance...

function f(){}f.prototype.foo = "abc";var obj = new f();console.log(obj.foo); //abc

Now we know that _ proto _ in obj stores the prototype of f. What is saved in _ proto _ in prototype of f? See:

, F. the prototype _ proto _ stores the Object. prototype, Object. prototype objects also contain _ proto __, and the output result shows that the Object. prototype. _ proto _ is null, indicating the end Of the obj object prototype chain. As shown in:

After the obj object has such a prototype chain, when obj. when foo is executed, obj first searches for its own prototype, but does not find its own prototype. When foo is not found, obj searches for it along the prototype chain...

In the above example, we define the foo attribute on prototype of f. Then obj will find this attribute on the prototype chain and execute it.

Finally, I will summarize the key points in this article in a few words:

  • The prototype chain is actually formed by _ proto _ rather than prototype. When the JS engine executes the object method, it first checks whether the object exists in the method. If not, it will be searched on the prototype chain, but will not find its prototype.
  • The _ proto _ of an object records its prototype chain and determines its data type. Changing _ proto _ is equivalent to changing the Data Type of the object.
  • The prototype of a function does not belong to its own prototype chain. It is the core of subclass creation. It determines the Data Type of the subclass and serves as a bridge connecting the prototype chain of the subclass.
  • The purpose of defining methods and attributes on the prototype object is to inherit and use the quilt class.

The above is all the content of this article, hoping to help you learn.

Articles you may be interested in:
  • Javascript prototype chain
  • 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
  • Common JS prototype object "singing"
  • JS inheritance-prototype chain inheritance and class inheritance
  • Objects of Javascript learning notes (ii): Prototype objects
  • Deep understanding of javascript constructors and prototype objects
  • Summary of methods for obtaining prototype objects of objects in Javascript

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.