Js about propotype ------- Day62, js

Source: Internet
Author: User
Tags prototype definition

Js about propotype ------- Day62, js

Recently, I was busy moving and busy packing up the house. I thought I had something. Who knows that the more I packed it, the more I collapsed .....

Yesterday, when I used createDocumentFragment () to record the typical method of dynamically generating tables in js, I also felt that I had learned new things. When I looked back at the record, I was surprised to find that I recorded it once a long time ago. It was sad, as if I had returned to the Age of "a good brain is better than a bad pen, it seems that you still have to read more.

A classic "propotype" is also used in this application, which is recorded here:

1. Concepts of propotype

In w3cshool, this is explained as follows:The propotype attribute enables you to add attributes and methods to an object.

There are also some introductions to describe: There is A class A, and I want to create A Class B, which is based on class A and can be expanded, the prototype of B is;

After learning about some related knowledge, let's look back at the explanation in w3cshool. It is really concise and concise. It is very suitable, although I had struggled for a long time at the beginning;

2. Definition of propotype

To solve this problem, first record the javascript method type:

A,Class Method

function createTable(){ this.tableRowNum=10; this.show=function(){     alert(1); };};

B,Object Method

CreateTable. introduce = function () {alert ("this is a table ");};

C,Prototype Method

CreateTable. propotype. introduce = function () {alert ("this is another table ");}
Here, we first introduce the three methods of javascript to better understand them. The third method is the prototype method, that is, the definition of the prototype. In fact, broadly speaking, the prototype definition is still in the scope of object definition, createTable. if propotype is regarded as an object, and it is actually an object, we can write a method to prove it: function a () {}, alert (. propotype );

Let's recall how an object is defined in java and its attributes and methods. createTable is an object with its methods while createTable. if propotype can be viewed as an object, it is its attribute. The prototype is the method of its attribute, and the original object can be changed by changing its attribute. This is obvious.

In this way, you can easily understand how the prototype method is defined.

3. Application of propotype

A,Add attributes to propotype

This is relatively simple, such:

Function book () {this. bookPage = 10;} book. propotype. add = function {this. bookName = "come on ";}
Through the above definition, we know that the method for changing its attributes will also change the object itself. If an instance is generated, there will be two attributes, bookPage and bookName;

B,Use propotype to add functions to objects

This is applied to the generated table, such as adding rows and columns. In fact, the method for adding object properties is still to add the original object.

4. personal summary (may be biased and I hope I can correct it)

Through the application, we can conclude that our definition of the object prototype is to add an attribute or method with a given name to the original object, and we take it out separately, it is to avoid repeated generation of the same content and efficiency issues. In addition, multiple objects may have common attributes, which reminds us of the inherited definition, the existence of the parent class does not exist for this reason, but some people give A better name: Clone, It is not inherited after all, because when A prototype is B, the prototype of B can also be A, which does not exist in inheritance, so it is called cloning.

5. Small details

When a method has an attribute and its prototype method also has this attribute, the method priority of the original object is higher than that of the prototype method.


I 've written a lot of things, but I still feel a little confused. I feel a little vague and understandable. I use a language to clearly describe it for some difficult times, but this is the current understanding, hope that as experience increases, understanding will continue to deepen ....






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.