Basic object-oriented JS explanation, factory mode, constructor mode, prototype mode, hybrid mode, dynamic prototype mode

Basic object-oriented JS explanation, factory mode, constructor mode, prototype mode, hybrid mode, dynamic prototype mode
What Is Object-Oriented? Object-oriented is an idea! (Nonsense ). Object-oriented can regard all key modules in the program as objects, and the module has attributes and methods. In this way, if we encapsulate some attributes and methods, it will be very convenient to use in the future and avoid tedious and repetitive work. Next we will explain how to implement object-oriented in JS. Factory mode factory mode is a well-known design mode in the software engineering field. Because classes cannot be created in ECMAScript, function encapsulation is used to create objects with specific interfaces. The implementation method is very simple, that is, to create an object in the function, assign attributes and methods to the object, and then return the object. Copy the code function createBlog (name, url) {var o = new Object (); o. name = name; o. url = url; o. sayUrl = function () {alert (this. url);} return o;} var blog1 = createBlog ('wuyuchang', 'HTTP: // www.cnblogs.com/wuyuchang/'); copy the code and you can see that the implementation method of the factory mode is very simple, it solves the problem of creating multiple similar objects, but the factory mode cannot identify the Object type, because all objects are objects, unlike Date, Array, and so on, so the constructor mode appears. In the constructor mode, constructors in ECMAScript can create specific types of objects, similar to native JS objects such as Array and Date. The implementation method is as follows: copy the code function Blog (name, url) {this. name = name; this. url = url; this. alertUrl = function () {alert (this. url) ;}} var blog = new Blog ('wuyuchang', 'HTTP: // www.cnblogs.com/wuyuchang/'); console. log (blog instanceof Blog); // true, judge whether the blog is a Blog instance, that is, it solves the problem that the Code cannot be copied in factory mode. This example is different from the function name in factory mode, careful children's shoes should find many differences: the first letter of the function name is capitalized (although the standard does not strictly stipulate that the first letter is capitalized, according to the Convention, the first letter of the constructor is used to create an object that is not displayed in uppercase. The attributes and methods are assigned to this object directly. No return statement is used to create an object using new. Although the constructor can recognize objects (where the constructor mode is better than the factory mode), it is not a disadvantage, the biggest problem with using constructor is that the method needs to be re-created every time an instance is created (theoretically, the object attributes are different each time an object is created, the object methods are the same). However, it is unnecessary to create two identical methods. Therefore, we can move the functions out of the object (maybe some children's shoes have seen the disadvantages, hey !). Copy the code function Blog (name, url) {this. name = name; this. url = url; this. alertUrl = alertUrl;} function alertUrl () {alert (this. url);} var blog = new Blog ('wuyuchang', 'HTTP: // www.cnblogs.com/wuyuchang/'), blog2 = new Blog ('cnblogs', 'HTTP: // www.cnblogs.com/'); blog. alertUrl (); // http://www.cnblogs.com/wuyuchang/blog2.alertUrl (); // http://www.cnblogs.com/copy code we set alertUrl to a global function so that the blog and blog2 access is the same But the problem arises again. In the global scope, a function that actually only needs to be used by the Blog is defined. It shows that the global scope is somewhat more effective, what is even more unacceptable is that many methods are defined in the global scope for specific objects only, which is a waste of space. Obviously, the object-oriented encapsulation is lost, therefore, this problem can be solved through prototype. In prototype mode, each function we create has the prototype attribute, which is a pointer pointing to an object, the purpose of this object is to include attributes and methods that can be shared by all instances of a specific type. The advantage of using a prototype object is that all object instances can share its attributes and methods. Copy the code function Blog () {} Blog. prototype. name = 'wuyuchang'; Blog. prototype. url = 'HTTP: // www.cnblogs.com/wuyuchang/'your blog.prototype.friend = ['fr1', 'fr2', 'fr3', 'fr4']; Blog. prototype. alertInfo = function () {alert (this. name + this. url + this. friend);} // The following is the test code var blog = new Blog (), blog2 = new Blog (); blog. alertInfo (); // wuyuchanghttp: // www.cnblogs.com/wuyuchang/fr1,fr2,fr3,fr4blog2.alertInfo (); // Wuyuchanghttp: // www.cnblogs.com/wuyuchang/fr1,fr2,fr3,fr4 blog. name = 'wyc1'; blog. url = 'HTTP ://***. com '; blog. friend. pop (); blog2.name = 'wyc2'; blog2.url = 'HTTP: // ++. com '; blog. alertInfo (); // wyc1http ://***. comfr1, fr2, fr3blog2. alertInfo (); // wyc2http: // ++. comfr1, fr2, and fr3 do not have any disadvantages when copying the code prototype. First, they omit the process of passing initialization parameters by constructors, as a result, all instances obtain the same attribute value by default, which is inconvenient, but this is not the biggest problem of the prototype. The biggest problem of the prototype mode is the shared nature, because of sharing, an instance is modified And the other changes the reference. Therefore, we usually do not use the prototype separately, but combine the prototype mode with the constructor mode. In the hybrid mode (prototype mode + constructor mode), copy the code function Blog (name, url, friend) {this. name = name; this. url = url; this. friend = friend;} Blog. prototype. alertInfo = function () {alert (this. name + this. url + this. friend);} var blog = new Blog ('wuyuchang', 'HTTP: // www.cnblogs.com/wuyuchang/', ['fr1', 'fr2', 'fr3']), blog2 = new Blog ('wyc', 'HTTP ://**. com ', ['A',' B ']); blog. friend. pop (); blog. alertInfo (); // wuyuchanghttp: // Www.cnblogs.com/wuyuchang/fr1,fr2blog2.alertInfo (); // wychttp ://**. in coma and B, the constructor mode is used to define instance attributes, while the prototype mode is used to define methods and shared attributes. Each instance has its own instance attribute, but it also shares the method to maximize memory savings. In addition, this mode also supports passing initial parameters. There are many advantages. In ECMAScript, this mode is the most widely used method for creating custom objects with the highest degree of consistency. Dynamic Prototype mode: the dynamic prototype mode encapsulates all information in the constructor, and initializes the prototype through the constructor (only the prototype is initialized when the first object is instantiated ), you can determine whether the method is valid and choose whether to initialize the prototype. Copy the code function Blog (name, url) {this. name = name; this. url = url; if (typeof this. alertInfo! = 'Function') {// This Code only executes alert ('exe Time') once; Blog. prototype. alertInfo = function () {alert (thia. name + this. url) ;}} var blog = new Blog ('wuyuchang', 'HTTP: // www.cnblogs.com/wuyuchang'), blog2 = new Blog ('wyc', 'HTTP :***. com '); copy the code and you can see that only one window pops up in the above example, 'exe time', that is, when the blog is initialized, blog2 does not need to initialize the prototype, to create an object in this mode, it can be called perfect.