Preface

PS:2018/04/14: Re-comb and find the problems mentioned before. By the way, compare the differences between the two styles.

1. Use the "object literal quantity" representation

console.time('Function literal run time');
//Literals of nested functions
var Person = {
  name: 'one'
};
Person.getName = function () {
  console.log(this.name);
}
//Call method
Person.getName(); // one
console.timeEnd('Function literal run time') // Function literal run time: 4.969ms

2. Use the new operator followed by the Object constructor

Details are available for reference. Some Understanding of new Operator, Constructor and Prototype Chain in Javascript

//Constructor
function Person(name) {
  this.name = name
}
//Prototype Addition Method
Person.prototype.getName = function () {
  console.log(this.name);
}

console.time('Constructor runtime');
//Generate instances
var Person = new Person('two');
//Call method
Person.getName(); // two
console.timeEnd('Constructor runtime'); // Constructor runtime: 5.435 MS

When code is executed, there are several steps:

1. A new object inherited from Person.prototype is created.
2. When execution is created, the context (this) is specified as the new instance
3. Execute the code in the constructor (setting the _proto_ attribute of the new object to the prototype object of the constructor, etc.)
4. The result of new is the object created for Step 1

3. Use Object.create(prototype, descriptors)

This is a new method of object creation proposed in E5, which is friendly to mainstream browsers, creating an object with specified prototype and selectively containing specified attributes. (Details are available for reference. Object.create function (JavaScript))

parameter	describe
Prototype (required)	To be used as a prototype object, null can be used
Descriptors (optional)	JavaScript objects containing one or more attribute descriptors

Return value

A new object with a specified internal prototype and containing specified properties (if any);

abnormal

• The prototype parameter is not an object and is not null.
• The descriptors in descriptors parameters have value or writable characteristics, and get or set characteristics.
• The descriptors in descriptors parameters have get or set characteristics that are not functions.

Note that descriptors "data attributes" are attributes that can be accessed and set values. Data attribute descriptors contain value attributes, as well as writable, enumerable, and configurable attributes. If the last three attributes are not specified, they default to false. As long as the value is retrieved or set, accessor attributes call the user. Provided functions. Accessor property descriptors contain set and/or get features.

//Constructor
function Person(name) {
  this.name = 'name'
}
//Prototype Addition Method
Person.prototype.getName = function () {
  console.log(this.name);
}

console.time('Object.create Running time')
//Generate instances
var Person = Object.create(Person.prototype, {
  name: {
    value: 'three'
  }
});
Person.getName(); // three
console.timeEnd('Object.create Running time') // Object.create runtime: 3.272ms

Allow modifications to set the writable property

//Constructor
function Person(name) {
  this.name = 'name'
}
//Prototype Addition Method
Person.prototype.getName = function () {
  console.log(this.name);
}

//Generate instances
var Person = Object.create(Person.prototype, {
  name: {
    value: 'three',
    writable: true,
  }
});
Person.name = 'four';
Person.getName(); // four

The difference between new and Object.create

function Person(name) {
  this.name = 1
}
Person.prototype.name = 2;

//Generate instances
var Person_new = new Person();
var Person_create = Object.create(Person);
var Person_create_prototype = Object.create(Person.prototype);

console.log(Person_new, Person_create, Person_create_prototype);
// Person { name: 1 } Function {} Person {}

Difference

attribute	new constructor	Object. create (constructor)	Object. create (constructor prototype)
Instance type	Instance object	function	Instance object
Instance name	1	nothing	nothing
Prototype name	2	nothing	2

Summary

Contrast	new	Object.create
Use objectives	function	Functions and Objects
Return instance	Instance object	Functions and instance objects
Instance attributes	Inheritance constructor properties	Non-inheritance constructor properties
Prototype chain pointing	Constructor prototype	Constructor/object itself

Object Literacy and Object.create Differences

//Constructor
function Person(name) {
  this.name = 1
}
Person.prototype.name = 2;
//Generate instances
var Person1 = {
  name: 1
};
var Person_create_prototype = Object.create(Person.prototype);
console.log(Person1, Person_create_prototype);
// { name: 1 } Person {}

Difference

attribute	Object Literal	Object.create
Instance type	Pure object	Instance object
Instance name	1	nothing
Prototype name	nothing	2
Prototype chain pointing	Object	Person

Summary

Contrast	Object Literal	Object.create
Use objectives	Pure object	Functions and Objects
Return instance	Pure object	Functions and instance objects
Instance attributes	Non-inheritance property	Non-inheritance constructor properties
Prototype chain pointing	Object	Constructor/object itself

Personal summary:

1. The object literal quantity is the most concise way to write.
2. Object.create() implements an inherited target and highly configurable object;
3. Object.create(null) can get the purest object without inheritance.

console.log(Object.create(null)) // [Object: null prototype] {}