JavaScript對(duì)象的四種創(chuàng)建方法
前言
今天我們來學(xué)習(xí)一下JavaScript中關(guān)于對(duì)象的四種創(chuàng)建方法。 首先,我們來確定一個(gè)對(duì)象的屬性和方法。比如說,我們想要我們定義一個(gè)girlFriend的對(duì)象,希望她有名字name、年齡age的屬性,希望有一個(gè)getName方法,來獲取名字;最后屬性是一個(gè)稍微復(fù)雜的對(duì)象屬性address,它具有兩個(gè)屬性值,所在地name和郵政編碼code。 接下來,我們來通過本篇內(nèi)容,來看一下在JavaScript中可以有多少種方法創(chuàng)建一個(gè)這樣的對(duì)象。
1. 基于對(duì)象字面量
基于對(duì)象字面量的方法,就是直接創(chuàng)建對(duì)象的屬性及方法,也是最常用的創(chuàng)建對(duì)象的方法,它的優(yōu)點(diǎn)是簡(jiǎn)單、方便,但無法進(jìn)行相同對(duì)象的量產(chǎn)。
?/* 1.基于對(duì)象字面量 */
?let girlFriend = {
? ? ?name: "蘿莉",
? ? ?age: 18,
? ? ?getName: function() {
? ? ? ? ?return this.name
? ? },
? ? ?address: {
? ? ? ? ?name: '北京市',
? ? ? ? ?code: '10000'
? ? }
?}2. 利用new Object方式創(chuàng)建對(duì)象
利用Object方式創(chuàng)建對(duì)象,就是我們最常說的使用new Object來實(shí)現(xiàn):
?// 2. 利用new Object方式創(chuàng)建對(duì)象
?function GirlFriend(name, age, address) {
? ? ?this.name = name
? ? ?this.age = age
? ? ?this.address = address
? ? ?this.setName = function() {
? ? ? ? ?return (this.name)
? ? }
?}
?//利用new 來創(chuàng)建對(duì)象
?var girlFriend1 = new GirlFriend("蘿莉", 18, {
? ? ?name: '北京市',
? ? ?code: '10000'
?})通過調(diào)試臺(tái)運(yùn)行g(shù)irlFriend得出下面輸出:

3. 基于構(gòu)造函數(shù)
使用構(gòu)造函數(shù)可以量產(chǎn)對(duì)象,注意第一個(gè)GirlFriend字母要大寫,然后通過new GirlFriend 來實(shí)例化對(duì)象:
?// 3. 基于構(gòu)造函數(shù)
?function GirlFriend(name, age, address) {
? ? ?this.name = name
? ? ?this.age = age
? ? ?this.address = address
? ? ?this.setName = function() {
? ? ? ? ?return (this.name)
? ? }
?}
?//利用new 來創(chuàng)建對(duì)象
?var girlFriend1 = new GirlFriend("蘿莉", 18, {
? ? ?name: '北京市',
? ? ?code: '10000'
?})4. 基于工廠方法
工廠方法是一種設(shè)計(jì)模式,通過封裝函數(shù)來創(chuàng)建指定的對(duì)象,重點(diǎn)是抽象出創(chuàng)建對(duì)象時(shí)屬性、函數(shù)的賦值過程,然后只對(duì)外暴露重新設(shè)置的屬性值,工廠方法可以快速進(jìn)行相同類型對(duì)象的量產(chǎn):
?// 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'
?})這里定義了一個(gè)createGirlFriend的工廠方法,通過參數(shù)將屬性傳遞給內(nèi)部的o對(duì)象,最后返回o。然后實(shí)例化girlFriend,獲得的結(jié)果與第一種方法一樣:

到此這篇關(guān)于JavaScript對(duì)象的四種創(chuàng)建方法的文章就介紹到這了,更多相關(guān)JavaScript對(duì)象創(chuàng)建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
細(xì)說webpack源碼之compile流程-rules參數(shù)處理技巧(1)
webpack作為一種流行的打包工具被廣泛應(yīng)用在web項(xiàng)目的前端工程化構(gòu)建中。下面通過本文給大家介紹webpack源碼之compile流程-rules參數(shù)處理技巧,感興趣的朋友一起看看吧2017-12-12
深入學(xué)習(xí)JavaScript對(duì)象
今天小編就和大家深入學(xué)習(xí)JavaScript對(duì)象,感興趣的小伙伴們可以參考一下,大家一起學(xué)習(xí)。2015-10-10
PWA介紹及快速上手搭建一個(gè)PWA應(yīng)用的方法
這篇文章主要介紹了PWA介紹及快速上手搭建一個(gè)PWA應(yīng)用的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
JavaScript獲取網(wǎng)頁表單action屬性的方法
這篇文章主要介紹了JavaScript獲取網(wǎng)頁表單action屬性的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
JS生態(tài)系統(tǒng)加速Tailwind?CSS工作原理探究
這篇文章主要為大家介紹了JS?生態(tài)系統(tǒng)加速Tailwind?CSS使用及工作原理探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
你不知道的JS?ES6字符串標(biāo)簽函數(shù)分享
字符串標(biāo)簽函數(shù)是一種特殊的函數(shù)調(diào)用語法,本文將深入探討ES6中字符串標(biāo)簽函數(shù)的工作原理,并結(jié)合具體的代碼展示它的威力,快跟隨小編一起學(xué)習(xí)起來吧2023-06-06

