Instructions for using prototype properties in JavaScript (functional extension) _javascript tips

Source: Internet
Author: User
Tags hasownproperty
This is a very special attribute, and inheritance in JavaScript generally relies on this property implementation.
In JavaScript, everything is an object, a string is an object, an array is an object, a variable is an object, and a function is an object, so it is permissible to [' A ', ' B ', ' C '].push (' d '); The class itself is also an object, and you can define properties and methods:
Copy Code code 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 a property that acts on a class. By default, all JavaScript classes have a prototype property, but the class instance does not.
Copy Code code 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

Values and Assignments
In JavaScript, when we take a property or method that does not exist in an object, it attempts to see whether the property or method is contained in the prototype attribute in the corresponding class of the object, and prototype is also a JavaScript object, if not, The prototype also accesses the prototype of its corresponding class so that it can be accessed up to the first level until the desired property or method is found, or the prototype property is null.
Copy Code code 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, not test4.
var p3 = Inst.test2; Pt2
var P4 = Inst.test3; Test3

It is much simpler to assign a value than to take a value. It does not look up the value of an attribute in the prototype, but directly assigns the current instance to it, without creating it.
Enhancements to built-in classes
The prototype of built-in classes cannot be directly modified in JavaScript. However, you can modify the prototype properties to achieve the purpose of modifying the built-in class behavior.
Copy Code code as follows:

Array.prototype = {push:function () {alert (' test1 ');}; Doesn't work
Array.prototype.push = function () {alert (' test2 '); OK
var test = new Array (' A ', ' B ', ' C ');
Test.push (' d '); Test2

Array.push functions that can be inserted multiple elements at a time:
Copy Code code 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 functions added for the prototype of the built-in classes are also displayed when you use the For statement to output properties:
Copy Code code as follows:

var str;
for (var i in test)
{
str + = (' + i '); ' 0 1 2 3 4 5 pushs ' PUSHS custom function.
}

But it can be judged by hasOwnProperty ():
Copy Code code as follows:

var str;
for (var i in test)
{
if (Test.hasownproperty (i))//filter out the PUSHS function.
{str + = (' + i ');}
}
]
A little attention to things
As I said before, prototype is a property of a class. Changing the property values in the prototype can bring unexpected disaster!
Copy Code code 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;//assignment, a num property is created for the Inst object.
Test.prototype.num = 6;//All values pointing to Test.prototype.num.
var p3 = inst1.num//5 Returns the value of the inst1.num that was just created, not the Test.prototype.num value.
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 was 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.