javascript object-oriented encapsulation and inheritance

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 generated object
Directly write our members into the object and return it with the function. Disadvantages: It is difficult to see an instance of a pattern.

Code:

       function Stu(name, score) {
            return {
                name: name,
                score: score
            }
        }
        var stu1 = Stu("张三", 80);
        var stu2 = Stu("李四", 90);
        console.log(stu1.name); // 张三

1.2 Generating construction pattern objects

js provides us with a pattern that uses constructors to generate objects, the so-called "constructor", In fact, it is 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 to the code:

      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); // 张三  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.

Use C# code to generate the same Stu object

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

OK, now the basic object is here. 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:

      function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        Stu.prototype.type='学生';
        Stu.prototype.log = function (s) {
            console.log(s);
        }
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        console.log(stu1.type + "/" + stu2.type); // 学生 学生
        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 constructor of the parent object to the child function. on the object.

   function Stu(name, score) {
            Grade.apply(this, arguments);
            //Grade.call(this, arguments);
            this.name = name,
            this.score = score
        }
        function Grade() {
            this.code = "初中";
            this.ask = function () {
                console.log("大家好");
            }
        }
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        console.log(stu1.code); // 初中
        stu1.ask(); // 大家好

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 Inheriting through prototype
Let’s look at the code first

Code:

   function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        function Grade() {
            this.code = "初中";
        }
        Stu.prototype = new Grade();
        Stu.prototype.constructor = Stu; //防止继承链的紊乱,手动重置声明
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        console.log(Stu.prototype.constructor); // 自己的构造函数
        console.log(stu1.code); // 初中

As mentioned before, prototype is equivalent to the static member in C#, so we put the parent class All members become their 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:

    function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        function Grade() {}
        Grade.prototype.code = "初中";
    }
        //函数封装
        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='高中';
        console.log(stu1.code); // 高中
        console.log(stu2.code); // 初中
        console.log(Stu.prototype.constructor);
        console.log(Grade.prototype.constructor)

That’s it for 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 make some other articles in the future to let our friends have a deeper understanding of JavaScript object-oriented programming. Of course, these are all personal understandings. If there are any omissions, please contact me.

For more articles related to JavaScript object-oriented encapsulation and inheritance, please pay attention to the PHP Chinese website!