Let’s sort out the encapsulation and inheritance in js object-oriented.
1. Packaging
There are many implementation methods for encapsulation in js, and here are a few commonly used ones.
1.1 Original pattern generation object
Write our members directly into the object and return them with a function. Disadvantages: It is difficult to see that it is an example of a pattern.
Code:
The code copy is as follows:
function Stu(name, score) {
return {
name: name,
score: score
}
}
var stu1 = Stu("Zhang San", 80);
var stu2 = Stu("Li Si", 90);
console.log(stu1.name); // Zhang San
1.2 Generate constructed pattern objects
js helps us provide a pattern for generating objects using constructors. The so-called "constructor" is actually an ordinary function, but this variable is used internally. When the new keyword is used to generate an instance of the constructor, this variable will be bound to the instance object.
Directly upload the code:
The code copy is as follows:
function Stu(name, score) {
this.name = name,
this.score = score
}
var stu1 = new Stu("Zhang San", 80);
var stu2 = new Stu("Li Si", 90);
console.log(stu1.name + "/" + stu2.score); // Zhang San90
console.log((stu1.constructor == Stu) + "/" + (stu2.constructor == Stu)); // true true
console.log((stu1 instanceof Stu) + "/" + (stu2 instanceof Stu)); // true true
It is not difficult to see that the js constructor generates objects and C# with class generates objects. Both use templates to define object members instantiate them through new keywords.
Generate the same Stu object using C# code
The code copy is as follows:
Class Stu
{
public string name;
public double score;
}
OK, here is the basic object. So now we need a method where all objects are common, and we only have this method created once. (Do not create repeatedly with the object new) What should I do? Everyone knows that in C# we can use static members. So how to do it in js?
1.3 Prototype mode
In js, each constructor has a prototype attribute, and all properties and methods of this object will be inherited by the constructor instance. Then, adding members to prototype directly is equivalent to declaring a static member in C#.
Code:
The code copy 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("Zhang San", 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
That’s all about encapsulation. Let’s take a look at how inheritance is implemented in js?
2. Inheritance
2.1 Constructor binding
Call or apply methods directly in the child function to bind the parent object's constructor to the child object.
The code copy 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("Zhang San", 80);
var stu2 = new Stu("Li Si", 90);
console.log(stu1.code); // Junior High School
stu1.ask(); // Hello everyone
Apply does two things here, put the first parameter this to the Grade constructor (caller), and then execute the code in Grade. It is equivalent to executing the members defined in Grade with this in Stu again.
2.2 Inheritance through prototype
Look at the code first
Code:
The code copy 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; //Prevent inheritance chain disorder and manually reset the declaration
var stu1 = new Stu("Zhang San", 80);
var stu2 = new Stu("Li Si", 90);
console.log(Stu.prototype.constructor); //Own constructor
console.log(stu1.code); // Junior High School
As mentioned earlier, prototype is equivalent to static members in C#, so we turn all members of the parent class into their own static members to achieve inheritance.
There is a disadvantage of inheriting through prototype: all inherited members are static, so how to inherit object members?
2.3 Copy Inheritance
Copy all the properties and methods of the parent object into the child object to realize inheritance.
Code:
The code copy 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("Zhang San", 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)
This is what I wrote about the js object-oriented organization. This thing is not static. When using it, make changes according to your needs. There is a saying that goes very well, the right one is the best.
This is only analyzed for encapsulation and inheritance. We will do some other articles in the future to let friends have a deeper understanding of javascript object-oriented programming. Of course, it is all personal understanding. If there are any omissions, please contact me.