Oop-->>> inheritance/Closure in JavaScript Object-oriented

Source: Internet
Author: User
Tags closure

Objective

Oop

Oop-->>> inheritance/Closure in JavaScript Object-oriented

1.1 Object-oriented concepts   
Using one subclass to inherit another parent class, subclasses can automatically own the properties and methods of the parent class.
>>> inherits the two parties, which occur between two classes.

1.2 JS simulation Three ways to achieve inheritance: First, to understand CALL/APPLY/BINB: Call the method through the function name, forcing the this in the function to point to an object;
Call notation: Func.call (the This pointer of func, parameter 1, parameter 2 ...);
Apply notation: Func.apply (Func's this point of the obj,[parameter 1, parameter 2 ...]);
BINB notation: func.binb (the This pointer of the Func) (parameter 1, parameter 2 ...);

The only difference between call and apply is that the parameters of the receive Func function are different. Call takes a direct way of writing multiple parameters, while apply takes an array to encapsulate all parameters.

① Extended Object Implementation inheritance
1: Define Parent class
function Parent () {}
2: Defining subclasses
Funtion Son () {}
3: Add an extension method to object objects by prototype.
Object.prototype.customExtend = function (parobj) {
for (var i in parobj) {
Assign to yourself all the property methods of the parent class through the for-in loop.
This[i] = Parobj[i];
}
}
4: Subclass Object Call extension method
Son.customextend (Parent);

①eg:
1 //1. Define the parent class2 function Person (name,age) {3 this.name = name;4 this.age = age;5 This.say = function () {6 alert (this.name+ ":" +this.age);7             }8         }9 //2. Define subclassesTen function Student (no) { One this.no = no; A This.add = function (A, b) { - alert (a+b); -             } the         } - function Programmer (lang) { - this.lang = lang; - this.codding = function () { + alert ("I Love Knocking Code!") Knocking on the code makes me happy! "); -             } +         } A //3. Add an extension method to the object by using a prototype.  at Object.prototype.customExtend = function (parobj) { - For (var i in parobj) { - //Through the for-in loop, assign all the property methods of the parent class to yourself - This[i] = parobj[i]; -             } -         } in          - var p = new Person ("xiaoming", "+"); to var s = new Student ("0001"); + s.customextend (P);//Now, S inherits all properties and methods of P.  - Console.log (s) the          * var pro = new Programmer ("JavaScript"); $ pro.customextend (p);Panax Notoginseng console.log (PRO) -          the  +          A         

  
② use CALL/APPLY/BINB.
1: Define Parent class
Funtion Parent ("", "", "") {}
2: Defining subclasses
function Son ("", "", "") {}
3: The parent class is called through the call method/apply/binb method in the subclass.
function Son () {
Parent.call (This, "", "", "");//Parent.apply (this,["", "", ""]);//parent.binb (This) ("", "", "");
}

②eg:

1 function Person (name,age) {2 this.name = name;3 this.age = age;4 This.say = function () {5 alert ("I Call:" +this.name+ "; this year:" +this.age+ "years old");6             }7         }8         9 /** Document comments, you can see the comment content when you call the function. Ten          *  One * No: Student number A * Stuname: Student name - * Stuage: Student Age -          */ the function Student (no,stuname,stuage) { -              - this.no = no; - Person.call (this,stuname,stuage); + //Execute the above code, which is equivalent to executing the following code once. And replace this of the original person class with Stundet's this (the object when instantiating student) -              + //this.name = "Zhang San"; A //This.age = +; at //This.say = function () { - //Alert ("I Call:" +this.name+ "; this year:" +this.age+ "); - //            } -         } -          - var stu = new Student ("Zhangsan", +); in Stu.say (); -          to Console.log (Stu) +          -Person ("Zhangsan", "123");

    
③ using prototype inheritance
1: Define Parent class
function Parent ("", "", "") {}
2: Defining subclasses
function Son ("", "", "") {}
3: Declare the prototype object in the subclass object as an instance of the parent class.
Son.prototype = new Parent ("", "", "");

③eg:

1 function Person (name,age) {2 this.name = name;3 this.age = age;4 This.say = function () {5 alert ("I Call:" +this.name+ "; this year:" +this.age+ "years old");6             }7         }8         9 /** Document comments, you can see the comment content when you call the function. Ten          *  One * No: Student number A * Stuname: Student name - * Stuage: Student Age -          */ the function Student (no) { - this.no = no; -         } -          + student.prototype = new Person ("Zhang San", +) -          + var stu = new Student (n); A          at Stu.say (); -          - Console.log (Stu) -          -Person ("Zhangsan", "123");

1.3 closures in object-oriented   
1. Global variables: Variables declared outside the function
Local variables: variables declared within a function

In JS, the function is a unique local scope, and if, for, and other {} have no scope of their own

Therefore, the local variable cannot be accessed outside the function. In fact, after the function is executed, the memory is freed.

2. How do I access function private variables?
JS, provides a "closure" concept: Inside the function, define a child function, you can use child functions to access the parent function of the private variables. After the operation is done, the child function is returned by return.

function Func2 () {
var num = 1;
function func3 () {
var sum = num+10;
alert (sum);
}
return func3;
}

var f = func2 ();
f ();

3, the role of closures:
① the private variable of the access function;
② allows a function's variable to always exist in memory without being freed.

Oop-->>> inheritance/Closure in JavaScript Object-oriented

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.