Usage of prototype attribute in javascript (Function Extension)

Source: Internet
Author: User
Tags hasownproperty

This is a special property. Inheritance in Javascript generally depends on this property.
In Javascript, everything is an object. strings are objects, arrays are objects, variables are objects, and functions are objects. Therefore, ['A', 'B ', 'C']. push ('D'); such an operation exists. The class itself is also an object. You can also define attributes and methods:
Copy codeThe Code is as follows:
Function Test (){};
Test. str = 'str ';
Test. fun = function () {return 'fun ';};
Var r1 = Test. str; // str
Var r2 = Test. fun (); // fun
Var inst = new Test ();
Var r3 = inst. str; // undefined
Var r4 = inst. fun (); // undefined

Prototype is an attribute that acts on a class. By default, all Javascript classes have a prototype attribute, but the class instance does not.
Copy codeThe Code is as follows:
Function Test (){};
Var p1 = typeof (String. prototype); // object
Var p2 = typeof (Test. prototype); // object
Var p3 = typeof (new Test (). prototype); // undefined
Var p4 = typeof (Object. prototype); // object
Var p5 = typeof (new Object (). prototype); // undefined

Value and value assignment
In Javascript, when we take an attribute or method that does not exist in an object, it will try to check whether the prototype attribute in the class corresponding to this object contains this attribute or method, prototype is also a Javascript Object. If it does not exist, the prototype will access the prototype of its corresponding class, so that the prototype can be accessed up to the level until the desired attribute or method is found, or the prototype attribute is null.
Copy codeThe Code is as follows:
Function Test (){};
Test. test = 'str ';
Function pt1 ()
{This. test1 = 'pt1 ';};
Function pt2 ()
{This. test2 = 'pt2 ';};
Pt2.prototype. test3 = 'test3 ';
Pt2.prototype. test1 = 'test4 ';
Pt1.prototype = new pt2 ();
Test. prototype = new pt1 ();
Var inst = new Test ();
Var p1 = inst. test; // undefined
Var p2 = inst. test1; // pt1 instead of test4
Var p3 = inst. test2; // pt2
Var p4 = inst. test3; // test3

Value assignment is much easier than value assignment. It does not look up the attribute values in prototype layer by layer, but directly assigns values to the current instance. If no value exists, it is created.
Enhancement of built-in classes
You cannot directly modify the prototype of the built-in class in Javascript. However, you can modify the attributes of prototype to modify the built-in class behavior.
Copy codeThe Code is as follows:
Array. prototype = {push: function () {alert ('test1') ;}}; // does not work
Array. prototype. push = function () {alert ('test2') ;}; // Yes
Var test = new Array ('A', 'B', 'C ');
Test. push ('D'); // test2

The Array. push function that can insert multiple elements at a time:
Copy codeThe Code is as follows:
Array. prototype. pushs = function ()
{
Var pos = this. length;
For (var I = 0; I <arguments. length; I ++)
{
This [++ pos] = arguments [I];
}
Return this. length;
}
Var test = new Array ('A', 'B', 'C ');
Test. pushs ('D', 'E ');

It is worth noting that the function added for the prototype of the built-in class will also be displayed when you use the for statement output attribute:
Copy codeThe Code is as follows:
Var str;
For (var I in test)
{
Str + = (''+ I); // '0 1 2 3 4 5 pushs 'pushs custom function.
}

However, it can be determined through hasOwnProperty:
Copy codeThe Code is as follows:
Var str;
For (var I in test)
{
If (test. hasOwnProperty (I) // filter out the pushs function.
{Str + = (''+ I );}
}
]
Notes
As mentioned above, prototype is an attribute of a class. Changing the attribute value in prototype may cause unexpected disasters!
Copy codeThe Code is as follows:
Function Test (){}
Test. prototype. num = 3;
Var inst1 = new Test ();
Var inst2 = new Test ();
Test. prototype. num = 4; // All values pointing to Test. prototype. num.
Var p1 = inst1.num; // 4
Var p2 = inst2.num; // 4
Inst1.num = 5; // assign a value to create a num attribute for the inst object.
Test. prototype. num = 6; // All values pointing to Test. prototype. num.
Var p3 = inst1.num; // 5 the value of the newly created inst1.num is returned instead of the value of Test. prototype. num.
Var p4 = inst2.num; // 6
Delete Test. prototype. num;
Var p5 = inst1.num; // 5 inst1.num still exists.
Var p6 = inst2.num; // undefined Test. prototype. num is deleted.

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.