Analysis of JavaScript writing methods

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 writing tool functions or frameworks are essentiallyConstructor + 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.

BKJIA recommended topics: JavaScript functional programming

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

 
 

  
  
/** 
  
  
* Person class: defines a Person with a property name and a getName method. 
  
  
* @ Param {String} name 
  
  
*/ 
  
  
FunctionPerson (name ){
  
  
This. Name = name;
  
  
This. GetName =Function(){
  
  
Return This. Name;
  
  
}
  
  
}
 
 

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:

 
 

  
  
var p1 = new Person("Jack");  
  
  
var p2 = new Person("Tom");  
  
  
console.log(p1 instanceof Person);//true  
  
  
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:

 
 

  
  
// External functions 
  
  
FunctionGetName (){
  
  
Return This. Name;
  
  
}
  
  
FunctionPerson (name ){
  
  
This. Name = name;
  
  
This. GetName = getName;// Note the following: 
  
  
}
 
 

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

 
 

  
  
/** 
  
  
* Person class: defines a Person with a property name and a getName method. 
  
  
*/ 
  
  
FunctionPerson (){}
  
  
Person. prototype. name ="Jack";
  
  
Person. prototype. getName =Function(){Return This. Name ;}
 
 

Link all attributes (fields) and methods of the class to prototype.

Create several objects for testing

 
 

  
  
var p1 = new Person();  
  
  
var p2 = new Person();  
  
  
console.log(p1.getName());//jack  
  
  
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.

 
 

  
  
/** 
  
  
* Person class: defines a Person with a property name and a getName method. 
  
  
* @ Param {String} name 
  
  
*/ 
  
  
FunctionPerson (name ){
  
  
This. Name = name;
  
  
}
  
  
Person. prototype. getName =Function(){
  
  
Return This. Name;
  
  
}
 
 

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.

 
 

  
  
Public ClassPerson {
  
  
// Attribute field) 
  
  
String name;
  
  
// Constructor) 
  
  
Person (String name ){
  
  
This. Name = name;
  
  
}
  
  
// Method 
  
  
String getName (){
  
  
Return This. Name;
  
  
}
  
  
}
 
 

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

 
 

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

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

 
 

  
  
var p1 = new Person("Jack");  
  
  
var p2 = new Person("Tom");  
  
  
console.log(p1.getName());//Jack  
  
  
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

 
 

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

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

 
 

  
  
FunctionPerson (name ){
  
  
This. Name = name;
  
  
If(Person. _ init = undefined ){
  
  
Alert ("I only execute once! ");
  
  
Person. prototype. getName =Function(){
  
  
Return This. Name;
  
  
}
  
  
Person. _ init = 1;
  
  
}
  
  
}
 
 

Two new objects

 
 

  
  
VarP1 =NewPerson ("Andy");// The First Time "new" will pop up, "I only execute once! ' 
  
  
VarP2 =NewPerson ("Lily");// The new object will not be executed in the future 
 
 

Link: http://www.cnblogs.com/snandy/archive/2011/03/06/1971764.html

1. How to Write high-quality Javascript code
2. Detect Android devices using JavaScript or PHP
3. A deep understanding of the closure features of JavaScript
4. New JavaScript code optimization tool UglifyJS
5. JavaScript cross-origin summary and Solutions