实战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://www.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

主站蜘蛛池模板: 冰晶石|碱性嫩黄闪蒸干燥机-有机垃圾烘干设备-草酸钙盘式干燥机-常州市宝康干燥 | 艾默生变频器,艾默生ct,变频器,ct驱动器,广州艾默生变频器,供水专用变频器,风机变频器,电梯变频器,艾默生变频器代理-广州市盟雄贸易有限公司官方网站-艾默生变频器应用解决方案服务商 | 耐热钢-耐磨钢-山东聚金合金钢铸造有限公司 | 柔软云母板-硬质-水位计云母片组件-首页-武汉长丰云母绝缘材料有限公司 | 酒精检测棒,数显温湿度计,酒安酒精测试仪,酒精检测仪,呼气式酒精检测仪-郑州欧诺仪器有限公司 | 真空包装机-诸城市坤泰食品机械有限公司 | 纸塑分离机-纸塑分离清洗机设备-压力筛-碎浆机厂家金双联环保 | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库 | 开云(中国)Kaiyun·官方网站 - 登录入口 | 双效节能浓缩器-热回流提取浓缩机组-温州市利宏机械 | 混合气体腐蚀试验箱_盐雾/硫化氢/气体腐蚀试验箱厂家-北京中科博达 | 布袋除尘器-单机除尘器-脉冲除尘器-泊头市兴天环保设备有限公司 布袋除尘器|除尘器设备|除尘布袋|除尘设备_诺和环保设备 | 户外环保不锈钢垃圾桶_标识标牌制作_园林公园椅厂家_花箱定制-北京汇众环艺 | 金环宇|金环宇电线|金环宇电缆|金环宇电线电缆|深圳市金环宇电线电缆有限公司|金环宇电缆集团 | 服务器之家 - 专注于服务器技术及软件下载分享 | 净化车间装修_合肥厂房无尘室设计_合肥工厂洁净工程装修公司-安徽盛世和居装饰 | 铣刨料沥青破碎机-沥青再生料设备-RAP热再生混合料破碎筛分设备 -江苏锡宝重工 | 哈尔滨治「失眠/抑郁/焦虑症/精神心理」专科医院排行榜-京科脑康免费咨询 一对一诊疗 | 台式恒温摇床价格_大容量恒温摇床厂家-上海量壹科学仪器有限公司 | 天津蒸汽/热水锅炉-电锅炉安装维修直销厂家-天津鑫淼暖通设备有限公司 | RTO换向阀_VOC高温阀门_加热炉切断阀_双偏心软密封蝶阀_煤气蝶阀_提升阀-湖北霍科德阀门有限公司 | 培训中心-海南香蕉蛋糕加盟店技术翰香原中心官网总部 | 隐形纱窗|防护纱窗|金刚网防盗纱窗|韦柏纱窗|上海青木装潢制品有限公司|纱窗国标起草单位 | 烘干设备-热泵烘干机_广东雄贵能源设备有限公司 | 真空上料机(一种真空输送机)-百科 | 变色龙PPT-国内原创PPT模板交易平台 - PPT贰零 - 西安聚讯网络科技有限公司 | 长沙中央空调维修,中央空调清洗维保,空气能热水工程,价格,公司就找维小保-湖南维小保环保科技有限公司 | 洛阳装修公司-洛阳整装一站式品牌-福尚云宅装饰 | 伊卡洛斯软装首页-电动窗帘,别墅窗帘,定制窗帘,江浙沪1000+别墅窗帘案例 | 浙江红酒库-冰雕库-气调库-茶叶库安装-医药疫苗冷库-食品物流恒温恒湿车间-杭州领顺实业有限公司 | 禹城彩钢厂_钢结构板房_彩钢复合板-禹城泰瑞彩钢复合板加工厂 | Brotu | 关注AI,Web3.0,VR/AR,GPT,元宇宙区块链数字产业 | 真空泵厂家_真空泵机组_水环泵_旋片泵_罗茨泵_耐腐蚀防爆_中德制泵 | 岛津二手液相色谱仪,岛津10A液相,安捷伦二手液相,安捷伦1100液相-杭州森尼欧科学仪器有限公司 | 湖南教师资格网-湖南教师资格证考试网 | 3d可视化建模_三维展示_产品3d互动数字营销_三维动画制作_3D虚拟商城 【商迪3D】三维展示服务商 广东健伦体育发展有限公司-体育工程配套及销售运动器材的体育用品服务商 | 广州二手电缆线回收,旧电缆回收,广州铜线回收-广东益福电缆线回收公司 | 亚洲工业智能制造领域专业门户网站 - 亚洲自动化与机器人网 | 派财经_聚焦数字经济内容服务平台 | 欧美日韩国产一区二区三区不_久久久久国产精品无码不卡_亚洲欧洲美洲无码精品AV_精品一区美女视频_日韩黄色性爱一级视频_日本五十路人妻斩_国产99视频免费精品是看4_亚洲中文字幕无码一二三四区_国产小萍萍挤奶喷奶水_亚洲另类精品无码在线一区 | 电机修理_二手电机专家-河北豫通机电设备有限公司(原石家庄冀华高压电机维修中心) |