Javascript object-oriented Coding

Javascript object-oriented Coding

1. Create an empty object and add attributes and methods to the empty object

VaR person = {}; // an empty object is created.

Add attributes and methods to an object

Person. Name = "hello ";

Person. Say = function (){

Alert (person. Name );

}

// You can directly call person. Name or person. Say ()

II. Add attributes and methods when creating an object

Ver person = {

Name: "hello", // comma separated

Say: function () {alert (this. Name );}//Use this keyword to reference attributes and methods in this object

}

 

3. Assignment and cloning between objects

 

VaR maming = person;

ThisCodeCreates a new object, maming, and assigns the person value to maming.

This assignment process is equivalent to a shortest clone. Both the maming and person objects point to the same referenced object. Therefore, when maming. Name is changed, the person. name will also change.

 

4. Object-oriented Method of Constructor

The constructor is another method for compiling object-oriented JavaScript code,

When you need to initialize the attributes and methods of an object, or create instances with different attributes and methods, it will be your best choice.. Similarly, we start by creating an empty object:

Example of a constructor without Parameters

VaR test = function (){}

VaR T1 = new test ();
VaR t2 = new test ();
T1.name = "T1 ";
T2.name = "T2 ";
Alert (t1.name );
Alert (t2.name );

The pop-up name values are T1 and T2.

You can also register a new method.

T1.say = function (){
Alert ("T1 say ");
}
T1.say ();

 

Example of a constructor with Parameters

 // The methods in this code segment can be directly set in the constructor, or you can set prototype outside the constructor to use the end of each sentence in the constructor; semicolon or, comma is acceptable.
We recommend that you use mixed code. The field attributes should be written in the constructor Method for privacy purposes.PrototypeWritten outside the constructor method body
Function  Person (name, age ){  This . Name = Name;  This . Age =Age;
This. Say = function (){
Alert ("name is:" + this. Name + ", age is:" + this. Age );
} Person. Prototype = {Getname:  Function  () {Alert (  This  . Name) ;}, getage:  Function  () {Alert (  This  . Age );}}
Person. Prototype. constructor = person; this code can correct the constructor Pointing Error of the instantiated person class.
Call example
VaR P = new person ("hello", 20)
P. getname (); // output hello
P. getage (); // output 20
 

 

5. Simple implementation of JavaScript inheritance

Continue to refer to the above person class, define the maming class, inherit the person class

 

 
FunctionMaming (name, age ){This. Name =Name;This. Age =Age ;}Maming. Prototype= New person (); // This syntax implements maming to inherit person, which inherits the getname and getage methods in person.

Call example
VaR M = new maming ("maming", 20 );
M. getname (); // maming
M. getage (); // 20
 

What if the method of the parent class is overwritten in the subclass?

You can override the method of the parent class in the subclass and call the method of the subclass, for example, the getname method of the maming class.

 

 
FunctionMaming (name, age ){This. Name =Name;This. Age =Age;} maming. Prototype=NewPerson (); maming. Prototype. getname=Function() {Alert ("Maming:" +This. Name );}
 

In this way, when maming. getname is called, the output is "maming" + name.

6. A method in the closure mode.

This is related to jquery.

(Function ($ ){...}) (Jquery) This is the code mode for developing closures.

The biggest use of closures is privatization, protection of private methods, attributes, and so on. Prevent the method called by the plug-in itself from being called by the user. If the user calls the plug-in-dedicated method, more processing is required.

Code in the closure will be executed at the highest priority, which is higher than the ready method in jquery. The Code has been executed before the HTML Dom element is loaded.

Therefore, at this time, a DOM attribute can only be undefined. Of course, it can be called by method later. Here we will mainly use fields and attribute methods to obtain the Dom.

 

( Function  ($ ){  VaR Test = {: 100 , B: $ ( "# Aa" ). Val (), alert: Function  () {Alert (  This  . A); // 100 alert (  This  . B); // undefined }}Window. test = test; // very important, because test is a class defined in the closure$ (Function(){} The test object is not available in the method. However, the window itself is global, so the test is assigned to the window. Test attribute.
In this way, you can use the test class object elsewhere.}) (Jquery)
$ (  Function  () {Test. Alert ();}) 

 

Another improved method is to execute the ready method in the closure. The closure will be executed first, but the ready method will wait until the page is loaded. In this case, BB. B can obtain the DOM value.

(Function($) {$ (Function() {// This ready method is missingVaRBB ={:100, B: $ ("# Input_a"). Val (), alert:Function() {Alert (This. B) ;}} window. bb=Bb ;}) (jquery) $ (Function() {BB. Alert ();})