Javascript Design Pattern reader notebook-JavaScript object-oriented implementation

 

1. Various implementation methods of JavaScript classes .. In JavaScript that has been used for several years, I feel that it is not very deep, but it is superficial. Basically, some small functions are written, and classes have never been used.

For example:

Function startanimation (){

...

}

Function staopanimation (){

...

}

The above method is very simple, it is a function to start and end the animation, but it cannot create an animation object that can save the state and operate on the internal state. The following is the implementation of the defined class:

VaR anim = function (){

...

};

 

Anim. Prototype. Start = function (){

...

}

 

Anim. Prototype. Stop = function (){

...

}

Class usage:

VaR myanim = new anim ();

Myanim. Start ();

...

Myanim. Stop ();

The above defines a class anim and assigns two methods to the prototype attribute of the class.

If you prefer to encapsulate the class definition in a declaration, you can use the following code:

VaR anim = function (){

...

};

Anim. Prototype = {

Start: function (){

...

}.

Stop: function (){

...

}

};

 

The code above can also be in another style:

Function. Prototype. method = function (name, FN ){

This. Prototype [name] = FN;

};

 

VaR anim = function (){

...

};

Anim. Method ('start', function (){

...

});

Anim. Method ('stop', function (){

...

});

Function. Prototype. method is used to add a new method for the class. The first represents the method name, and the second represents the function used as the new method.

 

You can further modify function. Prototype. method so that it can be called in a chain. This only requires him to return the value of this. The Code is as follows:

Function. Prototype. method = function (name, FN ){

This. Prototype [name] = FN;

Return this;

};

 

VaR anim = function (){

...

};

Anim. Method ('start', function (){

...

}). Method ('stop', function (){

...

});

 

The preceding five methods are used to complete the same job.

 

2. Anonymous Functions

(Function (){

...

})()

Eg:

(Function (Foo, bar ){

Alert (FOO * bar );

}) (10, 2)

The most interesting use of anonymous functions is to create closures. A closure is a protected variable space. In addition, JavaScript has function-level scopes. This means that variables defined inside the function cannot be accessed outside the function.This means that the function runs in the scope defined by it, instead of calling in its scope.. These two factors can wrap variables in anonymous functions and protect them. You can create private variables of the class as follows:

VaR Baz;

(Function (){

VaR Foo = 10;

VaR bar = 2;

Baz = function (){

Returnfoo * bar;

};

})();

 

Baz (); // Baz can access Foo and bar, although this method is executed outside the anonymous function.

Baz is defined in the closure, so it can access the variables in the Foo and bar anonymous functions.

Running result: a message box 20 is displayed;

 

3. Object Variability

In JS, all objects are changeable. This means that you can use techniques that are not allowed in most languages, such as adding attributes to functions.

Function displayerror (Message)

{

Displayerror. numtimesexecuted ++;

Alert (Message );

Alert (displayerror. numtimesexecuted );

};

Displayerror. numtimesexecuted = 0;

This also means that you can modify the previously defined classes and instantiated objects.

The following shows how to modify classes and modify objects after instantiation:

Function person (name, age ){

This. Name = Name;

This. Age = age;

};

Person. Prototype = {

Getname: function (){

Return this. Name;

},

Getage: function (){

Return this. Age;

}

}

 

// Instantiate the object

VaR Alice = new person ('Alice ', 20 );

VaR bill = new person ('bill ', 30 );

 

// Modify the class

Person. Prototype. getgreeting = function (){

Return 'Hi' + this. getname () + '! ';

};

 

// Modify a specific instance

Alice. displaygreeting = function (){

Alert (this. getgreeting ());

}

 

Getgreeting is created after the instantiated object is created, but the two instances can still obtain this method. In addition, only the Alice instance of displaygreeting obtains this method, and no other instances have this method.

 

4. Inheritance. Inheritance in JS is not as simple as in another object-oriented language. JS uses Object-based (Prototypal) Inheritance, which can be used to simulate class-based (classical) inheritance. These two methods will be discussed later.