Home > Web Front-end > JS Tutorial > body text

JavaScript simulation class mechanism and private variables

高洛峰
Release: 2016-11-25 14:31:43
Original
1119 people have browsed it

When using some Javascript frameworks, you may see similar code


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

 var myObj = new MyClass(param);
 myObj.func1(...);


 This is a typical The object-oriented class mechanism application 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:


 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 to 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 is used as The constructor is used, 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:


 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];
   }
  init.apply(this, arguments); //Use this of the current function to Instead of the function initialize, 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 this 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.
 The conversion of this is a bit dizzying, so is there an easier way? Please look at the code below:


function Class(argu) {
var obj = argu['initialize'] || function() {};
for (var p in argu) {
prototype[p] = argu[p]; //Note that prototype is used here. Return obj; // It still returns a letter. br />
 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:



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 the code, so that an effective closure range can be constructed to implement the private mechanism . We can apply it as follows:


 var Person = new Class({
  private: {
  height: 160,
  weight: 50
  },
  initialize: function(name, height, weight) {
  this.name = name;
  _.he 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 practical applications , in fact, 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 straightforward to implement the following code:


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

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


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template