JavaScript高级 对象创建模式 object 对象字面量 工厂模式 自定义构造函数 构造函数+原型
Posted HUMILITY
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript高级 对象创建模式 object 对象字面量 工厂模式 自定义构造函数 构造函数+原型相关的知识,希望对你有一定的参考价值。
对象创建模式
Object构造函数模式
- 套路:先创建空Object对象,再动态添加属性/方法
- 使用场景:起始时不确定对象内部数据
- 问题:语句太多
var p = new Object()
p.name = \'Tom\'
p.age = 12
p.setName = function (name){
this.name = name
}
p.setName(\'JACK\')
console.log(p.name,p.age)
对象字面量模式
- 套路:使用{}创建对象,同时指定属性/方法
- 适用场景:起始时对象内部数据是确定的
问题:如果创建多个对象,有重复代码
var p = { name:\'TOM\' age:\'12\' setName:function(name){ this.name=name } } console.log(p.name,p.age) p.setName(\'jack\') console.log(p.name,p.age) var p2={ name:\'BOB\' age:\'13\' setName:function(name){ this.name = name } }
工厂模式
- 套路:通过工厂函数动态创建对象并返回
- 适用场景:需要创建多个对象
- 问题:对象没有一个具体的类型,都是Object类型
function creatPerson(name,age){ //返回一个对象的函数==>工厂函数
var obj={
name:name,
age:age,
setName:function (name){
this.name = name
}
}
return obj
}
//创建2个人
var p1 = creatPerson(\'TOM\',12)
var p2 = creatPerson(\'BOB\',13)
//p1,p2是Object类型
function creatStudent(name,price){
var obj = {
name:name,
price:price
}
return obj
}
var s = creatStudent(\'张三\',12000)
自定义构造函数模式
- 套路:自定义构造函数,通过new创建对象
- 适用场景:需要创建多个类型确定的对象
问题:每个对象都有相同的数据,浪费内存
//定义类型 function Person(name,age){ this.name = name this.age = age this.setName = function(name){ this.name = name } } var p1 = new Person(\'TOM\',12) p1.setName(\'JACK\') console.log(p1.name,p1.age) function Student(name,price){ this.name = name this.price = price } var s = new Student(\'BOB\',13000) console.log(s instanceof Student) var p2 = new Person(\'JACK\',23) console.log(p1,p2)
构造函数+原型的组合模式
- 套路:自定义构造函数,属性在函数中初始化,方法添加到原型上
适用场景:需要创建多个类型确定的对象
function Person(name,age){ this.name = name this.age = age } Person.prototype.setName = function (name){ this.name = name } var p1 = new Person(\'TOM\',23) var p2 = new Person(\'JACK\',24) console.log(p1,p2)
以上是关于JavaScript高级 对象创建模式 object 对象字面量 工厂模式 自定义构造函数 构造函数+原型的主要内容,如果未能解决你的问题,请参考以下文章