JavaScript對象的四種創(chuàng)建方法

更新時間：2022年08月25日 11:01:32 作者：沈麼鬼???????

這篇文章主要介紹了JavaScript對象的四種創(chuàng)建方法，首先我們通過確定一個對象的屬性和方法展開主題相關內容，需要的小伙伴可以參考一下

前言

今天我們來學習一下JavaScript中關于對象的四種創(chuàng)建方法。首先，我們來確定一個對象的屬性和方法。比如說，我們想要我們定義一個girlFriend的對象，希望她有名字name、年齡age的屬性，希望有一個getName方法，來獲取名字；最后屬性是一個稍微復雜的對象屬性address，它具有兩個屬性值，所在地name和郵政編碼code。接下來，我們來通過本篇內容，來看一下在JavaScript中可以有多少種方法創(chuàng)建一個這樣的對象。

1. 基于對象字面量

基于對象字面量的方法，就是直接創(chuàng)建對象的屬性及方法，也是最常用的創(chuàng)建對象的方法，它的優(yōu)點是簡單、方便，但無法進行相同對象的量產。

?/* 1.基于對象字面量 */
?let girlFriend = {
? ? ?name: "蘿莉",
? ? ?age: 18,
? ? ?getName: function() {
? ? ? ? ?return this.name
? ?  },
? ? ?address: {
? ? ? ? ?name: '北京市',
? ? ? ? ?code: '10000'
? ?  }
?}

2. 利用new Object方式創(chuàng)建對象

利用Object方式創(chuàng)建對象，就是我們最常說的使用new Object來實現(xiàn)：

?// 2. 利用new Object方式創(chuàng)建對象
?function GirlFriend(name, age, address) {
? ? ?this.name = name
? ? ?this.age = age
? ? ?this.address = address
? ? ?this.setName = function() {
? ? ? ? ?return (this.name)
? ?  }
?}
?//利用new 來創(chuàng)建對象
?var girlFriend1 = new GirlFriend("蘿莉", 18, {
? ? ?name: '北京市',
? ? ?code: '10000'
?})

通過調試臺運行girlFriend得出下面輸出：

3. 基于構造函數(shù)

使用構造函數(shù)可以量產對象，注意第一個GirlFriend字母要大寫，然后通過new GirlFriend 來實例化對象：

?// 3. 基于構造函數(shù)
?function GirlFriend(name, age, address) {
? ? ?this.name = name
? ? ?this.age = age
? ? ?this.address = address
? ? ?this.setName = function() {
? ? ? ? ?return (this.name)
? ?  }
?}
?//利用new 來創(chuàng)建對象
?var girlFriend1 = new GirlFriend("蘿莉", 18, {
? ? ?name: '北京市',
? ? ?code: '10000'
?})

4. 基于工廠方法

工廠方法是一種設計模式，通過封裝函數(shù)來創(chuàng)建指定的對象，重點是抽象出創(chuàng)建對象時屬性、函數(shù)的賦值過程，然后只對外暴露重新設置的屬性值，工廠方法可以快速進行相同類型對象的量產：

?// 4.基于工廠方法
?function createGirlFriend(name, age, address) {
? ? ?let o = new Object();
? ? ?o.name = name;
? ? ?o.age = age;
? ? ?o.address = address;
? ? ?o.setName = function() {
? ? ? ? ?return this.name
? ?  }
? ? ?return o;
?}
?let girlFriend = createGirlFriend('蘿莉', 18, {
? ? ?name: '北京市',
? ? ?code: '10000'
?})

這里定義了一個createGirlFriend的工廠方法，通過參數(shù)將屬性傳遞給內部的o對象，最后返回o。然后實例化girlFriend，獲得的結果與第一種方法一樣：