This is the 20th day of my participation in the August More Text Challenge

Create object schema

In the last article I introduced the object from a deeper level (note: suggest reading again in JS object-oriented (a)), understand the attribute of the object attribute. So today we start the second phase, object-oriented encapsulation. Encapsulation is the implementation of the real object – oriented functionality in the true sense.

In the last article, we said that the biggest advantage of object orientation is to reduce unnecessary code duplication, improve code maintainability, and reduce server stress.

There are many ways to encapsulate object orientation, and we will only explore the common, representative ones here. Examples are the singleton pattern, the factory pattern, the constructor pattern, and the construction-based stereotype pattern.

1.1 Singleton Mode

The singleton pattern is the grouping of properties and methods that describe the same thing (the same effect or method) into one object.

The singleton pattern acts as a grouping, so that properties or methods of different things, even if they have the same name (attribute name and method name), do not infect each other. This way of grouping code is called singleton pattern. Singleton mode is the most common development mode in the process of project development, and it is also the easiest way to achieve modular development. Let’s look at the singleton pattern:

For example, we want to implement an edit method:

var edit={
   copy:function(source,target){},
   delete:function(target){},
   back:function(){}};Copy the code

These methods only need to be defined once, and when we need to use methods in Edit, we just need edit.copy(a,b); Edit. Delte (c)… We don’t need to duplicate copy and delete methods, which reduces the decoupling of our code, and the singleton pattern is also common for custom module exports in Node and Angular. Singleton pattern combined with inertia in JS high order programming skills can be very convenient to encapsulate some small method libraries; Here’s a simple example:

For example, we want to cultivate FE:

var tools=(function(){
   var isStandarBrowser = "getComputedStyle" in window;

    function jsonParse(jsonStr) {
        return "JSON" in window ? JSON.parse(jsonStr) : eval("(" + jsonStr + ")");
    }

    function listToAry(likeAry) {
        try {
            return Array.prototype.slice.call(likeAry, 0);
        } catch (e) {
            var ary = [];
            for (var i = 0; i < likeAry.length; i++) { ary.push(likeAry[i]); }}return ary;
    }

    function getRandom(n, m) {
        n = Number(n);
        m = Number(m);
        if (isNaN(n) || isNaN(m)) {
            return Math.random();
        }
        if (n > m) {
            var tem = m;
            m = n;
            n = tem;
        }
        return Math.round(Math.random() * (m - n) + n);
    }
       return {
          getRandom: getRandom,
          listToAry: listToAry, jsonParse: jsonParse}})();Copy the code

1.2 Factory Mode

The singleton pattern has a namespace, but it is a write-dead object. If we wanted to create a singleton containing methods, the singleton would not be able to do so. So the factory model came into being. Unlike the singleton pattern, the factory pattern encapsulates the code that implements a thing into a function that we only need to execute whenever we need to implement the thing. Example:

  function developeFE(student,skill){
       var objFE={};
       objFE.name=student;
       objFE.skill=skill;
        returnObjFE; }; FrontEngineer = developeFE (Binary, presents);// Make Binary an Angular front-end engineer
     console.log(frontEngineer);//{name:Binary,skill:angular}
Copy the code
  • Constructor pattern: While the factory pattern solves the problem of creating multiple similar objects, it does not solve the problem of object recognition (i.e., we do not know which class the object is an instance of); This is where the constructor pattern comes in; The constructor defines a custom class and creates an instance of the custom class using the new operator. And the realization of instance recognition, the instance created by new A, is A class instance, the instance created by new B is A class instance; It is important to emphasize that all classes in JS are of function data type, but they become a class by new execution, but they are a function of nature has not changed. The sample
function DevelopFE(stu,skill){ this.name=stu; this.skill=skill; this.saySkill=function(){alert(this.skill)} }; var FE=new DevelopFE(Binary,nodejs); //FE is an instance of DevelopFE; console.log(FE); //{name:Binary,skill:nodejs, saySkill: function(){alert(this.skill)};Copy the code

1.3 Considerations in constructors

  1. Constructors differ from factory patterns in that first we don’t need to create empty objects ourselves, second we don’t need to return objects manually, and third we add attributes to instances using this keyword. Any property that you add via this is enumerable by default.
  2. Constructor to create an instance, the new operator must be used; Using the new operator actually takes four steps:
2.1 Create a new object; 2.2 Point this to the new object 2.3 Execute the code in the constructor 2.4 return the new objectCopy the code
  1. Constructor this is the instance of the current constructor, which is the implementation principle of instance recognition;
  2. If you return a value of a primitive datatype, the instance will not change. If you return a reference datatype, the instance will be replaced by the return value.
  3. Attributes added to an instance using the this keyword are private attributes of the instance and are namespace-protected, independent of other instances (including the current class instance). Method for detecting private properties obj.hasownProperty (key); The return value is a Boolean, true meaning private property of the instance, false not;

1.4 Prototype Mode

Prototype model: the constructor is also commonly used in the work, the constructor is very perfect, very convenient also, but he was not without his faults, for example in the case of the constructor, every FE should have saySkill method, so this should be a common method, there is no need for each instance has a, suggesting that a problem? The constructor pattern solves the problem of instance recognition of factory pattern, but it does not realize the common method in object-oriented. This is when the constructor-based prototype pattern is born; If we want to share methods, we should not put them on instances. Instead, we should find a public place to store them on constructors. This public place should be accessible to instances and constructors. The prototype is defined in the constructor, and the constructor can pass the. Access, instance access through __proto__;

Read the following paragraphs 5 times if you want to understand the stereotype pattern and stereotype chain. Every function datatype (common function, class) has a built-in property called prototype, and it is an object datatype.

And prototype comes with a constructor property whose value is the current prototype class itself;

Each object datatype (prototype, instance, plain object) has a __proto__ attribute whose value is a pointer to the prototype of the class to which the instance (object) belongs. Examples are also available.

function DevelopFE(stu,skill){
   this.name=stu;
   this.skill=skill;
};
DevelopeFE.prototype.saySkill=function(){alert(this.skill)};
Copy the code

That’s the logic of the stereotype, but how does the instance access the stereotype? This is where the “prototype chain” is introduced, which is very similar to the scope chain in that it is chain-lookup;

Second, prototype chain mechanism

When we call an instance’s method or read an instance’s property, the mechanism looks in the private property and reads the call if it finds one; If no Object is found, the __proto__ attribute value will be read, and the __proto__ reference will be used to find the instance’s prototype. If no Object is found, the __proto__ reference will be used to find the Object. Objcet is the base class of all classes. In plain English, you find your head. Since Object is a base class, it has no __proto__. Here many people may be very confused, how can __proto__ class, please do not forget, js big to DOM, BOM to key is an object, the so-called JS everything object;

Three, the prototype model details

  1. In IE, __proto__ is disabled to prevent us from modifying properties or methods on the prototype. If we want to change it, we can only use.prototype.

  2. Constructor problem, the constructor direction may also change when we manually change the prototype of the class, example

var obj={
   this.sayExprience=function(years){alert(years)}
}
console.log(DevelopeFE.prototype.contructor)// DevelopeFE
DevelopeFE. prototype=obj;
console.log(DevelopeFE.prototype.contructor)// Object
Copy the code

This is not what we want. If we use constructor to test the data type, the result will be biased; So remember to modify the constructor point if you want to better prototype.