JavaScript Object-oriented collation

Organize the JS object-oriented encapsulation and inheritance.

1. Package

JS is packaged in a number of ways to implement, here are listed in several commonly used.

1.1 Raw Pattern Generation objects

Write our members directly into the object and return with the function. Disadvantage: It is hard to see an example of a pattern coming out.

Code:

function Stu (name, score) {
return {
Name:name,
Score:score
}
}

var stu1 = Stu ("John", 80);
var stu2 = Stu ("Dick", 90);

Console.log (Stu1.name); Tom

1.2 Building the construction pattern object

JS provides us with a schema that uses constructors to generate objects, and ¨ so-called "constructors" is actually a normal function, but the this variable is used internally. When you generate an instance of a constructor with the new keyword, 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 ("John", 80);
var stu2 = new Stu ("Dick", 90);


Console.log (Stu1.name + "/" + Stu2.score); Zhang 390

Console.log (Stu1.constructor = = Stu) + "/" + (Stu2.constructor = = Stu)); True True

Console.log ((stu1 instanceof Stu) + "/" + (STU2, instanceof Stu)); True True

The Main method is generally written in success, the data obtained from the background is generally this way:

It is not difficult to see JS constructor generation Objects and C # with Class generation objects, are the template to define object members through the New keyword instantiation.

generates the same Stu object with C # code

Class Stu
{
public string name;
Public Double score;     ;               
}

 

OK, here's the basic object. So now we need a method that all objects are public, and just let this method be created once. (not created repeatedly with object new) how? We all know that in C # we can use static members. So how to do in JS?
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. Then we add members directly to prototype equivalent to declaring static members in C #.

Code:

Function Stu (name, score) {
            this.name = Name,
            this.score = score
        }

        stu.prototype.type= ' students ';
        Stu.prototype.log = function (s) {
             Console.log (s);
       }

        var stu1 = new Stu ("John");
     & nbsp;  var stu2 = new Stu ("Dick", 90);

        Console.log (Stu1.type + "/" + Stu2.type);//student Student
  & nbsp;     stu1.log (' hello '); //Hello
        Console.log (Stu1.log = = Stu2.log); //True

The package is here, let's look at how the inheritance in JS is implemented?

2. Inheritance

2.1 constructor BindingsThe call or Apply method is called directly in a child function, and the parent object's constructor is bound to 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 High School";
This.ask = function () {
Console.log ("everyone good");
}
}

var stu1 = new Stu ("John", 80);
var stu2 = new Stu ("Dick", 90);

Console.log (Stu1.code); Junior high school
Stu1.ask (); Hello everyone The Apply here does two things, putting the first argument to the grade constructor (the caller), and then executing the code in the grade. is equivalent to executing the member in the grade with this definition in Stu. 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 High School";
       }

        stu.prototype = new Grade ();

        Stu.prototype.constructor = Stu;//prevent the disorder of the inheritance chain, reset the declaration manually

         var stu1 = new Stu ("John", 80);
        var stu2 = new Stu ("Dick", 90);

        Console.log (Stu.prototype.constructor);//own constructor
         Console.log (Stu1.code); Junior High School

As mentioned earlier, prototype is equivalent to a static member in C #, so we have all members of the parent class become their own static members to implement inheritance.

There is a disadvantage with prototype inheritance: All inherited members are static, so how do you inherit the object members?

2.3 Copy Inheritance

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

Code:

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 ("John", 80);
var stu2 = new Stu ("Dick", 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)

JS Object-oriented Finishing on this, this thing is not static, the use of the time according to their own needs to make changes. There is a good saying, the right one is the best.