Explain several ways and object methods of creating objects in js in detail

This article is to read js Red Book Chapter 8, about the object notes (second).

Several modes of creating objects:

Factory mode:

Factory means function. The core of factory pattern is to define a function that returns a brand-new object.

 function getObj(name, age) {
  let obj = {}
  obj.name = name
  obj.age = age
  return obj
 }
 let person1 = getObj("cc", 31)

Disadvantages: I don't know what type of newly created object is

Constructor pattern:

Through a constructor, an object instance is obtained.
The difference between constructor and factory pattern is:
1. this is added to the body of the constructor function
2. Constructor without return
3. When the constructor is called, use the new keyword

 function CreateObj(name, age) {
  this.name = name
  this.age = age
 }
 let person1 = new CreateObj("cc", 31)
 console.log(person1)
 console.log(person1.constructor === CreateObj); // true
 console.log(person1 instanceof CreateObj); // true

Two questions about constructors:

1. The only difference between constructors and ordinary functions is the way they are called. The constructor uses the new keyword. If new is not used, attributes are added to Global objects. In the following example, the CreateObj method adds name and age attributes to the window object

 function CreateObj(name, age) {
  this.name = name
  this.age = age
 }
 CreateObj('cc', 10)
 console.log(window.name) // 'cc'

2. Problems existing in the constructor: The method in the constructor body will be created once every time an instance is created.

person1.sayName( ) === person2.sayName( ) // false

The solution is to define sayName outside createObj.

 function sayName() {
  console.log(this.name)
 }
 function CreatePerson(name, age) {
  this.name = name
  this.age = age
  this.sayName = sayName
 }
 let person1 = new CreatePerson('joy', 31)
 person1.sayName()

However, this will make the code of custom type reference not cluster well.

Prototype mode:

The principle is that each function has one prototype attribute. prototype is an object that defines properties and methods that are shared by all instances.
There are two equations about prototype patterns:

 function Person() { }
 let person1 = new Person()
 console.log(person1.__proto__ === Person.prototype)  // true
 console.log(Person.prototype.constructor === Person); // true

Three Methods for Prototype Objects: isPrototype, getPrototypeof, setPrototypeOf, Object. create ()

// isPrototypeOf Determine whether the prototype object of the constructor is the prototype object of the instance 
function Person() {}
 let person1 = new Person()
 console.log(Person.prototype.isPrototypeOf(person1)); // true

//  Gets the prototype object of the object 
 function Person() {}
 let person1 = new Person()
 console.log(Object.getPrototypeOf(person1) === Person.prototype);

//  Set an object to another 1 Prototype object of 20 objects 
 let person1 = {name: "cc"}
 let person2 = {age: 32}
 Object.setPrototypeOf(person1,person2)
 console.log(person1.name, person1.age); // cc 32

//  Taking an object as a prototype object, create a 1 New objects   
let person1 = {name: "cc"}
 let person2 = Object.create(person1)
 person2.age = 30
 console.log(person2.name, person2.age);

When accessing the name property of an object person, the following steps are followed:
1. If there is name attribute on person (even if this attribute is null, it will return null), return name attribute value; No, continue to look on the prototype object Person. prototype
2. If there is name attribute on the prototype, return the name attribute value on the prototype; No, undefined is returned

To determine whether an attribute is on an instance or a prototype, you can use hasOwnProperty

 function CreateObj(name, age) {
  this.name = name
  this.age = age
 }
 let person1 = new CreateObj("cc", 31)
 console.log(person1)
 console.log(person1.constructor === CreateObj); // true
 console.log(person1 instanceof CreateObj); // true

0

To determine whether there is an attribute on an object, use in operator

 function CreateObj(name, age) {
  this.name = name
  this.age = age
 }
 let person1 = new CreateObj("cc", 31)
 console.log(person1)
 console.log(person1.constructor === CreateObj); // true
 console.log(person1 instanceof CreateObj); // true

1

To access the properties of an object:

 function CreateObj(name, age) {
  this.name = name
  this.age = age
 }
 let person1 = new CreateObj("cc", 31)
 console.log(person1)
 console.log(person1.constructor === CreateObj); // true
 console.log(person1 instanceof CreateObj); // true

2

Other ways to access object properties and property values:
An array of Object. values () object values, omitting the Symbol type.
Object. An array of entries () object key-value pairs converts the key to a string, eliminating the Symbol type.

 function Person() {}
 Person.prototype.name = "cc"
 let person = new Person()
 person.age = 21
 let sy = Symbol('sy')
 person[sy] = 'smile'
 console.log(Object.values(person)) // [ 21 ]
 console.log(Object.entries(person)) // [ [ 'age', 21 ] ]