400-650-7353
您所在的位置:首頁 > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎(chǔ)知識(shí)】面向?qū)ο笾畡?chuàng)建對(duì)象

【W(wǎng)eb前端基礎(chǔ)知識(shí)】面向?qū)ο笾畡?chuàng)建對(duì)象

  • 發(fā)布: Web前端培訓(xùn)
  • 來源:
  • 2021-07-26 15:34:35
  • 閱讀()
  • 分享
  • 手機(jī)端入口

面向?qū)ο蟮恼Z言有一個(gè)標(biāo)志,那就是它們都有類的概念,而通過類可 以創(chuàng)建任意多個(gè)具有相同屬性和方法的對(duì)象。前面提到過,ECMAScript 中沒有類的概念,因此它的對(duì)象也與基于類的語言中的對(duì)象有所不同。

ECMA把對(duì)象定義為:“無序?qū)傩缘募,其屬性可以包含基本值、?duì)象或者函數(shù)。對(duì)象的每個(gè)屬性或方法都有一個(gè)名字,而每個(gè)名字都映射到一個(gè)值。

我們之前在學(xué)習(xí)創(chuàng)建對(duì)象時(shí),使用字面量方式和Object構(gòu)造函數(shù)的方式都可以進(jìn)行創(chuàng)建對(duì)象,但是我們也發(fā)現(xiàn)了這兩種方式只適合用來創(chuàng)建單個(gè)對(duì)象,想要?jiǎng)?chuàng)建大量對(duì)象時(shí),一份代碼就要書寫多次,顯然的產(chǎn)生了代碼冗余。接下來來介紹幾種其他創(chuàng)建對(duì)象的方式。

工廠模式創(chuàng)建對(duì)象:

上面我們說使用Object構(gòu)造函數(shù)的方式進(jìn)行創(chuàng)建多個(gè)對(duì)象時(shí),會(huì)產(chǎn)生大量重復(fù)代碼,那自然而然我們就會(huì)想到將重復(fù)性的代碼封裝成為一個(gè)函數(shù),這個(gè)函數(shù)就是工廠函數(shù)。

  1. // 工廠模式實(shí)際上就是封裝函數(shù) 
  2.         function createStar(name, age, sex){ 
  3.             // 1.創(chuàng)建一個(gè)空對(duì)象(原材料) 
  4.             var obj = {}; 
  5.  
  6.             // 2.添加屬性和方法(加工) 
  7.             obj.name = name; 
  8.             obj.age = age; 
  9.             obj.sex = sex; 
  10.  
  11.             obj.skill = function(){ 
  12.                 console.log('sing dance'); 
  13.             } 
  14.  
  15.             // 3.返回出對(duì)象(出廠) 
  16.             return obj 
  17.         } 
  18.  
  19.         // 創(chuàng)建對(duì)象 
  20.         var star1 = createStar('何美男',25,'boy'); 
  21.         console.log(star1); 
  22.         star1.skill();  // sing dance 

【W(wǎng)eb前端基礎(chǔ)知識(shí)】面向?qū)ο笾畡?chuàng)建對(duì)象

使用工廠模式創(chuàng)建對(duì)象雖然可以實(shí)現(xiàn)批量創(chuàng)建對(duì)象,但是卻出現(xiàn)了新的問題,即創(chuàng)建出的對(duì)象指向不明確。使用instanceof操作符檢測對(duì)象類型時(shí),都是屬于object。

  1. var star2 = createStar('大黃', 3, 'boy'); 
  2.         console.log(star2); 
  3.         star2.skill(); 
  4.  
  5.         console.log(typeof star1, typeof star2);   // object object 
  6.         console.log(star2 instanceof Object);   // true 

構(gòu)造函數(shù)創(chuàng)建對(duì)象:

構(gòu)造函數(shù)實(shí)際上就是一個(gè)函數(shù),只是這個(gè)函數(shù)是專門用來創(chuàng)建對(duì)象的,他的特點(diǎn):

1.構(gòu)造函數(shù)首字母大寫,為了區(qū)分普通函數(shù);

2.不需要?jiǎng)?chuàng)建對(duì)象,屬性和方法直接添加在this上,不需要return返回

3.構(gòu)造函數(shù)調(diào)用時(shí),一定要使用new;

  1. // 1.聲明構(gòu)造函數(shù) 
  2.         function Teacher(name, age, sex){ 
  3.             // 添加屬性 
  4.             this.name = name; 
  5.             this.age = age; 
  6.             this.sex = sex; 
  7.             // 添加方法 
  8.             this.skill = function(){ 
  9.                 console.log('布置作業(yè)'); 
  10.             } 
  11.         } 
  12.  
  13.         // 2.實(shí)例化對(duì)象 
  14.         var t1 = new Teacher('小王',20,'girl'); 
  15.         console.log(t1); 
  16.         t1.skill(); // 布置作業(yè) 
  17.  
  18.         var t2 = new Teacher('小李', 25, 'boy'); 
  19.         console.log(t2); 
  20.         t2.skill(); // 布置作業(yè) 

我們需要明確 new操作符做了什么?

1.隱式的創(chuàng)建了一個(gè)對(duì)象;

2.讓this指向這個(gè)空對(duì)象;

3.讓實(shí)例對(duì)象的__ proto __指向構(gòu)造函數(shù)的prototype;

4.執(zhí)行代碼,給this添加屬性和方法;

5.隱式的返回創(chuàng)建好的對(duì)象;

所以在使用構(gòu)造函數(shù)創(chuàng)建對(duì)象時(shí)一定要使用new操作符。

使用構(gòu)造函數(shù)創(chuàng)建對(duì)象解決了創(chuàng)建出的對(duì)象指向不明確,構(gòu)造函數(shù)的主要問題就是每個(gè)方法都要在每個(gè)實(shí)例上重新創(chuàng)建一遍。在前面的例子中,t1 和 person2 都有一個(gè)名為 skill()的方法,但那兩個(gè)方法不是同一個(gè) Function 的實(shí)例。創(chuàng)建兩個(gè)完成同樣任務(wù)的 Function 實(shí)例的確沒有必要,我們可以通過代碼證實(shí):

  1. console.log(t1.skill() == t2.skill());  // false-比較的是地址 

原型創(chuàng)建對(duì)象:

我們創(chuàng)建的每個(gè)函數(shù)都有一個(gè) prototype(原型)屬性,這個(gè)屬性是一個(gè)指針,指向一個(gè)對(duì)象, 而這個(gè)對(duì)象的用途是包含可以由特定類型的所有實(shí)例共享的屬性和方法。使用原型對(duì)象的好處是可以 讓所有對(duì)象實(shí)例共享它所包含的屬性和方法。換句話說,不必在構(gòu)造函數(shù)中定義對(duì)象實(shí)例的信息,而是 可以將這些信息直接添加到原型對(duì)象中,如下面的例子所示。

  1. function Stu(){} 
  2.         // 2.添加屬性和方法 
  3.         Stu.prototype.name = '小明'
  4.         Stu.prototype.age = 18
  5.         Stu.prototype.skill = function(){ 
  6.             console.log('沉迷敲代碼'); 
  7.         } 
  8.  
  9.         // 3.實(shí)例化對(duì)象 
  10.         var s1 = new Stu(); 

發(fā)現(xiàn)對(duì)象里邊是空的,打開可以看到所有的屬性和方法都在__proto__原型屬性上

理解原型對(duì)象

無論什么時(shí)候,只要?jiǎng)?chuàng)建了一個(gè)新函數(shù),就會(huì)根據(jù)一組特定的規(guī)則為該函數(shù)創(chuàng)建一個(gè)prototype 屬性,這個(gè)屬性指向函數(shù)的原型對(duì)象。在默認(rèn)情況下,所有原型對(duì)象都會(huì)自動(dòng)獲得一個(gè) constructor (構(gòu)造函數(shù))屬性,這個(gè)屬性包含一個(gè)指向 prototype 屬性所在函數(shù)的指針。

創(chuàng)建了自定義的構(gòu)造函數(shù)之后,其原型對(duì)象默認(rèn)只會(huì)取得 constructor 屬性;當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建一個(gè)新實(shí)例后,該實(shí)例的內(nèi)部將包含一個(gè)指針(內(nèi)部 屬性),指向構(gòu)造函數(shù)的原型對(duì)象。__proto__這個(gè)連接存在于實(shí)例與構(gòu)造函數(shù)的原型對(duì)象之間,而不是存在于實(shí)例與構(gòu)造函數(shù)之間。

針對(duì)上述原型模式創(chuàng)建對(duì)象的代碼,我們可以畫出它的圖例關(guān)系:

文章“【W(wǎng)eb前端基礎(chǔ)知識(shí)】面向?qū)ο笾畡?chuàng)建對(duì)象”已幫助

>>本文地址:http://m.nfbqydst.cn/zhuanye/2021/69434.html

THE END  

聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。

1 您的年齡

2 您的學(xué)歷

3 您更想做哪個(gè)方向的工作?

獲取測試結(jié)果
  • 大前端大前端
  • 大數(shù)據(jù)大數(shù)據(jù)
  • 互聯(lián)網(wǎng)營銷互聯(lián)網(wǎng)營銷
  • JavaJava
  • Linux云計(jì)算Linux
  • Python+人工智能Python
  • 嵌入式物聯(lián)網(wǎng)嵌入式
  • 全域電商運(yùn)營全域電商運(yùn)營
  • 軟件測試軟件測試
  • 室內(nèi)設(shè)計(jì)室內(nèi)設(shè)計(jì)
  • 平面設(shè)計(jì)平面設(shè)計(jì)
  • 電商設(shè)計(jì)電商設(shè)計(jì)
  • 網(wǎng)頁設(shè)計(jì)網(wǎng)頁設(shè)計(jì)
  • 全鏈路UI/UE設(shè)計(jì)UI設(shè)計(jì)
  • VR/AR游戲開發(fā)VR/AR
  • 網(wǎng)絡(luò)安全網(wǎng)絡(luò)安全
  • 新媒體與短視頻運(yùn)營新媒體
  • 直播帶貨直播帶貨
  • 智能機(jī)器人軟件開發(fā)智能機(jī)器人
 

快速通道fast track

近期開班時(shí)間TIME