對象的創建模式大概有這幾種：

• Object構造函數模式
• 對象字面量
• 工廠模式
• 自定義構造函數模式
• 構造函數+原型的組合模式

---

Object構造函數模式

Object構造函數模式

• 套路: 先創建空Object對象, 再動態添加屬性/方法
• 適用場景: 起始時不確定對象內部數據
• 問題: 語句太多

<script type="text/javascript">/*一個人: name:"Tom", age: 12*/// 先創建空Object對象var p = new Object()p = {} //此時內部數據是不確定的// 再動態添加屬性/方法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>

---

對象字面量模式

• 套路: 使用{}創建對象, 同時指定屬性/方法
• 適用場景: 起始時對象內部數據是確定的
• 問題: 如果創建多個對象, 有重復代碼

<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>

---

工廠模式

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

<script type="text/javascript">function createPerson(name, age) { //返回一個對象的函數===>工廠函數var obj = {name: name,age: age,setName: function (name) {this.name = name}}return obj}// 創建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>

---

自定義構造函數模式

• 套路: 自定義構造函數, 通過new創建對象
• 適用場景: 需要創建多個類型確定的對象
• 問題: 每個對象都有相同的數據, 浪費內存

<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>

---

構造函數+原型的組合模式

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。