JS create objects in several ways

new Object()

Directly create a new object by the constructor.

var obj = new Object()
//等同于 var obj = {}
复制代码

Use literal way more simple, in fact They are the same. The advantage is simple enough, the disadvantage is each object is independent.

Factory Pattern

function createObj(name,age){
    var obj = {};
    obj.name=name;
    obj.age=age;
    return obj
}
var Anson = createObj('Anson', 18)
console.log(Anson)
//{name: "Anson", age: 18}
复制代码

The advantage is you can create multiple similar objects to solve the problem, the disadvantage is unable to identify the type of the object.

Constructor

function Person(name,age){
    this.name =name;
    this.age=age;
    this.sayName =function (){ alert(this.name) }
}
var person = new Person('小明',13);
console.log(person);
//Person {name: "小明", age: 13, sayName: ƒ}
复制代码

Advantage is to create specific types of objects, the drawback is repeated to create multiple instances of method

(+ Constructor prototype) combined mode

function Person(name, age){
    this.name = name;
    this.age = age;
    Person.prototype.sayName = function (){ alert(this.name) }
 }
var person = new Person('小白',18)
console.log(person);
//Person {name: "小白", age: 18} __proto__ -> sayName: ƒ ()
复制代码

A plurality of instances referenced advantages of the prototype method commonly used

Dynamic prototype

function Person(name,age){
    this.name=name
    this.age =age
    if(typeof this.sayName != 'function'){
        Person.prototype.sayName = function(){ alert(this.name) }
  }
}
var person = new Person('小红',15)
console.log(person);
//Person {name: "小红", age: 15} 动态创建sayName: ƒ ()
复制代码

Advantages can determine whether a valid method to determine the need to initialize the prototype, if only will be executed only when the calling method against the first instance, then all instances share this approach, the point to note is that the prototype can not be re object.

Parasitic constructor mode

function Person(name,age,job){
    var o=new Object();
    o.name=name;
    o.age=age;
    o.job=job;
    o.sayName=function(){
        console.log(this.name)
    }
    return o;
}
var friend=new Person("her",18,"Front-end Engineer");
friend.sayName();
//her
复制代码

In addition to the use of newoperators, and other plants of the same functions, can be created for the object constructor.

Safe mode

function Person(name, age){
    var o={};
    o.sayName=function(){ alert(name) }
    return o;
}
var person = ('小亮'，24);
person.sayName();//’小亮‘
复制代码

In addition to using person.sayName()outside, there is no way to access the value of the name, and suitable for use in the implementation of certain security panorama.

Object.create()

const person = {
  isHuman: false,
  printIntroduction: function () {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);

me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"
复制代码

Passed a prototype object, creating a new object, using the existing objects to provide the newly created object of __proto__, implementation inheritance.

Reference: "JavaScript Advanced Programming Third Edition", the MDN

Reproduced in: https: //juejin.im/post/5cf09e3751882552a826eed2