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)...
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
本文地址:https://blog.csdn.net/m0_37797410/article/details/110826381
上一篇: HTML5离线缓存技术的讲解和使用
下一篇: 利用 Python 实现多任务进程