JavaScript對象的四種創(chuàng)建方法
前言
今天我們來學習一下JavaScript中關(guān)于對象的四種創(chuàng)建方法。 首先,我們來確定一個對象的屬性和方法。比如說,我們想要我們定義一個girlFriend的對象,希望她有名字name、年齡age的屬性,希望有一個getName方法,來獲取名字;最后屬性是一個稍微復(fù)雜的對象屬性address,它具有兩個屬性值,所在地name和郵政編碼code。 接下來,我們來通過本篇內(nèi)容,來看一下在JavaScript中可以有多少種方法創(chuàng)建一個這樣的對象。
1. 基于對象字面量
基于對象字面量的方法,就是直接創(chuàng)建對象的屬性及方法,也是最常用的創(chuàng)建對象的方法,它的優(yōu)點是簡單、方便,但無法進行相同對象的量產(chǎn)。
?/* 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' ?})
通過調(diào)試臺運行g(shù)irlFriend得出下面輸出:
3. 基于構(gòu)造函數(shù)
使用構(gòu)造函數(shù)可以量產(chǎn)對象,注意第一個GirlFriend
字母要大寫,然后通過new GirlFriend 來實例化對象:
?// 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)建對象 ?var girlFriend1 = new GirlFriend("蘿莉", 18, { ? ? ?name: '北京市', ? ? ?code: '10000' ?})
4. 基于工廠方法
工廠方法是一種設(shè)計模式,通過封裝函數(shù)來創(chuàng)建指定的對象,重點是抽象出創(chuàng)建對象時屬性、函數(shù)的賦值過程,然后只對外暴露重新設(shè)置的屬性值,工廠方法可以快速進行相同類型對象的量產(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' ?})
這里定義了一個createGirlFriend
的工廠方法,通過參數(shù)將屬性傳遞給內(nèi)部的o
對象,最后返回o
。然后實例化girlFriend,獲得的結(jié)果與第一種方法一樣:
到此這篇關(guān)于JavaScript對象的四種創(chuàng)建方法的文章就介紹到這了,更多相關(guān)JavaScript對象創(chuàng)建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
利用uniapp開發(fā)APP時的調(diào)試/安卓打包等詳解
uni-app??是一個使用??Vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,下面這篇文章主要給大家介紹了關(guān)于利用uniapp開發(fā)APP時的調(diào)試/安卓打包等的相關(guān)資料,需要的朋友可以參考下2022-12-12淺談JavaScript中面向?qū)ο蟮牡纳羁截惡蜏\拷貝
下面小編就為大家?guī)硪黄獪\談JavaScript中面向?qū)ο蟮牡纳羁截惡蜏\拷貝。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08js數(shù)組高階函數(shù)之includes()方法總結(jié)
JS的數(shù)組是一種特殊的對象,其特點是在值的列表中按照順序存放值,在 JS中,數(shù)組是由中括號 [] 括起來的數(shù)值序列,本篇文章給大家介紹js數(shù)組高階函數(shù)——includes()方法,感興趣的朋友一起看看吧2023-12-12