The javascript feature: encapsulation

Encapsulation Definition: Encapsulation is the abstraction of data and data
The operations are encapsulated so that the data is protected internally so that the rest of the program can be authorized (by defining functions internally, such as get, set for java)
Method) to operate on the data

Here's the most understandable encapsulation, but unlike java, there are only public and private classes

 <script type="text/javascript">
      function Person(name, age, sal){
        // open
        this.name = name;
        // private
        var age = age;
        var salary = sal;
        this.abc=function(){
             document.write("----<br/>"+age +"----<br/>"); //You can't add this here
          }

      }
      var p1 = new Person('xie', 20, 10000);
      document.write(p1.name +"----"+ p1.age); //xie----undefined
      p1.abc();
    </script>

There are many ways to encapsulate what we call property and method into an object, or even to generate an object instance from a prototype.

1. The most original method for generating object instances

Look at the cat at an object. It has two attributes: name and color.
Now we need to generate two instance objects based on the schema of this prototype object.

  var Cat = {
    name : '',
    color : ''
  } 


  var cat1 = {}; // Create an empty object
    cat1.name = "Big hair"; // Assignment according to the properties of the prototype object
    cat1.color = "yellow";
  var cat2 = {};
    cat2.name = "Ditrichosis";
    cat2.color = "black";

Well, this is the simplest encapsulation, encapsulating two attributes in one object.However, there are two drawbacks to this writing

  • First, it is very difficult to write if more instances are generated.
  • Second, there is no way between the instance and the prototype to see what the connection is.

Improvement of original mode

We can write a function, solve the problem of code duplication, and then generate an instance object, which is equivalent to calling a function:

  function Cat(name,color) {
    return {
      name:name,
      color:color
    }
  }

  var cat1 = Cat("Big hair","yellow");
  var cat2 = Cat("Ditrichosis","black");

The problem with this approach is that there is no inherent link between cat1 and cat2, and they do not reflect that they are instances of the same prototype object.

2. Constructor Mode

To solve the problem of generating instances from prototype objects, Javascript provides a Constructor pattern.
The so-called "constructor" is actually a normal function, but this variable is used internally.With the new operator on the constructor, an instance can be generated, and the this variable is bound to the instance object.
For example, a cat's prototype object can now be written like this,

  function Cat(name,color){
    this.name=name;
    this.color=color;
  }

  var cat1 = new Cat("Big hair","yellow");
  var cat2 = new Cat("Ditrichosis","black");
  alert(cat1.name); // Big hair
  alert(cat1.color); // yellow

cat1 and cat2 automatically have a constructor attribute that points to their constructors.
  

alert(cat1.constructor == Cat); //true
  alert(cat2.constructor == Cat); //true

Javascript also provides an instanceof operator to validate the relationship between the prototype object and the instance object.
  

alert(cat1 instanceof Cat); //true
  alert(cat2 instanceof Cat); //true

Problems with constructor patterns

The constructor method is useful, but it has a memory waste problem.
Look, now we add a constant attribute type (kind) to the Cat object and a method eat (eat).Then the prototype object Cat becomes the following:

  function Cat(name,color){
    this.name = name;
    this.color = color;
    this.type = "Catamount";
    this.eat = function(){alert("Eating mice");};
  }

  var cat1 = new Cat("Big hair","yellow");
  var cat2 = new Cat ("Ditrichosis","black");
  alert(cat1.type); // Catamount
  cat1.eat(); // Eating mice

It looks like there's nothing wrong with it, but there's a big drawback to doing so.That is, for each instance object, the type attribute and eat() method are the same content, each time an instance is generated, it must be duplicated content, consuming more memory.This is neither environmentally friendly nor inefficient.
  

alert(cat1.eat == cat2.eat); //false

Can you have the type attribute and eat() method only be generated once in memory, and then all instances point to that memory address?The answer is yes.

3. Prototype mode

Javascript specifies that each constructor has a prototype property that points to another object.All properties and methods of this object are inherited by instances of the constructor.
This means that we can define those invariant properties and methods directly on the prototype object.

  function Cat(name,color){
    this.name = name;
    this.color = color;
  }
  Cat.prototype.type = "Catamount";
  Cat.prototype.eat = function(){alert("Eating mice")};

  var cat1 = new Cat("Big hair","yellow");
  var cat2 = new Cat("Ditrichosis","black");
  alert(cat1.type); // Catamount
  cat1.eat(); // Eating mice

At this point, the type attribute and eat() method of all instances are actually the same memory address, pointing to the prototype object, which improves the efficiency.
  

alert(cat1.eat == cat2.eat); //true

Keywords: Attribute Javascript Java REST

Added by Masca on Mon, 15 Jul 2019 20:31:44 +0300