JavaScript object-oriented methods and differences

First: Use the this keyword

Function Class1 ()
{
This. onclick = function (e)
{
For (var I = 0; I <1000; I ++)
{
Var a = new Date ();
}
}

}

This method can be used to flexibly add attributes and methods to objects. It is similar to most OOP languages and can be added even in runtime.

Type 2: Use the prototype keyword

Function clickFunc (e)
{
For (var I = 0; I <1000; I ++)
{
Var a = new Date ();
}
}

Function Class2 ()
{

}

Class2.prototype. onclick = clickFunc;

In terms of this usage, the first method is not flexible. However, before an object is new, you can add attributes and methods of an object at any time.

However, they are not equal. I prefer the first method, because the first method is relatively concentrated and easier to read the code. However, during the operation, their running efficiency is quite different. Let's take a look at the test code below:

Var total = new Array ();

Function Test1 ()
{
Var a = new Date ();
For (var I = 0; I <10000; I ++)
{
Var c = new Class1 ();
// Total. push (c );
}
Var B = new Date ();
Alert (B. getTime ()-a. getTime ());
}

Function Test2 ()
{
Var a = new Date ();
For (var I = 0; I <10000; I ++)
{
Var c = new Class2 ();
// Total. push (c );
}
Var B = new Date ();
Alert (B. getTime ()-a. getTime ());
}

The first step is to test the execution time: it is found that Test1 () requires 142 ms, while Test2 () only requires 50 ms. In terms of time efficiency, prototype is more efficient than this.

The second step is to test the memory usage and set total. push (c); this line of comment is removed, so you need to add them to the array to prevent GC of non-referenced objects when many objects are created. The result shows that the gap is not very large. The first method occupies 20 or 30 mb of memory, while the second method only requires more than one hundred kb.

Cause inference:
When processing the two types of code, the first one is the JS parser, which creates a separate method for each object, which increases the memory overhead and the method creation time, added the running time. Second, the JS parser is the same as most OOP compilers. It stores the data and method segments of objects separately. For private data of objects, each object is a copy, these methods are put in common method segments, so the running time and memory overhead can be reduced.