Methods and ideas for simulating class mechanisms and private variables in JavaScript_javascript skills

When using some Javascript frameworks, you may see similar code

Copy code The code is as follows:

var MyClass = new Class({
initialize: function(param, ...) {
this.param = param;
...
},
func1: function( ...) {
　　　　...
　　　}
　});
　var myObj = new MyClass(param);
　myObj.func1(...);

This is a typical object-oriented class mechanism application, which is clearer and more natural than the native Javascript class mechanism. Moreover, on this basis, it is also more convenient to implement class inheritance. So, how is this achieved?
As we all know, in Javascript, using a function as a constructor can create an object. The above code can be simply written as:

Copy code The code is as follows:

function MyClass(param) {
this.param = param;
this.func1 = function(..) {
. ..
　　};
　}
　var myObj = new MyClass(param);
　myObj.func1();

In fact, it is quite simple and not difficult. understand. However, if you want to build a large Javascript class library, it may be confusing. It is painful to find out which are classes, which are functions, which are class methods, and which are class attributes from a bunch of code. thing.
Of course, this is not to compare their advantages and disadvantages, I am just curious about how new Class is implemented.
In the above code, using a statement like new MyClass() means that MyClass must be a function, and it also means that new Class needs to return a function object. From the literal meaning, it can be seen that the function initialize It is used as a constructor, so in the function returned by new Class, initialize must be used to initialize the object. Based on this analysis, the following code can be derived:

Copy code The code is as follows:

function Class(argu) {
　　return function() {
　　var init = argu['initialize'] || function() {}; //If there is no constructor initialize, use an empty function as the default constructor
| for(var p in argu) {
| this[p] = argu[p];
| The original this
　}
　}

The above code is not rigorous enough, but it is enough to illustrate the problem. You need to pay attention to the sentence init.apply(this, arguments). There are several references to variables here. One is this, which was originally the default in initialize. Now it has been replaced by the this of the returned anonymous function, and this anonymous function , is the constructor of a custom class created through new Class. The other one is arguments, which refers to the parameters of the anonymous function, which is the param in new MyClass(param) above.
This conversion is a bit dizzying, so is there an easier way? Please look at the code below:

Copy code The code is as follows:

function Class(argu) {
　var obj = argu['initialize'] || function() {};
for(var p in argu) {
　　obj.prototype[p] = argu[p]; //Note, What is used here is prototype
　　}
　 return obj; // In fact, it still returns a function
　}

Haha, it feels much more straightforward.
This completes the construction of a simple class mechanism. Through this mechanism, you can create class constructors, methods and properties, but these are obviously public. So, how to implement private variables and methods?
We know that private variables of Javascript classes can be completed through the closure mechanism. However, after using new Class({...}) to convert, it is obviously difficult to form an effective closure. How to get around this problem?
Javascript provides two methods: eval() and the toString() method of function objects. The former is more common, and the latter can be used to obtain the specific code of the function. Through these two methods, you can simply simulate the private variables of the class:

Copy the code The code is as follows:

Function Class(argu) {
var _ = argu['private'] || {};
eval('var obj = ' (argu['initialize'] || function( ) {}).toString());
for(var p in argu) {
if(p == 'initialize' || p == 'private')
continue;
if (typeof argu[p] == 'function')
　　　eval('obj.prototype[p] = ' argu[p].toString());
　　　else
　　　obj.prototype[p] = argu[p];
　　}
　　return obj;
　}

Extract the function code through the toString() method of the function object, and use the eval method to execute these codes, In this way, a valid closure scope can be constructed to implement the private mechanism. We can apply it as follows:

Copy code The code is as follows:

　var Person = new Class({
private: {
height: 160,
weight: 50
},
initialize: function(name, height, weight) {
this.name = name;
_.height = height || _.height;
　 _.weight = weight || _.weight;
　　},
　show: function() {
　　alert('Name:' this. name '/nheight:' _.height '/nweight:' _.weight);
　　}
　});
　var my = new Person("Zh");
　my.show( );

It doesn’t look good, but in actual application, it is not of much use. Mainly in terms of efficiency, it takes about four times more time than the usual implementation. In the construction of large class libraries, this is intolerable, but in small applications, it is simpler and more direct to implement the following code:

Copy code The code is as follows:

function MyClass(param) {
var privateVar = ...;
this.param = param;
this.func = function () {
　　　　alert(privateVar);
　　};
　}