JavaScript创建对象的几种方式

1. 简单方式

可以直接通过new Object() 创建:
var person = new Object()
person.name = 'jack'
person.age = 12

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

每次创建通过new Object() 比较麻烦,所以可以通过它的简单形式对象字面量来创建

var person = {
  name: "jack",
  age: 18,
  sayName: function(){
    cosnole.log(this.name)
  }
}

对于上面的写法固然没有问题,但是如果我们要生成两个或者对个person实例对象呢?

var person1 = {
  name: "jack",
  age: 18,
  sayName: function(){
    cosnole.log(this.name)
  }
}

var person2 = {
  name: "rose",
  age: 18,
  sayName: function(){
    cosnole.log(this.name)
  }
}

通过上面的代码我们不难看出,这样的代码太过冗余,重复性太高

2. 简单方式的改进:工厂函数

我们可以写一个函数,解决代码重复问题
function createPerson (name,age){
  return {
    name: name,
    age: age,
    sayName: function(){
      console.log(this.name)
    }
  }
}

然后生成实例对象:

var p1 = createPerson('jack',18)
var p2 = createPerson('rose',18)

如上,这样封装代码会少很多,通过工厂模式我们解决了创建多个相似代码冗余的问题,但是没有解决对象识别的问题(即怎样知道一个对象的类型)

3. 构造函数

一种更优的工厂函数就是下面这样,构造函数:

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()

var p2 = new Person('rose',18)

p2.sayName()

解析构造函数代码的执行

在上面的示例中,Person()函数取代了createPerson()函数,但是实现的效果是一样的,这是为什么呢?
我们可以注意到,Person中代码与createPerson有以下几点不同之处:
1. 没有显示创建对象
2. 直接将属性和方法赋给了this对象
3. 没有return语句
4. 函数名是大写的Person
而要创建Person实例,则必须要使用new操作符,以这种方式调用构造函数会经历以下4个步骤:
1. 创建一个新对象
2. 将构造函数的作用域赋给新对象(因此this指向了这个新对象)
3. 执行构造函数中的代码
4. 返回新对象