Javascript oop in-depth learning notes (iii) Implementation of classes in--javascript

Realization mechanism of Class I.

You can use the function keyword in JavaScript to define a class. A variable referenced by the this pointer within a function or method becomes a member of the class.

 functionClassdemo () {
       var $testProperty = "xz1024";
This. Property = $testProperty;  
        This. method =function(){            return"This is a test method"; }        }var$obj =NewClassdemo ();d ocument.write ($obj. Property+ "<br/>");d Ocument.write ($obj. Method ());

　　In JavaScript, the function itself is defined as a tired constructor to see the process of creating an object using new

1. Creates an empty object when the interpreter encounters the new operator.

2. Start running the Classdemo function and point the this pointer to the new object.

3, because when assigning a value to an attribute that does not exist for an object, the interpreter creates the property for the object.

4. When the function finishes executing, the new operator returns the initialized object.

Through the entire process, JavaScript implements a simple object-oriented mechanism. Thus, in javacript, the definition of function is actually the constructor that implements an object, which is done by function. Of course, the drawbacks of this approach are also obvious:

1, speaking of all initialization statements, member definitions are put together, code logic does not attack, difficult to implement complex functions.

2. Each time an instance of a class is created, the constructor is executed once, and the properties and methods defined in the constructor are always created repeatedly.

Another way to define a mechanism, prototype objects, is to solve the drawbacks of defining class members in constructors.

Second, define class members using the prototype object

　　When new is a function, the object's members are automatically assigned to the created object.

<script>//defines a class that has only one property Testprop        functionTestClass () { This. Testprop = 1; }        //Use the prototype property of a function to define a new member for a classTestClass.prototype.showProp =function() {document.write ( This. Testprop); }        //Create an instance        var$obj =NewTestClass (); //invoke the Showprop method defined by the prototype prototype object$obj. Showprop ();</script>

　　Prototype is a JavaScript object that you can add, modify, and Delete methods and properties for a prototype object to add a member definition to a class.

　　It should be noted that the definition of the prototype object must precede the statement that created the class instance, otherwise it will not work.

　　Prototype Object-specific user-designed class member, which is closely related to a class. Prototype also has an important property: constructor, which represents a reference to the constructor.

<script>         function  TestClass () {             alert (' xz1024.com ');         }         // calling the constructor of a class         testClass.prototype.constructor (); </script>

　　

Third, optimize the design pattern of JavaScript class

Implements a member definition of a class by using the constructor of an untyped object to specify the prototype object:

<script>functionPerson () {Console.log (' There are some initialization work here. '); /*this.personname = "XZ"; This.personage =;*/} person.prototype={personname:"Tiger", personage:18, Showinfo:function() {document.write ( This. PersonName + "," + This. personage);        }        }; var$p =NewPerson (); $p. Showinfo ();</script>

　　

Iv. Common members, private members, and static members in JS

Private members can share members in the internal implementation of the class, not publicly. JavaScript does not have a special mechanism to define private members, but in JS, a variable defined inside a function steven a local variable that cannot be accessed by a program outside of the function, but can be accessed by a nested function defined inside the function, and in the process of implementing a private member in JS It is taking advantage of this nature.

In the constructor, you can add members to the class, and the class members defined in this way actually share the local variables defined inside the re-constructor, which can be considered as private members of the class.

<script>functionTestClass () {var$prop = ' This was a private property ';//Private attribute member $prop             functionPropmethod () {//Private Method member Propmethoddocument.write ($prop); }              This. MethodOne =function(){                 //change the value of a private property in a public member$prop = ' $prop has been changed ';             };  This. Methodtwo =function() {Propmethod (); //calling private methods in a shared member             }         }        var$obj =NewTestClass ();   $obj. MethodOne (); //Call public method MethodOne$obj. Methodtwo ();//Call public method Methodtwo</script>

Javascript oop in-depth learning notes (iii) Implementation of classes in--javascript