關于js(es5)如何優(yōu)雅地創(chuàng)建對象

一复旬、前顏(yan)

對象(Object Oriented,OO)對于基于類的語言來說是再普通不過的一個概念 了冲泥,比如C++驹碍,Java等等。
而在es5(以下js指es5)中凡恍,由于沒有類的概念志秃,因此它的對象與其他基于類的語言的對象是不同的。
因此在js中嚼酝,關于對象的創(chuàng)建方法也有所不一樣浮还。
本文介紹各種創(chuàng)建js對象的方法,以及優(yōu)缺點闽巩。

二钧舌、通過Object創(chuàng)建對象

var cat = new Object();
cat.name = 'kiki1';
cat.age = 1;
cat.speak = function () {
  console.log('Hello I am ', this.name);
}

缺點:當需要創(chuàng)建多個相似對象時,會產生大量的重復代碼涎跨,比如這時候我想再創(chuàng)建一個cat2延刘,這時就得重復一遍以上代碼。

var cat2 = new Object();
cat2.name = 'kiki2';
cat2.age = 2;
cat2.speak = function () {
  console.log('Hello I am ', this.name);
}

三六敬、通過對象字面量語法對象

var cat = {
  name: 'kiki1',
  age: 1,
  speak: function () {
    console.log('Hello I am ', this.name);
  }
}

特點:通過此方法來創(chuàng)建對象相比Object創(chuàng)建對象代碼簡潔了很多
缺點:與通過Object創(chuàng)建對象的缺點一致

為了解決以上問題,以下模式來了驾荣。

四外构、通過工廠模式創(chuàng)建對象

function createCat(name, age) {
  var o = new Object();
  o.name = name;
  o.age = age;
  o.speak = function () {
    console.log('Hello I am ', this.name);
  }
  return o;
}

var cat1=createCat('kiki1',1);
var cat2=createCat('kiki2',2);

cat1.speak(); //Hello I am  kiki1
cat2.speak(); //Hello I am  kiki2

特點:通過工廠模式創(chuàng)建對象普泡,可以解決創(chuàng)建多個相似對象的問題。
缺點:無法識別對象审编,即無法知道一個對象的類型撼班。

五、通過構造函數(shù)模式創(chuàng)建對象

通過構造函數(shù)模式創(chuàng)建對象垒酬,能夠很好的解決工廠模式創(chuàng)建對象的問題砰嘁。

function Cat(name, age) {
  this.name = name;
  this.age = age;
  this.speak = function () {
    console.log('Hello I am ', this.name);
  }
}

let cat1 = new Cat('kiki1', 1);
let cat2 = new Cat('kiki2', 2);

cat1.speak(); //Hello I am  kiki1
cat2.speak(); //Hello I am  kiki2

// 檢測對象類型
console.log(cat1 instanceof Cat); // true
console.log(cat2 instanceof Cat); // true

// 不同實例上的同名函數(shù)是不相等
console.log(cat1.speak == cat2.speak); // false

特點:
1筷笨、通過new Cat來創(chuàng)建實例
2张遭、可以通過instanceof來檢測對象類型
缺點:
使用構造函數(shù)的缺點在于码耐,每個方法都會在實例上重新創(chuàng)建一遍琼锋,所以不同實例上的同名函數(shù)是不相等的,即無法共享方法饺蚊。比如上面的例子中的cat1.speak和cat2.speak是不相等的托呕。

為了解決此缺點差牛,請看原型模式音羞。

六景描、原型模式

function Cat() { }
Cat.prototype.name = 'kiki1';
Cat.prototype.age = 1;
Cat.prototype.speak = function () {
  console.log('Hello I am ', this.name);
}
Cat.prototype.data = [1, 2];

let cat1 = new Cat();
let cat2 = new Cat();

console.log(cat1.speak == cat2.speak); // true

// 引用類型屬性十办,不同實例之間互相影響
console.log(cat2.data); // [1,2]
cat1.data.push(3);
console.log(cat1.data); // [1,2,3]
console.log(cat2.data); // [1,2,3]

特點:共享方法,比如上面的例子中超棺,cat1.speak和cat2.speak是相等的向族。
缺點:由于引用類型的屬性也是共享的,因此不同實例之間會互相影響

六棠绘、組合模式

組合模式:即構造函數(shù)模式+原型模式件相。
采用組合模式可以解決構造函數(shù)模式和原型模式的問題,又擁有構造函數(shù)和原型模式的特點弄唧,集兩種模式之長适肠。
通過構造函數(shù)模式定義實例屬性,通過原型模式定義共享方法和共享屬性候引。

function Cat(name, age, data) {
  this.name = name;
  this.age = age;
  this.data = data;
}
Cat.prototype.speak = function () {
  console.log('Hello I am ', this.name);
}

let cat1 = new Cat('kiki1', 1, [1, 2, 3]);
let cat2 = new Cat('kiki2', 2, [3, 4, 5]);

console.log(cat1.speak == cat2.speak); // true

console.log(cat1.data); // [1,2,3]
console.log(cat2.data); // [3,4,5]

綜上對比侯养,組合模式是最優(yōu)雅的創(chuàng)建對象的方式。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末澄干,一起剝皮案震驚了整個濱河市逛揩,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌麸俘,老刑警劉巖辩稽,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異从媚,居然都是意外死亡逞泄,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來喷众,“玉大人各谚,你說我怎么就攤上這事〉角В” “怎么了昌渤?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長憔四。 經常有香客問我膀息,道長,這世上最難降的妖魔是什么了赵? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任潜支,我火速辦了婚禮,結果婚禮上斟览,老公的妹妹穿的比我還像新娘毁腿。我一直安慰自己,他們只是感情好苛茂,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布已烤。 她就那樣靜靜地躺著,像睡著了一般妓羊。 火紅的嫁衣襯著肌膚如雪胯究。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天躁绸,我揣著相機與錄音裕循,去河邊找鬼。 笑死净刮,一個胖子當著我的面吹牛剥哑,可吹牛的內容都是我干的。 我是一名探鬼主播淹父,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼株婴,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了暑认?” 一聲冷哼從身側響起困介,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蘸际,沒想到半個月后座哩,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡粮彤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年根穷,在試婚紗的時候發(fā)現(xiàn)自己被綠了姜骡。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡屿良,死狀恐怖溶浴,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情管引,我是刑警寧澤,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布闯两,位于F島的核電站褥伴,受9級特大地震影響,放射性物質發(fā)生泄漏漾狼。R本人自食惡果不足惜重慢,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望逊躁。 院中可真熱鬧似踱,春花似錦、人聲如沸稽煤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽酵熙。三九已至轧简,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間匾二,已是汗流浹背哮独。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留察藐,地道東北人皮璧。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像分飞,于是被迫代替她去往敵國和親悴务。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內容

  • 博客內容:什么是面向對象為什么要面向對象面向對象編程的特性和原則理解對象屬性創(chuàng)建對象繼承 什么是面向對象 面向對象...
    _Dot912閱讀 1,403評論 3 12
  • 普通創(chuàng)建對象和字面量創(chuàng)建對象不足之處:雖然 Object 構造函數(shù)或對象字面量都可以用來創(chuàng)建單個對象浸须,但這些方式有...
    believedream閱讀 2,367評論 2 18
  • ??面向對象(Object-Oriented删窒,OO)的語言有一個標志裂垦,那就是它們都有類的概念,而通過類可以創(chuàng)建任意...
    霜天曉閱讀 2,098評論 0 6
  • 第3章 基本概念 3.1 語法 3.2 關鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,106評論 0 21
  • 偶爾的放松肌索,是需要的蕉拢,可以的,向內走,我想晕换,不是只是一定在實現(xiàn)外在物質條件后午乓。朋友在分享她實現(xiàn)經常中獎,時常感恩闸准,...
    TS小西閱讀 138評論 0 0