JavaScript创建对象常用模式

墨蓝 2022-12-27 02:29 137阅读 0赞

### JavaScript创建对象常用模式 ###

*  1. 工厂模式
 *  2. 构造函数模式
 *  3. 原型模式
 *  4. 组合使用构造函数模式和原型模式

# 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