JavaScript learning Summary (12)-JavaScript writing class

JavaScript is often used in my work. Today I will summarize several writing methods of JavaScript writing classes and their advantages and disadvantages. There are many methods of writing JavaScript classes on the Internet, in addition, each person's writing method is not the same. It is often seen in the following ways. 1. Use constructor to simulate a "class", and use the this keyword to represent an instance object. Basic Syntax: function class name () {this. property name; // name of the Public Property var attribute; // Private Attribute/* all public attributes and public methods of the defined class must use this * // define the public function of the class this. function name = function (){.....} // define the private function name of the class (){......}} example: Copy code 1/* to define a Person class */2 function Person (_ name, _ age, _ salary) {3 // public attribute of the Person class, the public attributes of the class are defined as follows: "this. attribute name "4 this. name = _ name; 5 // Private Attribute of the Person class. The private attribute of the class is defined as follows: "var attribute name" 6 var age = _ age; // Private property 7 var salary = _ salary; // Private Property 8 9/* defines the public access method for private property Age */1 0 this. setAge = function (intAge) {11 age = intAge; 12} 13/* defines the public access method for the private attribute Age */14 this. getAge = function () {15 return age; 16} 17 18 // defines the public method (privileged method) of the Person class. The public method of the class is defined as "this. functionName = function (){.....} "19 this. show = function () {20 document. writeln ("the private attributes of the category class in the public method are allowed, age =" + age + "\ t" + "salary =" + salary ); // In the public method, the private attribute of the category class is allowed 21} 22 // public Method 23 this. publicMethod = function () {24 document. writeln ("access in public methods The private method of the Question class is allowed "); 25 privateFn (); // call the private method of the Class 26 privateFn2 () in the public method (); // call the private method of the class 27} 28/* 29 in the public method to define the private method (internal method) of the Person class. The private method of the 30 classes is defined as follows: "function functionName (){.....} ", 31 or var functionName = function (){....} 32 */33 function privateFn () {34 document. writeln ("I am a private function of the Person class privateFn"); 35} 36 37 var privateFn2 = function () {38 document. writeln ("I am a private function of the Person class privateFn2"); 39} 40} copy the code to test the Person class copy code 1 var p1 = ne W Person ("lone wolf", 24 ,2300); 2 var p2 = new Person ("White Tiger Emperor", 24 ,2300); 3 document. write ("<pre>"); 4 document. writeln ("p1 instanceof Person:" + (p1 instanceof Person); // p1 is an instance of the Person class and the result is true 5 document. writeln ("p2 instanceof Person:" + (p2 instanceof Person); // p2 is an instance of the Person class, the result is true 6 // when the content on both sides is an object or a function attribute of the object, compare whether the memory address is equal 7 document. writeln ("When = the content on both sides is an object or a function attribute of the object, compare whether the memory address is equal"); 8 document. writeln ("ratio Is the memory address of the show method of the objects p1 and p2 the same? p1.show = p2.show: "+ (p1.show = p2.show); // false 9 document. the result of writeln ("p1.show = p2.show:" + (p1.show = p2.show) + "proves that the p1 object and p2 object do not share a show method, there are two copies of the show method code in the memory, which are stored in two memory areas "); 10 document. writeln ("name is the public attribute defined by the Person class. You can use the object of the class to directly implement the public attribute of the class"); 11 document. writeln ("p1.name =" + p1.name); // access the public attribute, which is a normal 12 document. writeln ("age and salary are private attributes defined by the Person class. You cannot use class objects to directly encrypt class private attributes. There are attributes, which cannot be accessed, and the results are all undefined "); 13 document. writeln ("p1.age =" + p1.age + "," + "p1.salary =" + p1.salary) // The class object cannot be used to directly encrypt the class private attribute, Which is inaccessible, the results are all undefined14 p1.show (); // call the public function of the class. This time, 15 p1.publicMethod (); // call the public function of the class. This time, 16 p1.setAge (24) is allowed ); // use the public method setAge to assign a value of 17 document to the private property age. writeln ("use the public method getAge to obtain the value of the private property age, p1.getAge () =" + p1.getAge ()); // use the getAge method to obtain the value of the private property age 18 // document. writeln ("p1.privateFn ():" + p1.privateFn () + "& Nbsp; p1.privateFn2 ():" + p1.privateFn2 (); // you cannot use class objects to call private methods of the class, the error "the object does not support this attribute or the method 19 document. write ("</pre>"); copy the code test result. The advantage of this method is that different object instances can be constructed based on parameters, the attributes of each object are generally different. The disadvantage is that the methods cannot be shared when constructing each instance object. The methods defined in the Person class have one copy of the p1 object and one copy of the p2 object, in the memory, we have to open up two Memory Spaces to separately store the p1 method and the p2 method, which leads to a waste of memory. For different instance objects of a class, the attributes of these objects are generally different, but the methods are the same, so the memory saving method is to store the methods in a memory area, then, each instance object is retrieved from the memory. 2. The prototype method must be noted that you cannot add private attributes and private methods to the class by writing JavaScript classes in the prototype method. The attributes and methods added in the prototype method are both public. Statement 1: Copy code 1/* to define a Person class */2 function Person (_ name, _ age, _ weight, _ height) {3 this. init (_ name, _ age, _ weight, _ height); 4} 5 6/* use a prototype to define the public attributes of the Person class: name, age, weight, height, all attributes added using the prototype are public */7 Person. prototype. name; 8 Person. prototype. age; 9 Person. prototype. weight; 10 Person. prototype. height; 11/* use the prototype to add the public method to the Person class, the method for adding a prototype is public */12/*. Add the init Method */13 Person to the Person class using the prototype. proto Type. init = function (_ name, _ age, _ weight, _ height) {14 if (_ name! = Undefined & _ age! = Undefined & _ weight! = Undefined & _ height! = Undefined) {15 this. name = _ name; 16 this. age = _ age; 17 this. weight = _ weight; 18 this. height = _ height; 19 document. writeln ("this. name = "+ this. name + ", this. age = "+ this. age + ", this. weight = "+ this. weight + ", this. height = "+ this. height); 20} 21 22} 23/* Add the show Method */24 Person to the Person class using the prototype. prototype. show = function () {25 document. writeln ("show method"); 26} copy code test Person class copy code 1 document. write ("<pre>"); 2 var p1 = new Pe Rson ("lone wolf", 24,115,160); 3 var p2 = new Person ("White Tiger Emperor", 25,120,170); 4 var p3 = new Person (); 5 p3.init ("", 26,130,180); // call the public method init to initialize the p3 object 6 document. writeln ("p1 instanceof Person:" + (p1 instanceof Person); // p1 is an instance of the Person class and the result is true 7 document. writeln ("p2 instanceof Person:" + (p2 instanceof Person); // p2 is an instance of the Person class and the result is true 8 document. writeln ("p3 instanceof Person:" + (p3 instanceof Per Son); // p3 is an instance of the Person class and the result is true 9 // when the content on both sides is an object or the function attribute of the object, compare whether the memory address is equal to 10 documents. writeln ("When = the content on both sides is an object or a function attribute of the object, compare whether the memory address is equal"); 11 document. writeln ("compare whether the memory addresses of the show methods of p1 and p2 are the same: p1.show = p2.show:" + (p1.show = p2.show )); // true12 document. the result of writeln ("p1.show = p2.show:" + (p1.show = p2.show) + "proves that the p1 object and the p2 object share a show method, in the memory, only one copy of the show method code is available, which is stored in one area of the memory "); // true13 document. writeln ("p1.name =" + p1.name + ", p 1. age = "+ p1.age +", p1.weight = "+ p1.weight +", p1.height = "+ p1.height); // access public attributes, which are 14 documents that can be accessed normally. writeln ("p2.name =" + p2.name + ", p2.age =" + p2.age + ", p2.weight =" + p2.weight + ", p2.height =" + p2.height); // access public attributes, this is the 15 p3.name = "" that can be accessed normally; // The Public attribute is assigned a new value of 16 document. writeln ("p3.name =" + p3.name); // access the public attribute, which is normally accessible. 17 p1.show (); // call the public function of the class, which is 18 documents allowed this time. write ("</pre>"); copy the code Test Result: write 2: Use the prototype to define the public attribute for the class and make the public method more elegant, I personally recommend this method. This method looks comfortable copying code 1/* Definition class Person2 */2 function Person2 () {3 4} 5 6/* use a prototype to define the public attribute for the class and a more elegant way to write the public Method */7 Person2.prototype = {8 name :"", // public attribute 9 age: 0, // public attribute 10 weight: 0, // public attribute 11 height: 0, // public attribute 12/* public Method */13 init: function (_ name, _ age, _ weight, _ height) {14 this. name = _ name; 15 this. age = _ age; 16 this. weight = _ weight; 17 this. height = _ height; 18 document. writeln ("this. name = "+ This. name + ", this. age = "+ this. age + ", this. weight = "+ this. weight + ", this. height = "+ this. height); 19}, 20/* public Method */21 show: function () {22 document. writeln ("show method"); 23} 24}; copy code test code: Copy code 1 document. write ("<pre>"); 2 var p2_1 = new Person2 (); 3 var p2_2 = new Person2 (); 4 p2_1.init ("lone wolf", 24,115,160 ); 5 p2_2.init ("Emperor Bai Hu", 25,120,170); 6 document. writeln ("p2_1.name =" + p2_1.name + ", p2_1.age =" + p2_1.age + ", P2_1.weight =" + p2_1.weight + ", p2_1.height =" + p2_1.height); // access the public attribute, which is a 7 document that can be accessed normally. writeln ("p2_2.name =" + p2_2.name + ", p2_2.age =" + p2_2.age + ", p2_2.weight =" + p2_2.weight + ", p2_2.height =" + p2_2.height); // access public attributes, this is the 8 document that can be accessed normally. writeln ("p2_1 instanceof Person2:" + (p2_1 instanceof Person2); // p2_1 is an instance of the Person2 class and the result is true 9 document. writeln ("p2_2 instanceof Person2 Result:" + (p2_2 instanceof Person2 ));// P2_2 is an instance of the Person2 class. The result is true10 // when = the content on both sides is an object or a function attribute of the object, it compares whether the memory address is equal to 11 documents. writeln ("When = the content on both sides is an object or a function attribute of the object, compare whether the memory address is equal"); 12 document. writeln ("compare whether the memory addresses of the init methods of p2_1 and p2_2 are the same: p2_1.init = p2_2.init:" + (p2_1.init = p2_2.init )); // true13 p2_1.name = ""; // The Public attribute is assigned to 14 documents. writeln ("p2_1.name =" + p2_1.name); // access the public attribute. This is the 15 p2_1.show () that can be normally accessed. // call the public function of the class. This time, 16 documents are allowed. write ("</pre>"); copy the code Test Result: Prototype Advantages of the method: All object instances share the methods defined in the class, so there is no memory waste. Disadvantages: first, the private attributes and private methods of the class cannot be defined. Second, an additional method for initializing the object is required when an object is created and its attributes are initialized. 3. constructor + prototype constructor methods and prototype methods have their respective advantages and disadvantages. Therefore, you can combine these two methods, you can use constructors to define the attributes (public and private) of a class, and use a prototype to define the methods (public) of a class ). Lack of complementarity, there is a third way of writing. Copy code 1/* to define a Person class */2 function Person (_ name, _ age, _ salary) {3 // define the public and private attributes of the class within the Person class and the public attributes of the private Method 4 // Person class. The public attributes of the class are defined as: "this. attribute name "5 this. name = _ name; 6 // Private Attribute of the Person class. The private attribute of the class is defined as follows: "var attribute name" 7 var age = _ age; // Private Attribute, you can only use 8 var salary = _ salary in the class; // Private Attribute. You can only use 9/* 10 within the class to define the private method (internal method) of the Person class ), only private methods of class 11 can be used within the class. The defined method is: "function functionName (){.....} ", 12 or var functionName = function (){... .} 13 */14 function privateFn () {15 document. write ("<pre>"); 16 document. writeln ("I am the private property age of the Person class and can only be used within the Person class. After initialization, age =" + age); 17 document. writeln ("I am a private function of the Person class privateFn, which can only be used within the Person class"); 18 document. write ("</pre>"); 19} 20 21 var privateFn2 = function () {22 document. write ("<pre>"); 23 document. writeln ("I am a private property salary of the Person class and can only be used within the Person class. After initialization, salary =" + salary); 24 document. writeln ("I am a private function of the Person class, private Fn2, which can only be used inside the Person class "); 25 document. write ("</pre>"); 26} 27 28 privateFn (); // call the private method 29 privateFn2 () in the Person class (); // call the private Method 30} 31 32 inside the Person class // the method defined in prototype (public method) is unable to define the private attributes of the class and 33 of the private method // use prototype to define the public method of the Person Class 34 Person. prototype = {35 setName: function (_ name) {36 this. name = _ name; 37 // privateFn (); // The Private method privateFn () defined by the Person class cannot be called. An error is returned: the object 38} is missing, and 39 getName: function () {40 return this. name; 41}, 4 2 show: function () {43 document. writeln ("public method show"); 44}, 45 // public method 46 publicMethod: function () {47 document. writeln ("public method publicMethod"); 48} 49}; copy code test code: Copy code 1 var p1 = new Person ("lone wolf", 24,2300 ); 2 var p2 = new Person ("White Tiger Emperor",); 3 document. write ("<pre>"); 4 document. writeln ("p1 instanceof Person:" + (p1 instanceof Person); // p1 is an instance of the Person class and the result is true 5 document. the result of writeln ("p2 instanceof Person is: "+ (P2 instanceof Person); // p2 is an instance of the Person class, and the result is true 6 // when = the content on both sides is an object or a function attribute of the object, compare whether the memory address is equal to 7 documents. writeln ("When = the content on both sides is an object or a function attribute of the object, compare whether the memory address is equal"); 8 document. writeln ("compare whether the memory addresses of the show methods of p1 and p2 are the same: p1.show = p2.show:" + (p1.show = p2.show )); // true 9 document. the result of writeln ("p1.show = p2.show:" + (p1.show = p2.show) + "proves that the p1 object and the p2 object share a show method, in the memory, there is one copy of the show method code, which is stored in one memory area "); 10 document. writeln ("name is Perso Class n defines the public attribute. You can use the object of the class to directly define the public attribute of the class "); 11 document. writeln ("p1.name =" + p1.name); // access the public attribute, which is a normal 12 document. writeln ("age and salary are private attributes defined by the Person class. class objects cannot be used to directly define private attributes of the class. This is inaccessible and the result is undefined"); 13 document. writeln ("p1.age =" + p1.age + "," + "p1.salary =" + p1.salary) // The class object cannot be used to directly encrypt the class private attribute, Which is inaccessible, the results are all undefined14 p1.show (); // call the public function of the class. This time, 15 p1.publicMethod (); // call the public function of the class, this time, the allowed 16 p1.setName (""); // call the public function of the class The name attribute is assigned to 17 documents again. writeln ("p1.getName =" + p1.getName (); 18 // document. writeln ("p1.privateFn ():" + p1.privateFn () + "& nbsp; p1.privateFn2 ():" + p1.privateFn2 ()); // The class object cannot be used to call the private method of the class. An error is reported here. "The object does not support this attribute or the method 19 document. write ("</pre>"); copy the code running result: the third method achieves an ideal writing by combining the first two methods, you can create an object instance by passing parameters. The object instances share the same method without wasting memory. The third method is the most used in development. I also use this method to write JavaScript classes.