JavaScript Writing Method (1)

& Nbsp; from this article, there will be about 5-8 articles on the JSOO writing method from shortest to deep analysis. The writing methods of Popular Libraries (frameworks) will be analyzed later. Writing Methods of some write-type tool functions or frameworks are essentially constructor + prototype. Only by understanding this can we truly understand how to use JavaScript to write object-oriented SyntaxHighlighter.

From this article, we will analyze js oo writing methods from a shortest to a deep one. There will be about 5-8 articles. The writing methods of Popular Libraries (frameworks) will be analyzed later. Writing Methods of some write-type tool functions or frameworks are essentially constructor + prototype. Only by understanding this can we truly understand how to use JavaScript to write object-oriented code. Or use object-oriented methods to organize code. Of course, JavaScript can also write functional code, which is generic.

For the sake of singularity, class inheritance, (private, protected) attributes or methods are not considered for the moment. EMCAScript does not actually have the concept of class, but can be understood as a more general concept.

 

1. constructor Method

View sourceprint? 01 /**

02 * Person class: defines a Person and has a property name and a getName method.

03 * @ param {String} name

04 */

05 function Person (name ){

06 this. name = name;

07 this. getName = function (){

08 return this. name;

09}

10}

This style makes Java a little more friendly because some parameters need to be configured to construct an object, and the parameters need to be assigned to this in the class. But the difference with Java is that JS uses function to replace class, and the parameter does not need to define the type.

After the class is written, we create several objects:

View sourceprint? 1 var p1 = new Person ("Jack ");

2 var p2 = new Person ("Tom ");

3 console. log (p1 instanceof Person); // true

4 console. log (p2 instanceof Person); // true

The console output also proves that p1 and p2 are indeed object instances of the Person class.

The advantage of this method is that different object instances can be constructed based on parameters. The disadvantage is that each instance object will generate the getName method version during the construction, resulting in a waste of memory.

Experienced programmers use an external function to replace Class methods, so that each object shares the same method. The modified class is as follows:

View sourceprint? 1 // external Function

2 function getName (){

3 return this. name;

4}

5

6 function Person (name ){

7 this. name = name;

8 this. getName = getName; // note this

9}

Some people may think that the Code style is a little unsatisfactory, and it is not as compact as Java. But it can indeed reduce memory consumption.

2. Prototype

View sourceprint? 1 /**

2 * Person class: defines a Person and has a property name and a getName method.

3 */

4 function Person (){}

5 Person. prototype. name = "jack ";

6 Person. prototype. getName = function () {return this. name ;}

Link all attributes (fields) and methods of the class to prototype. Create several objects for testing

View sourceprint? 1 var p1 = new Person ();

2 var p2 = new Person ();

3 console. log (p1.getName (); // jack

4 console. log (p2.getName (); // jack

It can be seen that the output is jack. The disadvantage of the prototype is that the object instance cannot be constructed through parameters (generally, the attributes of each object are different ), the advantage is that all object instances share the getName method (relative to the constructor method) without causing memory waste.

 

3. constructor + prototype

Take the advantages of the first two methods:
A. Use constructors to define class attributes (fields ).
B. Define the class method in prototype mode.

View sourceprint? 01 /**

02 * Person class: defines a Person and has a property name and a getName method.

03 * @ param {String} name

04 */

05 function Person (name ){

06 this. name = name;

07}

08 Person. prototype. getName = function (){

09 return this. name;

10}

In this way, you can use the constructor to construct people with different names. The object instances also share the getName method, without causing a waste of memory.
However, it seems that this code style is still not as compact as Java classes. The attributes, constructor methods (functions), and methods are enclosed in braces.

View sourceprint? 01 public class Person {

02

03 // attribute (field)

04 String name;

05 // Constructor (function)

06 Person (String name ){

07 this. name = name;

08}

09 // Method

10 String getName (){

11 return this. name;

12}

13}

To make JS Code more compact, move the method code hanging in prototype to the braces of function Person.

View sourceprint? 1 function Person (name ){

2 this. name = name;

3 Person. prototype. getName = function (){

4 return this. name;

5}

6}

It seems amazing. You can write it like that! Verify

View sourceprint? 1 var p1 = new Person ("Jack ");

2 var p2 = new Person ("Tom ");

3 console. log (p1.getName (); // Jack

4 console. log (p2.getName (); // Tom

No error is reported, and the console outputs it correctly. It seems perfect to write like this.
A. You can create an object instance by passing parameters.
B. object instances share the same method without causing memory waste.
C. Compact code style

But every time a new object is created

View sourceprint? 1 Person. prototype. getName = function (){

2 return this. name;

3}

This causes unnecessary repeated operations. Because the getName method only needs to be executed once on prototype. You only need to make some changes.

View sourceprint? 01 function Person (name ){

02 this. name = name;

03

04 if (Person. _ init = undefined ){

05 alert ("I only run once! ");

06 Person. prototype. getName = function (){

07 return this. name;

08}

09 Person. _ init = 1;

10}

11}

Two new objects,

View sourceprint? 1 var p1 = new Person ("Andy"); // The first time new is displayed, I only run it once!

2 var p2 = new Person ("Lily"); // The new object will not be executed again later.