Example analysis and explanation of prototype attribute in javascript_javascript skills

In Javascript, everything is an object, strings are objects, arrays are objects, variables are objects, and functions are also objects, so ['a','b','c'].push('d') is allowed ;Such an operation exists. The class itself is also an object and can also define properties and methods:

Copy code The 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(); // undefinedprototype is a property that acts on the class. By default, all Javascript classes will have a prototype attribute, but class instances do not.

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 acquisition and assignment

In Javascript, when we get a property or method that does not exist in an object, it will try to check the class corresponding to the object. Whether the property or method is included in the prototype property, and prototype is also a Javascript object. If not, the prototype will access the prototype of its corresponding class, and access it level by level until the required property or method is found. , or the prototype attribute is null.

Copy code The 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 Assignment is much simpler than obtaining value.

It does not look up the attribute values ​​​​in the prototype layer by layer, but directly assigns the value to the current instance, and creates it if it does not exist.

Enhancement of built-in classes
The prototype of built-in classes cannot be directly modified in Javascript. However, you can modify the behavior of built-in classes by modifying the attributes of the prototype.

Copy code The code is as follows:

Array.prototype = {push:function(){alert ('test1');}}; // Does not work
Array.prototype.push = function(){alert('test2');}; // Can
var test = new Array('a ','b','c');
test.push('d'); // test2's Array.push function that can insert multiple elements at a time:

Array.prototype.pushs = function()
{
var pos = this.length;
for(var i=0; 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 to the prototype of the built-in class will also be displayed when using the for statement to output attributes:

Copy code The code is as follows:

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

But it can be judged by hasOwnProperty():

Copy code The code is as follows :

var str;
for(var i in test)
{
if(test.hasOwnProperty(i)) // Filter out the pushs function.
{ str = (' ' i); }
}

A few things to note
As mentioned before, prototype is an attribute of the class. Changing the attribute values ​​in the prototype may bring unexpected disasters!

Copy code The 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; // Assignment will create a num attribute for the inst object .
Test.prototype.num = 6; // All values ​​pointing to Test.prototype.num.
var p3 = inst1.num; // 5 What is returned here is the value of the just created inst1.num, not 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 was deleted.