Several implementation methods of JavaScript object-oriented

Several implementation methods of JavaScript object-oriented

Factory mode

1 functioncreateblog (name, URL) {2   varo =NewObject ();3O.name =name;4O.url =URL;5O.sayurl=function() {6Alert This. URL);7   }8   returno;9 }Ten varBlog1 = Createblog (' Wuyuchang ', ' http://www.jb51.net/');

Pros: The implementation method is very simple, create an object within the function, give the object properties and methods, and then return the object. Resolves an issue that creates multiple similar objects.

Cons: Factory mode does not recognize the type of object because it is all object, unlike date, array, and so on. Therefore, a constructor pattern appears.

Constructor mode

1 functionBlog (name, URL) {2    This. Name =name;3    This. url =URL;4    This. Alerturl =function() {5Alert This. URL);6   }7 }8 9 varBlog =NewBlog (' Wuyuchang ', ' http://www.jb51.net/');TenConsole.log (bloginstanceofBlog);//true to determine if a blog is an instance of a blog

Pros: You can create objects of a specific type, similar to native JS objects such as array, date, and so on.

Cons: Recreate the method every time you create an instance (theoretically, each time an object is created with different properties, and the object's method is the same), however, it is not necessary to create two identical methods, so we can move the method function out of the object.

As in the following example:

1 functionBlog (name, URL) {2    This. Name =name;3    This. url =URL;4    This. Alerturl =Alerturl;5 }6 7 functionAlerturl () {8Alert This. URL);9 }Ten  One varBlog =NewBlog (' scjb51 ', ' http://sc.jb51.net/'), ABLOG2 =NewBlog (' jb51 ', ' http://www.jb51.net/'); -  -Blog.alerturl ();//http://sc.jb51.net/ theBlog2.alerturl ();//http://www.jb51.net/

We set the Alerturl as a global function, so that both the blog and BLOG2 access are the same function. But again, in the global scope of the definition of a real just want to let the blog use the function, the display to let the global scope some true, more unacceptable is to define in the global scope of many only for specific objects to use the method, wasted space does not say, obviously lost object-oriented encapsulation, so you can pass prototype mode to resolve this issue.

Prototype mode

1 functionBlog () {}2 3Blog.prototype.name = ' Wuyuchang ';4Blog.prototype.url = ' http://tools.jb51.net/';5Blog.prototype.friend = [' Fr1 ', ' fr2 ', ' fr3 ', ' FR4 '];6Blog.prototype.alertInfo =function() {7Alert This. Name + This. URL + This. Friend);8 }9 Ten //The following is the test code One varBlog =NewBlog (), ABLOG2 =NewBlog (); -  -Blog.alertinfo ();//WUYUCHANGHTTP://TOOLS.JB51.NET/FR1,FR2,FR3,FR4 theBlog2.alertinfo ();//WUYUCHANGHTTP://TOOLS.JB51.NET/FR1,FR2,FR3,FR4 -  -Blog.name = ' Wyc1 '; -Blog.url = ' http://***.com '; + Blog.friend.pop (); -Blog2.name = ' WYC2 '; +Blog2.url = ' http://+++.com '; ABlog.alertinfo ();//WYC1HTTP://***.COMFR1,FR2,FR3 atBlog2.alertinfo ();//WYC2HTTP://+++.COMFR1,FR2,FR3

Pros: Each function we create has a prototype (prototype) attribute, which is a pointer to an object that is used to contain properties and methods that can be shared by all instances of a particular type. The advantage of using a prototype object is that you can have all object instances share the properties and methods that it contains.

Cons: First, it omits the link of the constructor to pass initialization parameters, resulting in all instances having the same property value by default, which is very inconvenient. However, the biggest problem with the prototype pattern is the nature of sharing, which, because of sharing, one instance modifies the reference, and the other changes the reference. Therefore, we do not usually use prototypes alone, but combine the prototype pattern with the constructor pattern, which is mixed mode.

Mixed Mode (prototype Mode + constructor mode)

1 functionBlog (name, URL, friend) {2    This. Name =name;3    This. url =URL;4    This. Friend =friend;5 }6 7Blog.prototype.alertInfo =function() {8Alert This. Name + This. URL + This. Friend);9 }Ten  One varBlog =NewBlog (' Wuyuchang ', ' http://tools.jb51.net/', [' fr1 ', ' fr2 ', ' FR3 ']), ABLOG2 =NewBlog (' Wyc ', ' http://**.com ', [' A ', ' B ']); -  - Blog.friend.pop (); theBlog.alertinfo ();//WUYUCHANGHTTP://TOOLS.JB51.NET/FR1,FR2 -Blog2.alertinfo ();//wychttp://**.coma,b

Pros: The constructor pattern in mixed mode is used to define instance properties, whereas the prototype pattern is used to define methods and shared properties. Each instance will have its own instance attribute, but at the same time sharing the method, the maximum memory savings. In addition, this mode also supports passing the initial parameters. There are many advantages, and in ECMAScript is the most widely used and most recognized method of creating custom objects.

Dynamic Prototyping Mode

1 functionBlog (name, URL) {2    This. Name =name;3    This. url =URL;4 5   if(typeof  This. alertinfo! = ' function ') {6     //This code only executes once.7Alert (' exe time ');8Blog.prototype.alertInfo =function() {9Alert (Thia.name + This. URL);Ten     } One   } A } -  - varBlog =NewBlog (' Wuyuchang ', ' http://tools.jb51.net '), theBLOG2 =NewBlog (' Wyc ', ' http:***.com ');

The dynamic prototype pattern encapsulates all information in the constructor, while initializing the prototype through the constructor (initializing the prototype only when the first object is instantiated), which can be chosen by determining whether the method is valid and whether the prototype needs to be initialized. You can see that the above example only pops up one window, ' exe time ', that is, when the blog is initialized, this blog2 does not need to initialize the prototype. This pattern creates an object that can be considered an optimization of the prototype pattern.

The article learns from Http://www.jb51.net/article/53823.htm. There are deletions.

The final reference is from the book "Advanced Programming in JavaScript ".

Several implementation methods of JavaScript object-oriented