JavaScript implements the private, protected, public, static, and inheritance of classes

Classes in JavaScript

JavaScript is actually a weakly typed language, unlike languages such as C + + and Java. So, in JavaScript, there is no concept of class, but in practice, classes are important, such as writing a game, what would it be like if we kept calling functions to create characters and move characters? There may be a lot of duplicate code, so we need a class to unify the code. The so-called class, that is, the code in the program classification, such as the game about the role of the code as a class, game background counts as a class, game special effects are a kind. In this way, we operate on the class, it will not make the code seems very messy, jumbled. Although JS is a weakly typed language, it also provides the probability of a class.
Define the class in JS, in fact, it is function always known that this syntax is actually used to define the function. Instead of defining a function, we can function this.xxx define properties and methods in the same way as in. For example:

function people () {    this. Name = "Yorhom";        This function () {        returnthis. Name    };}

Use when using new :

var New people (); // "Yorhom"alert (Yorhom.getname ());

As you can see, this allows you to use the methods in the classes and classes that we define.
Perhaps you would ask this.xxx to define only public properties and methods, what about private properties and methods? This can use the knowledge of JS closures to solve:

functionpeople () { This. Name = "Yorhom"; varAge = 16;  This. GetName =function () {        return  This. Name};  This. Getage =function () {        returnAge ; };} varYorhom =Newpeople ();//undefinedalert (yorhom.age);// -Alert (Yorhom.getage ());

As you can see, age here is a private attribute.

The prototype in JavaScript

The drawback of the above code is that if a class has a lot of methods, at the same time to use this class where there are many (that is new , there are a lot of objects), then use the above code will appear the problem of memory consumption. The root cause of the problem is that each time an object is instantiated, the class executes the code in the constructor (the people class, for example, is function people () {...} Executed code), so that each time the class is instantiated, the methods and properties are copied to the instantiated object. In this way, it will cause "eat" memory phenomenon.
So JS in the prototype birth. prototypeusually adds a series of constants or methods to a class. Each time a class is instantiated, the instantiated object automatically gets the prototype methods and properties defined in the class. But here the fetch is similar to a reference in C + +, which does not replicate these methods and properties in memory, but instead points to these methods and properties. Example:

function people () {    this. Name = "yorhom"function  () {    return  This  varnew  people (); // "Yorhom"alert (Yorhom.getname ());

This method saves memory, but, in the ointment, you cannot define a private property.

Inheritance of Classes

JavaScript does not provide an inherited function, so it is only written by itself. Here you can use the inheritance method in Lufylegend.js to show you how to implement inheritance:

function Base (d, B, a) {    varnull, o = d.constructor.prototype, H = {};       for inch o) {        = 1;    }      for inch b.prototype) {        if (!  H[p]) {            = b.prototype[p];        }    }     B.apply (d, a);}

The base here is the inheritance function. The principle of inheriting functions is to replicate the methods and properties of the class. Therefore, if you do this, you can implement the inheritance of the class. You can see in the code above that we traverse prototype to get the methods and properties defined in the prototype chain. applyreplication of properties and methods in the constructor is made by calling the constructor of the parent class. Examples of Use:

function people () {    this. Name = "yorhom"function  () {    return  This  function  Student () {    Base (thisvarNew  Student (); // "Yorhom"alert (Yorhom.getname ());

Definition of static properties and methods

Static properties and methods, and the definition of static classes in JS are very simple, first look at static classes:

var Staticclass = {};

Isn't that the definition of the one you're writing Object ? Yes, good, but the static class in JS can also be defined as such. If you want to add methods and properties from a static class, you can write:

var Staticclass = {    5,    function  () {        alert ("Hello");    }};

If you are adding a static property or method to a class, you can use this notation:

function people () {    this. Name = "yorhom"function  () {    return  This  = "People"function  () {    alert ("Hello");};

Implement a feature-rich class

As we mentioned above, saving memory and defining private properties can not be combined, yes, and "can not have both fish and bear cake" is a reason, in the normal use of the process, we need to choose between the two. But in this time of year, which have not to have both? You can't eat your cake at the same time? Of course not ... Because it is illegal to eat the bear's paw (need to be verified)? But at least chicken and fish can be eaten at the same time.
Because JS does not implement the definition of a private property, so this is actually a no clue work, because in the standard practice, in addition to the closure can block external access, there is no other way. So here we are going to use a little astray method.

JavaScript Set/get Accessors

What is a set/get accessor? If you are familiar with Python, then you can understand @property and @xxx.setter , but the simple JS also have? There is, of course, only the standard of ES5, which can be used in this notation:

Object.defineproperty (This, "name", {    get:funtion () {        return  name;    },      function (v) {        = v;    }});

What's the use of it? It is roughly the this.name property that invokes the accessor when it is fetched get , and is called when the value is changed set .
You can learn the general wording from the above code, but if you want to delve into it, you can refer to this article: http://blog.csdn.net/teajs/article/details/22738851

Note that the above usage will have compatibility issues, browser support is as follows:

PC-Side

Firefox	Google Chrome	Internet Explorer	Opera	Safari
4.0	5	9	11.6	5.1

Mobile side

Firefox Mobile	Android	IE Mobile	Opera Mobile	Safari Mobile
4.0	Yes	9	11.5	Yes

from: https://developer.mozilla.org/.../defineProperty#Browser_compatibility

How do I "astray" to prohibit access to private and protected properties?

This is a headache, as the beginning of this section says, we can only use closures to block access to a variable under conventional development. But if you use prototype it, the closure of the road will not go through. In this case, we are on the pitch Object.defineProperty . We know that by using this function, you can set the value that is returned when you get the property, or you can set the value that is set when the property is changed. With this function, we can keep track of whether a property is being fetched or not being changed. We also need a switch that, when called by a method inside the class, opens the switch, indicating that it is running internally, and that the switch is closed after the method call has finished, indicating that it is back to the external running state. With these two states, we can track private and protected properties and methods, and once they are used when the switch is closed, terminate the acquisition or setting of this property or method.
So, the big problem will be solved soon.

Open Source Library Parts Jpp.js

With this astray thought in mind, I encapsulate this feature in Jpp.js, the GitHub address of the library is as follows:
Https://github.com/yuehaowang/jpp.js
Of course, this library is not limited to creating a class, it can also implement functions such as overloading. At present, the library is still in the development stage, you are welcome to submit suggestions.

Create a class using Jpp.js

varPeople =Jpp.class ({extends:NULL, private: {ID:NULL, Hobby:NULL}, Protected: {money:NULL, PhoneNumber:NULL}, Public: {firstName:NULL, LastName:NULL, Age:NULL, Birthday:NULL, Occupation:NULL, constructor:function(name, id) {if(name) {varNameArray = Name.split ("");  This. FirstName = namearray[0];  This. LastName = namearray[1]; }             if(ID) { This. ID =ID; }}, Setbirthday:function(date) {if(date) { This. Birthday =date; }}, Getbirthday:function () {            return  This. Birthday; }, Askforid:function () {            return  This. ID; }, Findhobby:function () {            return  This. Hobby; }}, Static: {occupation_programmer:"Programmer", Occupation_artist:"Artist", Occupation_musician:"Musician", Occupation_student:"Student"    }}); varPeter =NewPeople ("Peter Wong", 543232123565);p eter.occupation=People.occupation_programmer; Peter.setbirthday ("19980727"); //Result:peteralert (peter.firstname);//result:19990727alert (Peter.getbirthday ());//result:51092028alert (Peter.askforid ());//Result:nullalert (Peter.findhobby ());//Result:programmeralert (peter.occupation);//Erroralert (peter.id);

The above code is analyzed:
Using a jpp.class function to create a class, the parameter of the function is an object, the object can be added with the following properties:

• extends the parent class when inheriting
• private property, which is not available outside the defined members and cannot be inherited to subclasses
• protected Load protection attribute, inside defined members outside of the member is not available but can inherit to subclass
• public to load common properties
• static loading methods and properties

In the process of creating a class, public constructor this.super You can access the parent class constructor by adding a method initialization constructor in.

Run the code, you can see the browser to run alert the top 5, and the last time the browser ran error:

The implementation process is a bit complicated, but the principle is described in detail above. The code can be see on GitHub, and you're welcome to study.

JavaScript implements the private, protected, public, static, and inheritance of classes