JS Object-oriented

1.Object class

In JS, object is the base class for all classes, and when you use the object class to create a custom object, you do not need to define a constructor (Constructor,prototype,hasownproperty)

1 var per = new Object (), 2 per.name = ' Zhangsan '; 3 Per.age = 30;4 alert (per.name + per.age);

We want to get an object variable in our program, so long as we can store a lot of data, we can consider using the object class. The object class avoids the definition of a constructor. Another common property under the object class: hasOwnProperty

1 var per = new Object (), 2 per.name = ' Zhangsan '; 3 per.age = 30;4 if Per.hasownproperty (' email ') {5     alert (' with email '); 6 }else{7     alert (' no email '); 8}

2. Static properties

In some object-oriented languages, you can define static properties or static methods of a class using the static keyword, which can be simulated in JS.

Grammar:

Class name. property name

Class name. Property =function () {}

1 function person () {2} 3 Person.count = 0; 4 var p1 = new Person (); 5 person.count++; 6 var p2 = new Person (); 7 person.count++; 8 var p3 = new person (); 9 person.count++;10 alert (person.count);

Add static properties and Static methods:

1 function person () {2     person.count++;//static Property 3     person.getcount=function () {//static method 4         alert (' current total ' + Person.count + ' personal '); 5     } 6} 7 Person.count = 0; 8 var p1 = new Person (); 9 var p2 = new Person (), ten var p3 = new person (); Person.getcount ();

3. Closures

Concept: The so-called closure refers to an expression (usually a function) that has many variables and environments that bind those variables, so these variables are also part of the expression.

Ask a question:

1 function display () {2   var i=10;    3}4 display (); 5//Here, want to access the local variable i

In the global, the local variable I cannot be accessed because the scope is different, and the local variable i is reclaimed after the display function has finished executing. Closures feature: "Access local variables" and "Make variables occupy memory not released"

1//Example of function fn1 () {3     function fn2 () {4         alert (' Hello '); 5     }6     return fn2;//return FN2 function header address 7}8 var test=fn1 (); Test also points to the first address of the FN2 function 9 test ();

By Example 1 we know that a variable can point to the first address of a function, and a function can return the first address of another function.

1//Example 2 2 function fn1 () {3     var i = ten; 4     function fn2 () {5         alert (i); 6     } 7     return fn2;//return FN2 function first address 8} 9 var test=fn1 (); Test also points to the first address of the FN2 function, test ();

By Example 2 we know that using a Deny function contains the variable i, so that the memory of the local variable i is not recycled.

1//Example 3 2 function fn1 () {3     var i = ten; 4     function fn2 () {5         alert (i++); 6     } 7     return fn2;//return FN2 function first address 8} 9 var test=fn1 (); Test also points to the first address of the FN2 function, test ();

In Example 3, because I's memory is never recycled, the value of each call to Fn2,i is +1. The result of the run is pop-up 10, eject 11, eject 12.

Closure principle: in Example 3, there are three scopes: the global scope, the scope of the FN1, the scope of the fn2. In the global scope there is test=fn1 (), in fact, this sentence is equivalent to test=fn2. There are Var i=10 and return fn2 in the FN1 scope, and alert (i++) in the fn2-scope case. When TEST=FN1 () under global scope executes, test points to the scope of the FN2, at which time I is caught by the global scope of the FN2 scope, and according to the law of the scope chain, FN2 does not define I, so I go to the previous scope on the FN2, Found the Var i=10 under the fn1 scope. So the global test hooks up FN2 's i,fn2 I hooked up to the fn1 I, so fn1 will not be recycled after it finishes running.

4. Private properties

In object-oriented thinking, for some sensitive, not-to-expose members can be defined as private, this function can be emulated in JavaScript.

Grammar:

function Person (p_name) {

var name = P_name;

This.age

}

var: private

This: public

1 function person (p_name,p_age) {2     this.name = p_name;3     var = p_age;4}5 var p1 = new Person (' Zhangsan ', +); 6 A Lert (p1.name); 7 alert (p1.age);

In the above example, we want to use var to represent the private member property, but when the person constructor is finished, ageis recycled and cannot be used as a member property.

1 function person (p_name,p_age) {2     this.name = p_name; 3     var = p_age; 4     this.setage=function (a) {5         age = A; 6     } 7     this.getage=function () {8         return (age), 9     }10}11 var p1 = new Person (' Zhangsan ', 30); 12 P1.setage (+); alert (P1.getage ());

The This.setage and This.getage two methods use the local variable age, so age is not recycled.

If there is only a set method, the property is a write-only property.

If only the Get method is described, the property is read-only.

Use of 5.call and apply

Call and Apply functions: invokes the current function with the specified object. Call and apply function exactly the same, just slightly different in syntax.

Grammar:

Call ([Thisobj[,arg1[,arg2[,argn]])

First parameter: When the function executes, this is the point to whom

Subsequent parameters: Specify the order in which you want to

Apply ([Thisobj[,argarray]])

First parameter: When the function executes, this is the point to whom

Second parameter: array, representing the parameter collection

In JS, functions have several invocation forms:

Person (); This in person points to window

var p1=new person (); This in person refers to P1

Per.                 Person (); This in person points to per

1 function person (p_name,p_age) {2     this.name = p_name; 3     this.age = p_age; 4} 5 function speak () {6     alert (thi S.name + this.age); 7} 8 var p1 = new Person (' Zhangsan ', 30); 9//speak (); This invokes this to point to WINDOW10//p1.speak (); P1 object does not have speak property

Use call and apply to invoke

1 function person (p_name,p_age) {2     this.name = p_name; 3     this.age = p_age; 4} 5 function speak () {6     alert (thi S.name + this.age); 7} 8 var p1 = new Person (' Zhangsan ', 30); 9 Speak.call (p1); speak.apply (p1);

Call and apply do two things at execution time: 1) Calling the function inside this point to the first parameter 2)

In addition: You can also solve the problem:

P1.say=speak;

P1.say ();

There is a fundamental difference between this solution and the above solution:

The solution above is to call the Speak function directly, except that the pointer to this within the function changes.

The following workaround adds a property to the P1 object, and the P1 object's "volume" becomes larger.

To illustrate:

1 <script> 2 function fn1 () {3     this.style.color= ' Red '; 4} 5 function fn2 () {6     this.style.fontsize= ' 50px '; 7 } 8 Window.onload=function () {9     document.getElementById (' btn '). Onclick=function () {ten         var div1 = document.getElementById (' Div1 ');         Fn1.call (DIV1); fn2.apply         (DIV1);     };14};15 </script>16 <div id= ' div1 ' >hello javascript</div>17 <input type= ' button ' id= ' btn ' value= ' OK ' >

6. Three ways to implement inheritance

Concept: In some object-oriented languages, one class (subclass) can be used to inherit another class (The parent Class), and the subclass can have properties and methods of the parent class, which can be simulated in JS.

Three ways:

First: Extend the object method

1 Object.prototype. Method =function (Parent class object) {2 for     (var i in parent class object) {3         this[i] = Parent class object [I];4     } 5};

To illustrate:

1 object.prototype.ext=function (Parobject) {2     //Looping through the parent object all Properties 3 for     (var i in Parobject) {4         // Add this traversed property to the Subclass Object 5         //Its value is the property value of the parent class object 6         this[i] = parobject[i]; 7     } 8} 9 function person (p_name,p_age) {10
   this.name=p_name;11     this.age=p_age;12     this.speak=function () {         alert (this.name+this.age); 14     }15}16 function Student (p_no) {     this.no=p_no;18 this.say=function     () {         alert (this.no+ This.name_this.age),     }21}22 var stu = new Student (101), Stu.ext (New person (' Xiaoqiang '), Stu.speak (); 25 Stu.say ();

Second: Using the call and apply methods

Grammar:

Parent class constructor. Call (this,.......);

1 function person (p_name,p_age) {2     this.name=p_name; 3     this.age=p_age; 4     this.speak=function () {5         alert (this.name+this.age); 6     } 7} 8 function Student (p_no,p_name,p_age) {9     this.no=p_no;10     this.say=function () {One         alert ( this.name+this.age+this.no),     }13     person.call (this,p_name,p_age),}15 var stu = new Student (8, ' Zhagsan ', ); Stu.speak (); Stu.say ();

The third type: prototype inheritance

Grammar:

Subclass. prototype = new parent class ();

1 function person (p_name,p_age) {2     this.name=p_name; 3     this.age=p_age; 4     this.speak=function () {5         alert (this.name+this.age); 6     } 7} 8 function Student (p_no) {9     this.no=p_no;10     this.say=function () {One         alert (this.name+this.age+ this.no),     }13}14 student.prototype = new Person (' Wangwu ', +), var stu = new Student (n); stu.speak ();

JS Object-oriented