Using prototypes and closures to complete component Methods

Source: Internet
Author: User
JavaScript refactoring: using prototype and closure, Java code of component method is completed
Var Player = (function (){
Player = function () {// This is just an empty shell
Throw new Error ("Can not instantiate a Player object .");
};
Player. MIN_EXTENDED_TIME = 1;
Player. MAX_EXTENDED_TIME = 3;
Player. _ player = false;
Player. getInstance = function (){
If (! Player. _ player ){
Alert ("Init ...");
Player. _ player = {
_ Name: name,
SetName: function (name ){
This. _ name = name;
},
ToString: function (name ){
Return "Player:" + this. _ name;
}
};
}
Return Player. _ player;
};
Return Player; // return the completed Player component method.
})();

// Var player = new Player (); // new Player () throws an exception.
Var player1 = Player. getInstance ();
Var player2 = Player. getInstance ();
Player2.setName ("RealPlayer ");
Alert (player2.toString (); // output RealPlayer
Finally, we need to define a component method and implement it using a prototype. Let's see how:
Java code
Function Player (name ){
Player. MIN_EXTENDED_TIME = 1;
Player. MAX_EXTENDED_TIME = 3;
This. _ name = name;
};
Player. prototype. setName = function (name ){
This. _ name = name;
};
Player. prototype. toString = function (){
Return "Player:" + this. _ name;
};

Var player = new Player ("WindowsMediaPlayer ");
Alert (player. toString (); // output WindowsMediaPlayer
Player. setName ("RealPlayer ");
Alert (player. toString (); // output RealPlayer
Alert (Player. MAX_EXTENDED_TIME );

Well, there are encapsulation, constants, and the toString method of the Object. As for inheritance and other things, let's talk about it later. It's pretty good. However, the definition of such component methods is not elegant and intuitive enough. methods are defined in independent positions and are not placed together with the original component methods, wouldn't it be better to define it like Java?

By the way, closure can be used for implementation. Try it:
Java code
Function Player (name ){
Player. MIN_EXTENDED_TIME = 1;
Player. MAX_EXTENDED_TIME = 3;
This. _ name = name;
This. setName = function (name ){
This. _ name = name;
};
This. toString = function (){
Return "Player:" + this. _ name;
};
};

Var player = new Player ("WindowsMediaPlayer ");
Alert (player. toString (); // output WindowsMediaPlayer
Player. setName ("RealPlayer ");
Alert (player. toString (); // output RealPlayer
Alert (Player. MAX_EXTENDED_TIME );

Unlike Groovy, closures are greatly enhanced, including support for New syntaxes; JavaScript closures are simple closures, and they do not have special syntaxes that require additional learning, any function that contains unbound variables is defined in the context of the function. This function is a closure. By the way, unlike closures, isn't it just a function code that does not contain any unbound variables?
I wrote it, but in another thought, the Player should have only one copy. It is a singleton. It is better for me to create a singleton mode like Java. :), but I don't want to do anything, I have no way to create a private constructor in JavaScript. It seems that it is not feasible to use this idea to implement the singleton mode ......
What should I do?

However, I cannot control the attributes and behaviors of the new Player object because there is no path to death! When you need to use your new Player object, you find that it cannot be completed at all, or it is just an empty shell! The real thing still needs to be obtained through the classic getInstance method in a single instance:
Java code
Function Player (){
Throw new Error ("Can not instantiate a Player object .");
}; // This is just an empty shell.

(Function () {// This is the real thing
Player. MIN_EXTENDED_TIME = 1;
Player. MAX_EXTENDED_TIME = 3;
Player. _ player = false;
Player. getInstance = function (){
If (! Player. _ player ){
Alert ("Init ...");
Player. _ player = {
_ Name: name,
SetName: function (name ){
This. _ name = name;
},
ToString: function (name ){
Return "Player:" + this. _ name;
}
};
}
Return Player. _ player;
};
})();

// Var player = new Player (); // new Player () throws an exception.
Var player1 = Player. getInstance ();
Var player2 = Player. getInstance ();
Player2.setName ("RealPlayer ");
Alert (player2.toString (); // output RealPlayer

Well, it's really good. The Singleton mode has also been successfully implemented in JavaScript-you have to dare new Player (); it will throw an exception, so nothing can be done, only the object obtained by using the getInstance method is a real Player object. The entire execution result of the above Code only pops up the "Init..." dialog box, indicating that the real "constructor logic" is called only once.

It is still a small pity that the definition of Player is still split into two parts. One part defines shell, and the other part is an anonymous function that defines the constant and getInstance method of Player. Can these two parts be combined into one?
Yes. You only need to use a small anonymous function. if you can see it from the ground up, you can understand it:

At this point, I finally feel relieved. I have a deep understanding of JavaScript object-oriented, and can use the two sharp weapons of prototype and closure to write excellent front-end code. Some colleagues talk to me in private, and I try to paste concise code later. I hope that colleagues with object-oriented and JavaScript basics will be able to gain some benefits.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.