SoFunction
Updated on 2025-02-28

Instructions for use of prototype attributes in javascript (function function extension)

This is a relatively special property, and inheritance in Javascript generally relies on this property to implement.
In Javascript, everything is an object, string is an object, array is an object, variable is an object, and functions are also an object, so operations such as ['a','b','c'].push('d'); are allowed to exist. The class itself is also an object, and properties and methods can also be defined:
Copy the codeThe code is as follows:

function Test(){};
= 'str';
= function(){return 'fun';};
var r1 = ; // str
var r2 = (); // fun
var inst = new Test();
var r3 = ; // undefined
var r4 = (); // undefined

prototype is a property that acts on a class. By default, all Javascript classes will have a prototype attribute, but the class instance does not.
Copy the codeThe code is as follows:

function Test(){};
var p1 = typeof(); // object
var p2 = typeof(); // object
var p3 = typeof(new Test().prototype); // undefined
var p4 = typeof(); // object
var p5 = typeof(new Object().prototype); // undefined

Value and assignment
In Javascript, when we take a property or method that does not exist in an object, it will try to see whether the prototype property in the corresponding class of the object contains the property or method. Prototype is also a Javascript object. If there is no, the prototype will access the prototype of its corresponding class, and access it up level by level until the required property or method is found, or the prototype property is null.
Copy the codeThe code is as follows:

function Test(){};
= 'str';
function pt1()
{ this.test1 = 'pt1'; };
function pt2()
{ this.test2 = 'pt2'; };
.test3 = 'test3';
.test1 = 'test4';
= new pt2();
= new pt1();
var inst = new Test();
var p1 = ; // undefined
var p2 = inst.test1; // pt1 instead of test4
var p3 = inst.test2; // pt2
var p4 = inst.test3; // test3

Compared to taking values, assignment is much simpler. It does not look up the property values ​​in the prototype layer by layer, but directly assigns values ​​to the current instance, and creates them if they do not.
Built-in class enhancements
In Javascript, the prototype of the built-in class cannot be directly modified. However, the purpose of modifying the built-in class behavior can be achieved by modifying the properties of the prototype.
Copy the codeThe code is as follows:

= {push:function(){alert('test1');}}; // Not working
= function(){alert('test2');}; // Yes
var test = new Array('a','b','c');
('d'); // test2

Functions that can insert multiple elements at once:
Copy the codeThe code is as follows:

= function()
{
var pos = ;
for(var i=0; i<; i++)
{
this[++pos] = arguments[i];
}
return ;
}
var test = new Array('a','b','c');
('d','e');

It is worth noting that functions added to the prototype of the built-in class will also be displayed when outputting properties using the for statement:
Copy the codeThe code is 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 the codeThe code is as follows:

var str;
for(var i in test)
{
if((i)) // Filter out the pushs function.
{ str += (' ' + i); }
}
]
A little precaution
As mentioned earlier, prototype is a property of a class. Changing the property value in the prototype may cause unexpected disasters!
Copy the codeThe code is as follows:

function Test(){}
= 3;
var inst1 = new Test();
var inst2 = new Test();
= 4; // All values ​​pointed to.
var p1 = ; // 4
var p2 = ; // 4
= 5; // Assign a value to create a num attribute for the inst object.
= 6; // All values ​​pointed to.
var p3 = ; // 5 Here is the value just created, not the value.
var p4 = ; // 6
delete ;
var p5 = ; // 5 still exists.
var p6 = ; // undefined was deleted.