JavaScript创建对象常用模式

1. 工厂模式

function student(name, age) {
     
  let o = new Object()
  o.name = name
  o.age = age
  o.show = function(){
     
    console.log(`我叫${
       this.name}`)
  }
  return o
}

let a = student('小明', 18)
let b = student('小红', 20)

工厂模式的问题

工厂模式存在对象识别的问题，因为变量a与b是Object的实例，并不是student的实例，如：

console.log(a instanceof Object) // true
console.log(a instanceof student) // false

2. 构造函数模式

function Student(name, age) {
     
  this.name = name
  this.age = age
  this.show = function() {
     
    console.log(`我叫${
       this.name}`)
  }
}

let a = new Student('小明', 18)
let b = new Student('小红', 20)

构造函数首字母大写

注意构造函数Student首字母大写了，这样方便用于区分构造函数和普通函数。

构造函数模式与工厂模式的区别

构造函数模式与工厂模式对比，构造函数中没有return，没有显性的创建对象，属性和方法赋值给了this，并且创建实例需要使用new操作符。

构造函数模式能正确识别对象

因为a和b都是Student的实例，所以它能正确的识别对象，如：

console.log(a instanceof Student) // true

构造函数模式的问题

构造函数模式也有问题，它的方法会在每个实例上都创建一遍，如前面的代码，a和b都有一个show方法，但是他们不是同一个Function实例：

console.log(a.show === b.show) // false

为了解决这个问题，需要把函数放在构造函数外部，如：

function show() {
     
	console.log(`我叫${
       this.name}`)
}
function Student(name, age) {
     
  this.name = name
  this.age = age
  this.show = show
}

let a = new Student('小明', 18)
let b = new Student('小红', 20)
console.log(a.show === b.show) // true

3. 原型模式

function Student() {
     }
Student.prototype.name = '小明'
Student.prototype.age = 18
Student.prototype.show = function() {
      console.log(`我叫${
       this.name}`) }

let a = new Student()
let b = new Student()
a.show() // 我叫小明
b.show() // 我叫小明

使用原型模式的好处是它原型对象(prototype)中的属性和方法会在实例上共享。

console.log(a.name === b.name) // true
console.log(a.show === b.show) // true

原型模式的问题

原型模式没有初始化传参的这个步骤，这样会带来很大的不方便。

4. 组合使用构造函数模式和原型模式

这是最常见的方式，既能解决原型模型不能传参的问题，又能解决构造函数模式方法不共享的问题。

function Student(name, age) {
     
  this.name = name
  this.age = age
}
Student.prototype = {
     
	constructor : Student, 
	show: function(){
      
		console.log(`我叫${
       this.name}`)
	}
}
let a = new Student('小明', 18)
let b = new Student('小红', 20)
a.show() // 我叫小明
b.show() // 我叫小红
console.log(a.show === b.show) // true