Different ways to add functions to Javascript object
In Javascript is there any difference between these two ways of adding a function to an object? Is one preferable for any reason?
function ObjA() {
this.AlertA = function() { alert("A"); };
}
ObjA.prototype.AlertB = funct开发者_如何学运维ion() { alert("B"); };
var A = new ObjA();
A.AlertA();
A.AlertB();
Sure there is a difference. If you define this.AlertA
, you are defining a method that is local for the instance of ObjA
. If you add AlertA
to the prototype of the ObjA
constructor, it is defined for every instance of ObjA
. The latter is, in this case, more efficient, because it's only assigned once, whilst a local method is assigned every time you create an instance of ObjA
.
So using this.AlertA
in:
var A = new ObjA,
B = new ObjA,
C = new ObjA;
for A, B and C the constructor has to add the method AlertA
. AlertB
on the other hand, is only added once. You can check that using:
function ObjA() {
alert('adding AlertA!');
this.AlertA = function() {
alert("A");
};
if (!ObjA.prototype.AlertB) {
alert('adding AlertB!');
ObjA.prototype.AlertB = function() {
alert("B");
};
}
}
var A = new ObjA, //=> alerts adding AlertA! and alerts adding AlertB!
B = new ObjA, //=> alerts adding AlertA!
C = new ObjA; //=> alerts adding AlertA!
Using the object constructor will assign a copy of that function to every new instance of your object. Using prototyping will result in one function being shared across all instances.
精彩评论