對象的創(chuàng)建模式大概有這幾種：

• Object構(gòu)造函數(shù)模式
• 對象字面量
• 工廠模式
• 自定義構(gòu)造函數(shù)模式
• 構(gòu)造函數(shù)+原型的組合模式

---

Object構(gòu)造函數(shù)模式

Object構(gòu)造函數(shù)模式

• 套路: 先創(chuàng)建空Object對象, 再動態(tài)添加屬性/方法
• 適用場景: 起始時不確定對象內(nèi)部數(shù)據(jù)
• 問題: 語句太多

<script type="text/javascript">/*一個人: name:"Tom", age: 12*/// 先創(chuàng)建空Object對象var p = new Object()p = {} //此時內(nèi)部數(shù)據(jù)是不確定的// 再動態(tài)添加屬性/方法p.name = 'Tom'p.age = 12p.setName = function (name) {this.name = name}//測試console.log(p.name, p.age)p.setName('Bob')console.log(p.name, p.age)</script>

---

對象字面量模式

• 套路: 使用{}創(chuàng)建對象, 同時指定屬性/方法
• 適用場景: 起始時對象內(nèi)部數(shù)據(jù)是確定的
• 問題: 如果創(chuàng)建多個對象, 有重復(fù)代碼

<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 = { //如果創(chuàng)建多個對象代碼很重復(fù)name: 'Bob',age: 13,setName: function (name) {this.name = name}}</script>

---

工廠模式

• 套路: 通過工廠函數(shù)動態(tài)創(chuàng)建對象并返回
• 適用場景: 需要創(chuàng)建多個對象
• 問題: 對象沒有一個具體的類型, 都是Object類型

<script type="text/javascript">function createPerson(name, age) { //返回一個對象的函數(shù)===>工廠函數(shù)var obj = {name: name,age: age,setName: function (name) {this.name = name}}return obj}// 創(chuàng)建2個人var p1 = createPerson('Tom', 12)var p2 = createPerson('Bob', 13)// p1/p2是Object類型function createStudent(name, price) {var obj = {name: name,price: price}return obj}var s = createStudent('張三', 12000)// s也是Object</script>

---

自定義構(gòu)造函數(shù)模式

• 套路: 自定義構(gòu)造函數(shù), 通過new創(chuàng)建對象
• 適用場景: 需要創(chuàng)建多個類型確定的對象
• 問題: 每個對象都有相同的數(shù)據(jù), 浪費內(nèi)存

<script type="text/javascript">//定義類型function Person(name, age) {this.name = namethis.age = agethis.setName = function (name) {this.name = name}}var p1 = new Person('Tom', 12)p1.setName('Jack')console.log(p1.name, p1.age)console.log(p1 instanceof Person)function Student (name, price) {this.name = namethis.price = price}var s = new Student('Bob', 13000)console.log(s instanceof Student)var p2 = new Person('JACK', 23)console.log(p1, p2)</script>

---

構(gòu)造函數(shù)+原型的組合模式

• 套路: 自定義構(gòu)造函數(shù), 屬性在函數(shù)中初始化, 方法添加到原型上
• 適用場景: 需要創(chuàng)建多個類型確定的對象

<script type="text/javascript">function Person(name, age) { //在構(gòu)造函數(shù)中只初始化一般函數(shù)this.name = namethis.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>

總結(jié)

以上是生活随笔為你收集整理的前端基础知识3的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。