js--How to create an object?

Preface

　　As a front-end developer, when talking about how to create an object, do you only think of creating objects using common literal methods? Have you ever thought about the process of creating objects with new Object()? This article sorts out some common creations Object method.

text

　　The methods for creating objects are summarized as follows:

　　(1) The way of object literal;

      var Person = {}; // equivalent to var Person = new Object(); 
      var Person = { 
        name: "Nike" , 
        age: 29 , 
      };

　　　　Object literal is a simple writing form of object definition, which aims to simplify the process of creating objects that contain a large number of attributes.

　　(2) Factory model;

　　　　Factory pattern, one of the common design patterns, the process of creating an object does not need to expose the specific logic of creating an object like the customer, but through a common interface to point to a new common object, in other words, it uses a function to encapsulate the creation of the object Details, so as to achieve the purpose of function reuse by calling the function, the disadvantage of this method is that the type of the object cannot be identified, and the connection between the object and the type cannot be established. Examples are as follows:

      function person(name, age) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.sayHello = function () {
          console.log("hello");
        };
        return o;
      }
　　　　var per = new Person("xiaoming",20)
      console.log(per.name) // xiaoming
      console.log(per.sayHello()) // hello

　　(3) Constructor mode;

　　　　Every function in JavaScript can be used as a constructor. As long as it is an object created by the new operator, we call this function a constructor. This mode does not need to explicitly create an object, but directly assigns attributes and methods to this, there is no return statement, note that common specifications need to capitalize the first letter of the constructor function name. Examples are as follows:

      function Person(name, age) {
        this.name = name;
        this.age = age;
        this.sayHello = function () {
          console.log(this.name);
        };
      } 
      var person = new Person("xiaoming", 18);
      person.sayHello(); // xiaoming
      person.constructor == Person; // true
      person instanceof Object; //true
      person instanceof Person; //true　 
　　　　 Peron("xiaohong", 18); //Use as a normal function 
      　window.sayHello(); // xiaohong

　　　　When used as a constructor, that is, when the new operator is used, when called with the new keyword, a new memory space will be created and marked as a person instance. The execution of the constructor will first create an object, and then the object's The prototype points to the prototype property of the constructor, then points this in the execution context to this object, and finally executes the entire function. If the return value is not an object, it returns the newly created object. The created object has a constructor attribute. The essence is to create an instance of the object reference type, and then save the instance in the variable person. Therefore, when using instanceof to check the type, it belongs to the object type and the Person type.

　　　　When the above function is used as a normal function, that is, when the new operator is not used, the attributes and methods are added to the window object, so window.sayHello() outputs "xiaohong"

　　　　Advantages and disadvantages: the object created by the constructor solves the shortcomings of the above factory pattern, and establishes a connection between the object and the constructor, so we can identify the type of the object through the prototype, but this pattern causes unnecessary function objects Create, because the definition of a function in the constructor is to define an object, this.sayHello = new Function( console.log (this.name) ), which results in each constructed instance containing a Function instance, and the function object All instances can be used universally, which leads to a waste of memory space.

　　(4) Prototype mode;

　　　　Because every function has a prototype property, this property value is an object, this object contains properties and methods that can be shared by all instances created by the constructor, so we can use the prototype object to add public properties and methods, thus Realize code reuse. Compared with the constructor, this mode solves the problem of reuse of function objects in the constructed instance, but this mode also has certain problems. First of all, there is no way to initialize the properties of the instance by passing in parameters. In addition, if it is a Refer to the value of the data type, then all instances will share an object, and changes made by one instance to the value of the reference data type will affect other instances' references to the type. Examples are as follows:

        function Person(){} 
        Person.prototype.name ='xioming' 
        Person.prototype.sayHello = function (){ 
            console.log( this .name) 
        } 
        var person = new Person() 
        person.sayHello() // xiaoming 
        console .log(Person.prototype.isPrototypeOf(person)) // true because there is a pointer to Person.prototype inside the person object, that is, the prototype of person points to Person

　　(5) Constructor and prototype combination mode;

　　　　Combining the constructor mode and the prototype mode is the most common way to create a custom object. The constructor is used to create the properties of the instance, and the prototype mode is used to create shared properties and methods.

　　　　 function Person(name, age) {
          this.name = name;
          this.age = age;
        }
        Person.prototype = {
          constructor: Person,
          sayName: function () {
            console.log(this.name);
          },
        };
        var p = new Person("xiaozhang", 123);
        console.log(p.sayName()); // xiaozhang

　　　　Using the two methods in combination, although the advantages of the two modes are combined, the problem is that the code is poorly encapsulated.

　　(6) Dynamic prototype mode;

　　　　The dynamic prototype mode is to move the creation process of the prototype method assignment to the inside of the constructor. By judging whether the attribute exists, the effect of assigning the prototype object only once when the function is called can be realized. This way is very good for the above The combination mode is encapsulated.

        function Person(name, age) {
          this.name = name;
          this.age = age;
          if (typeof this.sayHello != "function") {
            Person.prototype.sayHello = function () {
              console.log("hello");
            };
          }
        }

　　　　It is realized by judgment, and the prototype object is assigned when the function is called. Only when the sayHello function does not exist will the method be put back into the prototype, and the first attempt to call the constructor will be executed.

　　(7) Parasitic constructor mode;

　　　　The example method is as follows: suppose we need to create a special array with additional methods:

        function SpecialArray() {
          var arr = new Array();
          //添加值
          arr.push.apply(arr, arguments);
          //添加方法
          arr.toPipedString = function () {
            return this.join("|");
          };
          return arr;
        }
        var color = new SpecialArray(
          "red",
          "blue"
        );
        console.log(color.toPipedString()); //red|blue

　　　　在这个函数内部，首先创建了一个数组，然后push()方法（用构造函数接收到的所有参数）初始化了数组的值。随后，又给数组实例添加了一个toPipedString()方法，该方法返回以竖线分割的数组值。最后，将数组以函数值的形式返回。接着，我们调用了SpecialArray构造函数，向其中传入了用于初始化数组的值，此后调用了toPipedString()方法。但似乎返回的对象与构造函数或构造函数的原型属性之间没有关系；也就是说，构造函数返回的对象与在构造函数外部创建对象没有什么不同。为此，不能依赖instranceof操作符来确定对象类型。

总结

　　　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。

js--How to create an object?

Guess you like