JavaScript Object-oriented grooming

Organize the encapsulation and inheritance in JS object-oriented.

1. Encapsulation

JS in the package has a lot of implementation, listed here are a few common.

1.1 Raw Mode Generation object

Directly writes our members to the object and returns with the function. Cons: It's hard to see a pattern coming out of an instance.

Code:

       function Stu (name, score) {            return {                name:name,                score:score            }        }        var stu1 = Stu ("Zhang San", N);        var = Stu ("John Doe", STU2);        Console.log (Stu1.name); Tom

1.2 Generating a constructed-mode object

JS helps us to provide a pattern for generating objects using constructors, ¨ so-called "constructors", which is actually a common function, but internally uses this variable. When you use the New keyword to generate an instance of the constructor, the this variable is bound to the instance object.

Directly on the code:

      function Stu (name, score) {            this.name = name,            This.score = score        }        var stu1 = new Stu ("Zhang San", N);        var stu2 = new Stu ("John Doe", N);        Console.log (Stu1.name + "/" + Stu2.score); Zhang San        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 constructor generation object of JS and C # use class to generate objects, all of which are instantiated with the template definition object members through the new keyword.

Generate the same Stu object with C # code

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

1.3 Prototype Mode

In JS, each constructor has a prototype property, and all the properties and methods of the object are inherited by the instance of the constructor.

　　So the object that comes out of the instance contains the members declared in the prototype, each of which is independent and does not affect each other.

Code:

      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", +);        var stu2 = new Stu ("John Doe", N);        Console.log (Stu1.type + "/" + Stu2.type); Student student        stu1.log (' hello ');  Hello        console.log (stu1.log = = Stu2.log);  True

Encapsulation is here, let's look at the JS in the inheritance and how to achieve it?

2. Inherit 2.1 The constructor binding calls the call or Apply method directly in the child function, binding the parent object's constructor on the child object.

   function Stu (name, score) {            grade.apply (this, arguments);            Grade.call (this, arguments);            THIS.name = name,            This.score = score        }        function Grade () {            This.code = "Junior";            This.ask = function () {                Console.log ("everyone Good");            }        }        var stu1 = new Stu ("Zhang San", +);        var stu2 = new Stu ("John Doe", N);        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 (the caller), and then execute the code in the grade. It is equivalent to executing the member in grade with this definition in Stu again.

So using call or apply inheritance has one drawback: you cannot inherit objects declared in prototype.

We can use prototype inheritance to solve this problem.

2.2 Inheritance through prototype

Look at the code first

Code:

    function Stu (name, score) {            this.name = name,            This.score = score        }        function Grade () {            This.code = "Junior ";        }        Stu.prototype = new Grade ();        Stu.prototype.constructor = Stu; To prevent the disorder of the inheritance chain, manually reset the declaration        var stu1 = new Stu ("Zhang San", "n");        var stu2 = new Stu ("John Doe", N);        Console.log (Stu.prototype.constructor); Own constructor        Console.log (Stu1.code);//Junior High School

2.3 Copy Inheritance

Copies all the properties and methods of the parent object into the child object, implementing inheritance.

Code:

    function Stu (name, score) {            this.name = name,            This.score = score        }        function Grade () {}        Grade.prototype.code = "Junior high school";    }        Function encapsulation functions        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", +);        var stu2 = new Stu ("John Doe", N);        Stu1.code= ' High school ';        Console.log (Stu1.code); High School        Console.log (Stu2.code);//Junior        Console.log (Stu.prototype.constructor);        Console.log (Grade.prototype.constructor)

JS Object-oriented collation is written here, this thing is not static, use the time according to their own needs to make changes. There is a saying that is good, the right is the best.

JavaScript Object-oriented grooming