实战IT培训机构_黄色激情网站_IT培训班选大学生IT技术培训中心_黄色激情视频网站_中公优就业

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

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

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

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

ECMA把對象定義為:“無序?qū)傩缘募希鋵傩钥梢园局怠ο蠡蛘吆瘮?shù)。對象的每個屬性或方法都有一個名字,而每個名字都映射到一個值。

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

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

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

  1. // 工廠模式實際上就是封裝函數(shù) 
  2.         function createStar(name, age, sex){ 
  3.             // 1.創(chuàng)建一個空對象(原材料) 
  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.返回出對象(出廠) 
  16.             return obj 
  17.         } 
  18.  
  19.         // 創(chuàng)建對象 
  20.         var star1 = createStar('何美男',25,'boy'); 
  21.         console.log(star1); 
  22.         star1.skill();  // sing dance 

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

使用工廠模式創(chuàng)建對象雖然可以實現(xiàn)批量創(chuàng)建對象,但是卻出現(xiàn)了新的問題,即創(chuàng)建出的對象指向不明確。使用instanceof操作符檢測對象類型時,都是屬于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)建對象:

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

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

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

3.構(gòu)造函數(shù)調(diào)用時,一定要使用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.實例化對象 
  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)建了一個對象;

2.讓this指向這個空對象;

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

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

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

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

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

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

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

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

  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.實例化對象 
  10.         var s1 = new Stu(); 

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

理解原型對象

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

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

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

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

更多內(nèi)容

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

THE END  

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

1 您的年齡

2 您的學(xué)歷

3 您更想做哪個方向的工作?

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

快速通道fast track

近期開班時間TIME

主站蜘蛛池模板: 三氯异氰尿酸-二氯-三氯-二氯异氰尿酸钠-优氯净-强氯精-消毒片-济南中北_优氯净厂家 | 铝板冲孔网,不锈钢冲孔网,圆孔冲孔网板,鳄鱼嘴-鱼眼防滑板,盾构走道板-江拓数控冲孔网厂-河北江拓丝网有限公司 | 华中线缆有限公司-电缆厂|电缆厂家|电线电缆厂家 | 广州办公室设计,办公室装修,写字楼设计,办公室装修公司_德科 | 浙江华锤电器有限公司_地磅称重设备_防作弊地磅_浙江地磅售后维修_无人值守扫码过磅系统_浙江源头地磅厂家_浙江工厂直营地磅 | 药品/药物稳定性试验考察箱-埃里森仪器设备(上海)有限公司 | 除尘布袋_液体过滤袋_针刺毡滤料-杭州辉龙过滤技术有限公司 | 吹塑加工_大型吹塑加工_滚塑代加工-莱力奇吹塑加工有限公司 | 高柔性拖链电缆-聚氨酯卷筒电缆-柔性屏蔽电缆厂家-玖泰电缆 | ★济南领跃标识制作公司★济南标识制作,标牌制作,山东标识制作,济南标牌厂 | 搜木网 - 木业全产业链交易平台,免费搜货、低价买货! | 液压油缸-液压站生产厂家-洛阳泰诺液压科技有限公司 | 电地暖-电采暖-发热膜-石墨烯电热膜品牌加盟-暖季地暖厂家 | 低噪声电流前置放大器-SR570电流前置放大器-深圳市嘉士达精密仪器有限公司 | 无锡网站建设_小程序制作_网站设计公司_无锡网络公司_网站制作 | 不锈钢法兰-碳钢法兰-法兰盘生产加工厂家-[鼎捷峰]-不锈钢法兰-碳钢法兰-法兰盘生产加工厂家-[鼎捷峰] | 哈希余氯测定仪,分光光度计,ph在线监测仪,浊度测定仪,试剂-上海京灿精密机械有限公司 | pbt头梳丝_牙刷丝_尼龙毛刷丝_PP塑料纤维合成毛丝定制厂_广州明旺 | 步进_伺服_行星减速机,微型直流电机,大功率直流电机-淄博冠意传动机械 | 真空乳化机-灌装封尾机-首页-温州精灌 | 车辆定位管理系统_汽车GPS系统_车载北斗系统 - 朗致物联 | 南京蜂窝纸箱_南京木托盘_南京纸托盘-南京博恒包装有限公司 | 河南卓美创业科技有限公司-河南卓美防雷公司-防雷接地-防雷工程-重庆避雷针-避雷器-防雷检测-避雷带-避雷针-避雷塔、机房防雷、古建筑防雷等-山西防雷公司 | 超声波清洗机-超声波清洗设备定制生产厂家 - 深圳市冠博科技实业有限公司 | 扬尘在线监测系统_工地噪声扬尘检测仪_扬尘监测系统_贝塔射线扬尘监测设备「风途物联网科技」 | 预制围墙_工程预制围墙_天津市瑞通建筑材料有限公司 | 有源电力滤波装置-电力有源滤波器-低压穿排电流互感器|安科瑞 | 一体化隔油提升设备-餐饮油水分离器-餐厨垃圾处理设备-隔油池-盐城金球环保产业发展有限公司 | 磁力去毛刺机_去毛刺磁力抛光机_磁力光饰机_磁力滚抛机_精密金属零件去毛刺机厂家-冠古科技 | 考勤系统_考勤管理系统_网络考勤软件_政企|集团|工厂复杂考勤工时统计排班管理系统_天时考勤 | 上海办公室装修,办公楼装修设计,办公空间设计,企业展厅设计_写艺装饰公司 | 北京浩云律师事务所-法律顾问_企业法务_律师顾问_公司顾问 | 希望影视-高清影视vip热播电影电视剧免费在线抢先看 | 定量包装秤,吨袋包装称,伸缩溜管,全自动包装秤,码垛机器人,无锡市邦尧机械工程有限公司 | 合肥花魁情感婚姻咨询中心_挽回爱情_修复婚姻_恋爱指南 | 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 - 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 | 亚克力制品定制,上海嘉定有机玻璃加工制作生产厂家—官网 | 广州展台特装搭建商|特装展位设计搭建|展会特装搭建|特装展台制作设计|展览特装公司 | 神超官网_焊接圆锯片_高速钢锯片_硬质合金锯片_浙江神超锯业制造有限公司 | 网站建设-网站制作-网站设计-网站开发定制公司-网站SEO优化推广-咏熠软件 | 淋巴细胞分离液_口腔医疗器材-精欣华医疗器械(无锡)有限公司 |