Javascript object-oriented encapsulation and inheritance _ javascript skills

This article is a summary of how you have learned javascript Object-oriented for such a long time. Here, we analyze the examples of encapsulation and inheritance in detail, and give them a reference for those who have the same requirements. Sort out the encapsulation and Inheritance of js object-oriented objects.

1. Encapsulation
There are many implementation methods encapsulated in js, which are listed below.

1.1 generate objects in original mode
Directly write our members to the object and return them using functions. Disadvantage: it is hard to see that it is an instance in a pattern.

Code:

The Code is as follows:

Function Stu (name, score ){
Return {
Name: name,
Score: score
}
}
Var stu1 = Stu ("James", 80 );
Var stu2 = Stu ("Li Si", 90 );
Console. log (stu1.name); // Zhang San

1.2 generate a constructor object

Js provides us with a pattern for generating objects using constructors. The so-called "Constructor" is actually a common function, but this variable is used internally. When the new keyword is used to generate an instance for the constructor, this variable is bound to the instance object.

Directly run the Code:

The Code is as follows:

Function Stu (name, score ){
This. name = name,
This. score = score
}
Var stu1 = new Stu ("James", 80 );
Var stu2 = new Stu ("Li Si", 90 );
Console. log (stu1.name + "/" + stu2.score); // Zhang San 90
Console. log (stu1.constructor = Stu) + "/" + (stu2.constructor = Stu); // true
Console. log (stu1 instanceof Stu) + "/" + (stu2 instanceof Stu); // true

It is not hard to see that the js constructor generates the same object as C # uses class to generate an object. It uses a template to define the object member and instantiate it using the new keyword.

Use C # code to generate the same Stu object

The Code is as follows:

Class Stu
{
Public string name;
Public double score;
}

OK. The basic object here is available. Now we need a common method for all objects, and we only need to create this method once. (Create again without object new) What should I do? We all know that static members can be used in C. So how can we do this in js?

1.3 Prototype mode

In js, each constructor has a prototype attribute. All attributes and methods of this object are inherited by the constructor instance. Therefore, adding a member to prototype is equivalent to declaring a static member in C.

Code:

The Code is as follows:

Function Stu (name, score ){
This. name = name,
This. score = score
}
Stu. prototype. type = 'student ';
Stu. prototype. log = function (s ){
Console. log (s );
}
Var stu1 = new Stu ("James", 80 );
Var stu2 = new Stu ("Li Si", 90 );
Console. log (stu1.type + "/" + stu2.type); // students
Stu1.log ('hello'); // hello
Console. log (stu1.log = stu2.log); // true

Here is the encapsulation. Let's take a look at how inheritance is implemented in js?

2. Inheritance

2.1 constructor binding

Call the call or apply method directly in the sub-function to bind the constructor of the parent object to the sub-object.

The Code is as follows:

Function Stu (name, score ){
Grade. apply (this, arguments );
// Grade. call (this, arguments );
This. name = name,
This. score = score
}
Function Grade (){
This. code = "Junior High School ";
This. ask = function (){
Console. log ("Hello everyone ");
}
}
Var stu1 = new Stu ("James", 80 );
Var stu2 = new Stu ("Li Si", 90 );
Console. log (stu1.code); // Junior High School
Stu1.ask (); // Hello everyone

Here, apply does two things: Give the first parameter this to the Grade Constructor (caller), and then execute the code in Grade. It is equivalent to executing the Members defined by this in Grade in Stu again.

2.2 inherit from prototype
First look at the code

Code:

The Code is as follows:

Function Stu (name, score ){
This. name = name,
This. score = score
}
Function Grade (){
This. code = "Junior High School ";
}
Stu. prototype = new Grade ();
Stu. prototype. constructor = Stu; // prevents the disorder of the inheritance chain. manually reset the declaration.
Var stu1 = new Stu ("James", 80 );
Var stu2 = new Stu ("Li Si", 90 );
Console. log (Stu. prototype. constructor); // your own constructor
Console. log (stu1.code); // Junior High School

As mentioned above, prototype is equivalent to a static member in C #. Therefore, we can transform all the members of the parent class into their own static members for inheritance.

Prototype inheritance has one drawback: all inherited members are static. How can we inherit object members?

2.3 copy inheritance

Copy all attributes and methods of the parent object to the sub-object for inheritance.

Code:

The Code is as follows:

Function Stu (name, score ){
This. name = name,
This. score = score
}
Function Grade (){}
Grade. prototype. code = "Junior High School ";
}
// Function Encapsulation
Function extend (C, P ){
Var p = P. prototype;
Var c = C. prototype;
For (var I in p ){
C [I] = p [I];
}
}
Extend (Stu, Grade );
Var stu1 = new Stu ("James", 80 );
Var stu2 = new Stu ("Li Si", 90 );
Stu1.code = 'high school ';
Console. log (stu1.code); // High School
Console. log (stu2.code); // Junior High School
Console. log (Stu. prototype. constructor );
Console. log (Grade. prototype. constructor)

The js object-oriented sorting is written here, and this is not static. You can make changes based on your own needs. There is a saying that is good, and the right is the best.

Here we only analyze encapsulation and inheritance. We will write other articles later to give our friends a better understanding of javascript object-oriented programming. Of course, this is my personal understanding. If you have any omissions, please contact me.