【JavaScript】- Several ways to create objects

1. Built-in constructor creation

We can new Object()create :

//在js中,对象有动态特性,可以随时的给一个对象增加属性或者删除属性。
let person = new Object()
person.name = 'Jack'
person.age = 18
​
person.sayName = function () {
  console.log(this.name)
}
Cons: cumbersome, every property needs to be added.

2. Object literal creation

let person = {
  name: 'Jack',
  age: 18,
  sayName: function () {
    console.log(this.name)
  }
}

Disadvantage: What if you want to generate multiple objects in batches? The code is redundant

3. Simple Improvement: Factory Function

// 我们可以写一个函数,解决代码重复问题:
function createPerson (name, age) {         // 第一种写法
  return {
    name: name,
    age: age,
    sayName: function () {
      console.log(this.name)
    }
  }
}
// 然后生成实例对象:
let p1 = createPerson('Jack', 18)
let p2 = createPerson('Mike', 18)
​
​
 function setObj(name, age) {           // 第二种写法
      let obj = new Object()
      obj.name = name
      obj.age = age
      return obj
    }
​
let obj1 = setObj('jack', 20)
console.log(obj1);

Disadvantages: However, it does not solve the problem of object recognition, and the created objects are of type Object.

 

4. Continue to improve: Constructor

A constructor is a function that instantiates an object and needs to be used with newthe operator.

function Person (name, age) {
  this.name = name
  this.age = age
  this.sayName = function () {
    console.log(this.name)
  }
}
​
var p1 = new Person('Jack', 18)
p1.sayName() // => Jack
​
var p2 = new Person('Mike', 23)
p2.sayName() // => Mike

To create an Personinstance , the newoperator must be used. Calling the constructor in this way goes through the following 4 steps What exactly does new do :

  1. Create a new object (the constructor is to initialize the object)

  2. Assign the scope of the constructor to the new object (assign the address of the created object to this in the constructor)

  3. Execute the code in the constructor (call the constructor to add members to the object)

  4. Return a new object (return the address of this to obj)

Constructors need to be used with newthe operator to make sense. The first letter of constructors is generally uppercase.

be careful:

1. If you manually add the return value return, if it is a basic type, it will not affect the function of the constructor

2. If the object is returned, it will be overwritten

3. If new is removed, it will become an ordinary function

Disadvantages of constructors

The biggest advantage of using the constructor is that it is more convenient to create objects, but it also has a problem of wasting memory:

function Person (name, age) {
  this.name = name
  this.age = age
  this.type = 'human'
  this.say = function () {
    console.log('hello ' + this.name)
  }
}
​
var person1 = new Person('lpz', 18)
var person2 = new Person('Jack', 16)
console.log(person1.say === person2.say) // => false

Solution: extract the same saymethod

  1. Solve the disadvantage of wasting memory

  2. but caused 污染全局变量the problem of

  // 提前将say 声明好
    function say() {
      console.log(this.name);
    }
    function createStudent(name, age) {
      this.name = name;
      this.age = age;
      this.say = say
    }

    const obj = new createStudent("悟能", 83);
    const obj1 = new createStudent("悟能1", 84);

    console.log(obj.say === obj1.say); // true 

Guess you like

Origin blog.csdn.net/m0_55960697/article/details/124001274