Instructions for using the prototype attribute in javascript (function expansion)_javascript skills

This is a relatively special attribute. Inheritance in Javascript generally relies on this attribute.
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');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() ; // undefined

prototype is an attribute that acts on a class. By default, all Javascript classes will have a prototype attribute, but class instances do not.

Copy code The 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 assignment
in Javascript , when we take an attribute or method that does not exist in an object, it will try to see whether the prototype attribute in the class corresponding to the object contains the attribute or method, and prototype is also a Javascript object. If it also No, the prototype will access the prototype of its corresponding class, and access it level by level until the required attributes or methods are 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 getting a 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

Array.push function that can insert multiple elements at one time:

Copy code The code is as follows:

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 functions.
}

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.