欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript创建对象常用模式

程序员文章站 2022-03-07 12:14:18
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)...

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

本文地址:https://blog.csdn.net/m0_37797410/article/details/110826381