一、Object构造函数模式
方式一: Object构造函数模式
* 套路: 先创建空Object对象, 再动态添加属性/方法
* 适用场景: 起始时不确定对象内部数据
* 问题: 语句太多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_Object构造函数模式</title>
</head>
<body>
<script type="text/javascript">
/*
一个人: name:"Tom", age: 12
*/
// 先创建空Object对象
var p = new Object() // 此时内部数据是不确定的 //或者 var p = {}
// 再动态添加属性/方法
p.name = 'tom'
p.age = 12
p.setName = function (name) {
this.name = name
}
//测试
console.log(p.name, p.age)
p.setName('Bob')
console.log(p.name, p.age)
</script>
</body>
</html>
二、对象字面量
方式二: 对象字面量模式
* 套路: 使用{}创建对象, 同时指定属性/方法
* 适用场景: 起始时对象内部数据是确定的
* 问题: 如果创建多个对象, 有重复代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_对象字面量</title>
</head>
<body>
<script type="text/javascript">
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
}
}
</script>
</body>
</html>
三、工厂模式
方式三: 工厂模式
* 套路: 通过工厂函数动态创建对象并返回
* 适用场景: 需要创建多个对象
* 问题: 对象没有一个具体的类型, 都是Object类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_工厂模式</title>
</head>
<body>
<script type="text/javascript">
function createPerson(name,age) {
var obj = {
name:name,
age:age,
setName:function (name) {
this.name = name
}
}
return obj // 返回一个对象的函数===>工厂函数
}
//可以利用一个工厂函数创建多个对象
var p1 = createPerson('tom',12)
var p2 = createPerson('jack',13)
console.log(p1.name,p1.age)
console.log(p2.name,p2.age)
function createStudent(name, price) {
var obj = {
name:name,
price:price,
setName:function (name) {
this.name = name
}
}
return obj
}
s = createStudent('chen',12000)
console.log(s.name,s.price)
// 问题是: 对象没有一个具体的类型, 都是Object类型
console.log(s instanceof Object) // s也是Object类型
console.log(p1 instanceof Object,p2 instanceof Object) // p1/p2是Object类型
</script>
</body>
</html>
四、自定义构造函数模式
方式四: 自定义构造函数模式
* 套路: 自定义构造函数, 通过new创建对象
* 适用场景: 需要创建多个类型确定的对象
* 问题: 每个对象都有相同的数据, 浪费内存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_自定义构造函数模式</title>
</head>
<body>
<script type="text/javascript">
function Person(name,age) {
this.name = name
this.age = age
this.setName = function (name) {
this.name = name
}
}
var p1 = new Person('tom',12)
console.log(p1.name,p1.age)
p1.setName('jack')
console.log(p1.name,p1.age)
var p2 = new Person('jack',13)
console.log(p1,p2) //问题: 每个对象都有相同的方法, 浪费内存
function Student(name, price) {
this.name = name
this.price = price
this.setName = function (name) {
this.name = name
}
}
var s = new Student('chen',12000)
console.log(s.name,s.age)
s.setName('wei')
console.log(s.name,s.age)
//需要创建多个类型确定的对象
console.log(p1 instanceof Person) // p1是Person类型对象
console.log(s instanceof Student) // s是Student类型对象
</script>
</body>
</html>
五、构造函数+原型的组合模式（最优）
方式五: 构造函数+原型的组合模式
* 套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
* 适用场景: 需要创建多个类型确定的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_构造函数+原型的组合模式</title>
</head>
<body>
<script type="text/javascript">
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)
</script>
</body>
</html>