javascript object-oriented encapsulation and inheritance

javascript object-oriented encapsulation and inheritance_javascript skills

WBOY

Release： 2016-05-16 16:30:02

Original

1221 people have browsed it

Let’s sort out the encapsulation and inheritance in js object-oriented.

1. Encapsulation
There are many ways to implement encapsulation in js. Here are some commonly used ones.

1.1 Original mode generation object
Directly write our members into the object and return them with the function. Disadvantages: It is difficult to see an instance of a pattern.

Code:

Copy code The code is as follows:

function Stu(name, score) {

             return {

name: name,

score: score

            }

}

        var stu1 = Stu("张三", 80);

        var stu2 = Stu("李思", 90);

console.log(stu1.name); // Zhang San

1.2 Generating construction pattern objects

js provides us with a pattern of using constructors to generate objects. The so-called "constructor" is actually an ordinary function, but the this variable is used internally. When the new keyword is used to generate an instance of the constructor, the this variable will be bound to the instance object.

Directly enter the code:

Copy code The code is as follows:

Function Stu(name, score) {

This.name = name,

This.score = score

}

        var stu1 = new Stu("张三", 80);

        var stu2 = new Stu("李思", 90);

console.log(stu1.name "/" stu2.score); // Zhang San 90

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 object generated by the js constructor is exactly the same as the object generated by class in C#. Both use templates to define object members and instantiate them through the new keyword.

Generate the same Stu object using C# code

Copy code The code is as follows:

Class Stu

{

​public string name;

　　public double score;     

}

OK, now we have the basic objects. So now we need a method that is common to all objects, and only allows this method to be created once. (Not created repeatedly with 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. All properties and methods of this object will be inherited by the instance of the constructor. Then adding members directly to the prototype is equivalent to declaring static members in C#.

Code:

Copy 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("张三", 80);

        var stu2 = new Stu("李思", 90);

console.log(stu1.type "/" stu2.type); // Student Student

          stu1.log('hello'); // hello

console.log(stu1.log == stu2.log); // true

That’s it for encapsulation. Let’s take a look at how inheritance is implemented in js?

2. Inheritance

2.1 Constructor Binding

Directly call the call or apply method in the child function to bind the parent object’s constructor to the child object.

Copy code 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("张三", 80);

        var stu2 = new Stu("李思", 90);

console.log(stu1.code); // Junior High School

          stu1.ask(); // Hello everyone

The apply here does two things. It gives the first parameter this to the Grade constructor (caller), and then executes the code in Grade. It is equivalent to executing the members defined with this in Grade again in Stu.

2.2 Inheritance through prototype
Look at the code first

Code:

Copy 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; //Prevent inheritance chain disorder and manually reset the statement

        var stu1 = new Stu("张三", 80);

        var stu2 = new Stu("李思", 90);

console.log(Stu.prototype.constructor); // Own constructor

console.log(stu1.code); // Junior High School

As mentioned before, prototype is equivalent to a static member in C#, so we turn all members of the parent class into our own static members to achieve inheritance.

There is a disadvantage of inheritance through prototype: all inherited members are static, so how to inherit object members?

2.3 Copy inheritance

Copy all properties and methods of the parent object into the child object to achieve inheritance.

Code:

Copy 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("张三", 80);

        var stu2 = new Stu("李思", 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)

That’s it for the js object-oriented organization. This thing is not static. You can make changes according to your own needs when using it. There is a saying that is very good, the right one is the best.

Here we only analyze encapsulation and inheritance. We will do some other articles in the future to give you a deeper understanding of JavaScript object-oriented programming. Of course, these are all personal understandings. If there are any omissions, please contact me.