Javascript Object Creation Method

create object

1.1 Creation through Object Objects

var person = new Object();
person.name = "Albert";
person.sayName = function(){
    console.log(this.name)
}

1.2 Create by Literal Quantity

var person = {
    this.name = "Albert";
    this.sayName = function(){
        console.log(this.name)
    }
}

Object and literal creation issues:

A lot of duplicate code is generated when many objects are created.

1.3 Factory Model

function createPerson(name){
    var o = new Object();
    o.name = name;
    o.sayName = function(){
        console.log(this.name)
    }
    return o;
}
var person = createPerson("Albert");

The problem of factory mode:

The object type cannot be identified, that is, the object type cannot be identified by instanceof and constructor:

person instanceof ???;
person.constructor == ???;

1.3 constructor

function Person(name){
    this.name = name;
    this.sayName = function(){
        console.log(this.name)
    }
}
var person = new Person("Albert");
console.log(person.constructor == Person)//true
console.log(person instanceof Person)//true

The problem of constructors:

Each method is recreated on each instance, especially functions, so that each Person instance contains a different sayName function instance.

Note 1
The constructor has no return statement. To create a new instance of Person, you have to use the new operator, which basically accomplishes four things:

Create a new object (in this case, the new object created by Person counts as xperson);
Assign the scope of the constructor to a new object (this=>xperson);
Execute the code in the constructor (this.name=name...... In Person) ;
Return a new object

Note 2
The constructor is also a function. If it is not called through the new operator, the working environment is global (windows in browser, global in node environment).

function Person(name){
    this.name = name;
    this.sayName = function(){
        console.log(this.name)
    }
}

Person("BB");
global.sayName()//BB
console.log(global.name)//BB

1.4 Prototype Model

function Person(name){}
Person.prototype.name = "Albert";
Person.prototype.sayName = function(){
        console.log(this.name)
    }

var person = new Person();
console.log(Object.getPrototypeOf(person)==Person.prototype);//true

Browser support: IE9+, so that all Person instances share name attributes and sayName functions

Note 1

Whether an attribute of an object comes from an instance can be determined by hasOwnProperty(), and if it is in a prototype, it returns false.
The in operator, such as console.log("name" in person)//true), can be used to determine whether an object has attributes or not. It returns true in both prototypes and instances, and is enumerated in both instances and prototypes through the for-in loop.
Note 2

When defining a prototype, the constructor attribute of the prototype does not point to Person if the literal quantity is used instead of the prototype attribute definition. Because the default prototype object is completely rewritten by literal definition. But instanceof still returns the correct result.

function Person(name){};
Person.prototype={
    name : "Albert";
    sayName : function(){
        console.log(this.name);
    };
}
var person = new Person();
console.log(person instance of Person);//true
console.log(person.constructor == Person);//false
console.log(person.constructor == Object);//true

So we can add another definition:

Object.defineProperty(Person.prototype,"constructor",{
    enumerable:false,
    value:Person
})

Note 3
You cannot create an object instance before redefining the prototype, otherwise it will cause the prototype pointing error of the instance.

function Person(name){};
var person = new Person();
Person.prototype={
    name : "Albert";
    sayName : function(){
        console.log(this.name);
    };
}
person.sayName(); //error

In this case, the prototype of person is pointed to the default prototype of Person, and a solid call to the sayName function will cause an error.

The problem of prototype patterns:

Small problem: In order to omit the constructor passing initialization parameters, all instances default to the imaginary attribute values
Prototype attributes are shared by all instances (values suitable for Function types), whereas in general, reference type (Array, Object) attribute values do not want to be shared by all instances.

1.5 Constructor and Prototype Combination

Using the shared feature that constructors are both instance attributes and prototypes, the corresponding content is defined separately, and the object creation is accomplished by combination. Moreover, the pattern also supports the transfer of parameters by the constructor.

function Person(name){
    this.name = name;
    this.friends = ["Bob","Harry"];//Reference type as instance attribute
};
Person.prototype.sayName : function(){
        console.log(this.name);
};

1.6 Dynamic Prototype Model

A pattern encapsulating the combinations in 1.5 in a constructor. The specific method is to check whether a method that should exist is effective to decide whether the prototype needs to be initialized or not.

function Person(name){
    this.name = name;
    this.friends = ["Bob","Harry"];//Reference type as instance attribute
    //****ProtoType****
    if(typeof this.sayName != "function"){
        Person.prototype.sayName : function(){
            console.log(this.name);
        };
    }
};

1.6 Parasitic tectonic model

The constructor returns a new object instance by default without reverting to the value.
By adding the return statement at the end of the function, you can override the return value when the function is called after new.

function Person(name){
    var o = new Object();
    o.name = name;
    o.sayName : function(){
        console.log(this.name);
    };
    return o;
};
var person = new Person("Albert");
console.log(person instanceof Person);//false

In addition to using the new operator and naming the wrapper function "constructor", the function is exactly the same as the factory model.
This pattern belongs to a special construction pattern and can be used in situations where the original object is not allowed to be modified.

function SpecialArray(){
    var values = new Array();
    values.push.apply(values,arguments);
    values.toPipedString = function(){
        return this.join("|");
    }
    return values
}

1.7 durable constructor pattern

The object constructed by this pattern has no public attributes, does not apply to this object, does not apply to the new operator, and is suitable for some security environments. It can prevent data from being altered by other applications (such as Mashup), which is similar to the parasitic constructor pattern, but does not apply to this and new.

function Person(name){
    var o = new Object();
    //****** Definition of Private Variables and Functions****
    var _name = name;
    o.sayName : function(){
        console.log(_name);
    };    
    return o;
};
var person = Person("Albert");

In this mode, there is no other way to access the value of name except for the sayName() method.

Posted by swizenfeld on Tue, 16 Apr 2019 12:12:32 -0700

Programmer Group