【JavaScript高階】9、物件高階（物件建立模式）
阿新 • • 發佈：2019-01-01
一、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>