Summary of several ways JavaScript creates objects

The ECMA defines an object as a collection of unordered properties whose properties can contain basic values, objects, or functions.

1. Creating an object using the object constructor

The simplest way to create a custom object is to create an instance of an object and then add properties and methods to it.

//creating an object from an instance of the object constructorvarperson =NewObject ();//adding properties and methodsPerson.name = "Guo";p erson.age= ' 24 ';p Erson.sayname=function() {Console.log ( This. name);};//two ways to access properties: dot notation and square brackets notationConsole.log (Person.name);//"Guo"Console.log (person[' age ');// -Person.sayname ();//"Guo"

2. Creating an object using object literals

// create an object using object literals var person = {    "Guo",    +,    function() {        Console.log (this. name);    }; Console.log (person.name);   // "Guo" // person.sayname ();  // "Guo"

3. Factory mode

While the object constructor or object literal can be used to create a single object, there is an obvious drawback: creating an object with the same interface produces a lot of duplicate code. In order to solve this problem, put forward the factory model.

 //  use Factory mode to create objects, return person objects with properties and methods  function   Createperson (name, age) { var  o = new   Object ();    O.name  = name;    O.age  = age; O.sayname  = function   () {Console.log (    Span>this  .name);    };  return   o;}  var  Person1 = Createperson ("Guo", 24); Person1.sayname ();  //  "Guo"  

4. Creating an object using the custom constructor pattern

// create an object using a custom constructor pattern (the first letter of the function as a constructor is capitalized to distinguish other functions) function Person (name,age) {    this. name=name;      this. age= age;     this. sayname=function() {        Console.log (this. name);}    ;} var New Person ("Guo",+//"Guo"

Expand : To create a new instance of person, you must use the new operator. Sowhat exactly does the new operator do?

(1) Create a new (empty) object

(2) Assign the scope of the constructor to the new object (because this points to the new object)

(3) Executing the code in the constructor (adding attributes to the new object)

(4) Returning new objects

the only difference between constructors and other functions is that they are called in different ways . Any function, as long as it is called by the new operator, can be used as a constructor, and any function, if not called by the new operator, is no different from the normal function. One drawback of this approach is that in the above example, Sayname this method, each instance of it is pointing to a different function instance, not the same one. That is, the same function on different instances is not equal .

In order to solve this problem, a prototype schema creation object is proposed.

5. Creating objects using prototype mode

//creating an object using prototype mode (resolves a function in a constructor that does not reuse the problem)functionPerson () {}person.prototype= {//object literal syntax overrides prototype objectConstructor:person, Name:"Guo", Age:24, friends:["Liu", "Li"], Sayname:function() {Console.log ( This. Name); }};//creating an instance 1varPerson1 =NewPerson (); Person1.friends.push ( "Yang");   Console.log (Person1.friends); //[' Liu ', ' Li ', ' Yang ']//creating an Instance 2varPerson2 =NewPerson (); Console.log (person2.friends); // [' Liu ', ' Li ', ' Yang '] //Defect in prototype modeperson1.sayname ();//"Guo"Person2.sayname ();//"Guo"

Here we find a problem, but a flaw in the prototype pattern, in the example above, Person1 changes the value of the array, directly affecting the value of the Friends array in Person2, which we do not want to see.

　　The biggest problem with prototype mode is that the nature of the share is the result of all the attributes in the prototype being shared by all instances. An instance sharing issue also occurs for values of reference types.

To solve this problem, a combination of prototype patterns and constructors is proposed to create objects.

6. Combining constructors and prototype patterns to create objects

As the name implies, constructors are used to define instance properties, whereas prototype patterns are used to define methods and shared properties.

//combine to create objects using prototype patterns and constructors (most widely used, with the highest degree of recognition)//constructors are used to define instance properties, whereas prototype patterns are used to define methods and shared propertiesfunctionPerson (name,age) { This. Name =name;  This. Age =Age ;  This. Friends = ["Liu", "Li"];} Person.prototype={Constructor:person, sayname:function() {Console.log ( This. Name); }}varPerson1 =NewPerson ("Guo", 24);varPerson2 =NewPerson ("Zhu", 30);p Erson1.friends.push ("Yang"); Console.log (person1.friends); //[' Liu ', ' Li ', ' Yang ']Console.log (Person2.friends);//[' Liu ', ' Li ']Person1.sayname ();//"Guo"Person2.sayname ();//"Zhu"

7. Dynamic Prototyping Mode

//Dynamic prototyping mode (with better encapsulation)functionPerson (name, age) {//Properties     This. Name =name;  This. Age =Age ;  This. Friends = ["Liu", "Li"]; //Method    if(typeof  This. sayname! = "function") {Person.prototype.sayName=function() {Console.log ( This. Name);     }; }}varPerson1 =NewPerson ("Guo", 24); Console.log (person1.friends); //[' Liu ', ' Li ']Person1.sayname ();//"Guo"

There are also two methods for creating objects, parasitic constructor patterns and secure constructor patterns . Since these two functions are not particularly common, no specific code is given here. Interested to view JS elevation p160-162

Summary

　　ECMAScript supports object-oriented (OO) programming, but does not use classes or interfaces. objects can be created and enhanced during code execution, so they are dynamic rather than strictly defined entities. In the absence of classes, the following patterns can be used to create objects.

(1) Factory mode, use simple functions to create objects, add properties and methods to objects, and return objects. This pattern was later superseded by the constructor pattern.

(2) constructor mode, you can create custom reference types and use the new operator as you would create a built-in object instance. However, the constructor pattern also has the disadvantage that each of its members cannot be reused, including functions. Since functions can be not confined to any object (that is, loosely coupled to an object), there is no reason not to share functions among multiple objects.

(3) prototype mode, using the prototype property of the constructor to specify the properties and methods that should be shared. When combining constructor and prototype patterns, use constructors to define instance properties, and use prototypes to define shared properties and methods.

Summary of several ways JavaScript creates objects