Learn JavaScript design patterns (encapsulation)_javascript skills

In JavaScript, there is no support for abstract classes and interfaces. JavaScript itself is also a weakly typed language. JavaScript doesn't have the ability or need to do much more when it comes to encapsulating types. For the implementation of design patterns in JavaScript, not distinguishing types is a disgrace, and it can also be said to be a relief.

From the perspective of design patterns, packaging is reflected in packaging changes at a more important level.

By encapsulating changes, we isolate the stable parts of the system from the parts that are easy to change. During the evolution of the system, we only need to replace those parts that are easy to change. If these parts have been encapsulated Yes, it is relatively easy to replace. This can ensure the stability and scalability of the program to the greatest extent.

There are three basic modes of JavaScript encapsulation:

1. Use the principle of agreement priority, and all private variables start with _

 <script type="text/javascript">
  /**
   * 使用约定优先的原则，把所有的私有变量都使用_开头
   */
  var Person = function (no, name, age)
  {
   this.setNo(no);
   this.setName(name);
   this.setAge(age);
  }
  Person.prototype = {
   constructor: Person,
   checkNo: function (no)
   {
    if (!no.constructor == "string" || no.length != 4)
     throw new Error("学号必须为4位");
   },
   setNo: function (no)
   {
    this.checkNo(no);
    this._no = no;
   }, 
   getNo: function ()
   {
    return this._no;
   setName: function (name)
   {
    this._name = name;
   }, 
   getName: function ()
   {
    return this._name;
   }, 
   setAge: function (age)
   {
    this._age = age;
   }, 
   getAge: function ()
   {
    return this._age;
   }, 
   toString: function ()
   {
    return "no = " + this._no + " , name = " + this._name + " , age = " + this._age;
   }
  };
  var p1 = new Person("0001", "小平果", "22");
  console.log(p1.toString());  //no = 0001 , name = 小平果 , age = 22
  p1.setNo("0003");
  console.log(p1.toString());  //no = 0003 , name = 小平果 , age = 22
  p1.no = "0004";
  p1._no = "0004";
  console.log(p1.toString()); //no = 0004 , name =小平果 , age = 22

 </script>

After reading the code, do you feel like you have been cheated? If you just put all the variables starting with _, they can still be accessed directly. Can this be called encapsulation? Of course, it is said that the agreement takes precedence.

This use of the underscore is a well-known naming convention, which indicates that a property is only for internal use of the object, and accessing it or setting it directly may lead to unexpected consequences. This helps prevent programmers from accidentally using it, but it does not prevent it from being used intentionally.

This method is still good. At least the getter and setter methods of member variables are in the prototype, not in the object. Overall, it is a good choice. If you feel that this is not possible and that encapsulation must be strictly implemented, then look at the second method.

2. Strictly implement encapsulation

<script type="text/javascript">
  /**
   * 使用这种方式虽然可以严格实现封装，但是带来的问题是get和set方法都不能存储在prototype中，都是存储在对象中的
   * 这样无形中就增加了开销
   */
  var Person = function (no, name, age)
  {
   var _no , _name, _age ;
   var checkNo = function (no)
   {
    if (!no.constructor == "string" || no.length != 4)
     throw new Error("学号必须为4位");
   };
   this.setNo = function (no)
   {
    checkNo(no);
    _no = no;
   };
   this.getNo = function ()
   {
    return _no;
   }
   this.setName = function (name)
   {
    _name = name;
   }

   this.getName = function ()
   {
    return _name;
   }

   this.setAge = function (age)
   {
    _age = age;
   }
   this.
     getAge = function ()
   {
    return _age;
   }

   this.setNo(no);
   this.setName(name);
   this.setAge(age);
  }
  Person.prototype = {
   constructor: Person,
   toString: function ()
   {
    return "no = " + this.getNo() + " , name = " + this.getName() + " , age = " + this.getAge();
   }
  }
  ;
  var p1 = new Person("0001", "小平果", "22");
  console.log(p1.toString());  //no = 0001 , name =小平果 , age = 22
  p1.setNo("0003");
  console.log(p1.toString());  //no = 0003 , name = 小平果 , age = 22
  p1.no = "0004";
  console.log(p1.toString()); //no = 0003 , name = 小平果 , age = 22

 </script>

So how is this different from other modes of creating objects we have talked about before? In the above example, we always use the this keyword when creating and referencing the properties of an object. In this example, we declare these variables with var. This means they only exist in the Person constructor. The checkno function is declared in the same way and therefore becomes a private method.

Methods that need to access these variables and functions only need to be declared in Person. These methods are called privileged methods because they are public but have access to private properties and methods. In order to access these privileged functions from outside the object, they are preceded by the keyword this. Because these methods are defined in the scope of the Person constructor, they have access to private properties. These properties are referenced without using the this keyword because they are not public. All getter and assigner methods have been changed to reference these properties directly without this.

Any method that does not require direct access to private properties can be declared in Person.prototype as originally. Like toString() method. Only methods that require direct access to private members should be designed as privileged methods. But too many privileged methods take up too much memory, because each object instance contains a new copy of all privileged methods.

Look at the above code, the this. attribute name has been removed, and encapsulation has been strictly implemented. Member variables can only be accessed through getters and setters. However, there is a problem. All methods exist in the object, which increases memory overhead. .

3. Encapsulated in a closure

<script type="text/javascript">

  var Person = (function ()
  {
   //静态方法（共享方法）
   var checkNo = function (no)
   {
    if (!no.constructor == "string" || no.length != 4)
     throw new Error("学号必须为4位");
   };
   //静态变量（共享变量）
   var times = 0;

    //return the constructor.
   return function (no, name, age)
   {
    console.log(times++); // 0 ,1 , 2
    var no , name , age; //私有变量
    this.setNo = function (no) //私有方法
    {
     checkNo(no);
     this._no = no;
    };
    this.getNo = function ()
    {
     return this._no;
    }
    this.setName = function (name)
    {
     this._name = name;
    }

    this.getName = function ()
    {
     return this._name;
    }

    this.setAge = function (age)
    {
     this._age = age;
    }
    this.getAge = function ()
    {
     return this._age;
    }

    this.setNo(no);
    this.setName(name);
    this.setAge(age);
   }
  })();

  Person.prototype = {
   constructor: Person,
   toString: function ()
   {
    return "no = " + this._no + " , name = " + this._name + " , age = " + this._age;
   }
  };

  var p1 = new Person("0001", "小平果", "22");
  var p2 = new Person("0002", "abc", "23");
  var p3 = new Person("0003", "aobama", "24");


  console.log(p1.toString());  //no = 0001 , name = 小平果 , age = 22
  console.log(p2.toString());  //no = 0002 , name = abc , age = 23
  console.log(p3.toString()); //no = 0003 , name = aobama , age = 24

 </script>

The above code, after the js engine is loaded, will directly execute the Person = immediate execution function, and then this function returns a sub-function, which is the constructor called by new Person, and because the sub-function maintains A reference to checkNo(no) and times in the immediate execution function (obvious closure), so checkNo and times are common to all Person objects. After creating three objects, times are 0, 1, and 2 respectively. The advantage of this approach is that the methods and properties that need to be reused in Person can be made private and shared between objects.

The private members and privileged members here are still declared in the constructor. But the constructor has changed from an ordinary function to an inline function, and is given to the variable Person as the return value of the function containing it. This creates a closure in which you can declare static private members. The pair of empty brackets located after the outer function declaration is very important. Its function is to execute the function as soon as the code is loaded. The return value of this function is another function, which is assigned to the Person variable, so Person becomes a constructor. This inner function is called when instantiating Person. The outer function is just used to create a closure that can be used to store static members.

In this example, checkno is designed to be a static method because it makes no sense to generate a new copy of this method for each instance of Person. There is also a static attribute times, whose function is to track the total number of calls to the Person constructor .

The above is the entire content of this article. I hope it will be helpful to everyone's study. You can learn more about the meaning of encapsulation.