实战IT培训机构_IT培训班选大学生IT技术培训中心_中公优就业

400-650-7353
您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】面向對象之創建對象

【Web前端基礎知識】面向對象之創建對象

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

面向對象的語言有一個標志,那就是它們都有類的概念,而通過類可 以創建任意多個具有相同屬性和方法的對象。前面提到過,ECMAScript 中沒有類的概念,因此它的對象也與基于類的語言中的對象有所不同。

ECMA把對象定義為:“無序屬性的集合,其屬性可以包含基本值、對象或者函數。對象的每個屬性或方法都有一個名字,而每個名字都映射到一個值。

我們之前在學習創建對象時,使用字面量方式和Object構造函數的方式都可以進行創建對象,但是我們也發現了這兩種方式只適合用來創建單個對象,想要創建大量對象時,一份代碼就要書寫多次,顯然的產生了代碼冗余。接下來來介紹幾種其他創建對象的方式。

工廠模式創建對象:

上面我們說使用Object構造函數的方式進行創建多個對象時,會產生大量重復代碼,那自然而然我們就會想到將重復性的代碼封裝成為一個函數,這個函數就是工廠函數。

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

【Web前端基礎知識】面向對象之創建對象

使用工廠模式創建對象雖然可以實現批量創建對象,但是卻出現了新的問題,即創建出的對象指向不明確。使用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 

構造函數創建對象:

構造函數實際上就是一個函數,只是這個函數是專門用來創建對象的,他的特點:

1.構造函數首字母大寫,為了區分普通函數;

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

3.構造函數調用時,一定要使用new;

  1. // 1.聲明構造函數 
  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('布置作業'); 
  10.             } 
  11.         } 
  12.  
  13.         // 2.實例化對象 
  14.         var t1 = new Teacher('小王',20,'girl'); 
  15.         console.log(t1); 
  16.         t1.skill(); // 布置作業 
  17.  
  18.         var t2 = new Teacher('小李', 25, 'boy'); 
  19.         console.log(t2); 
  20.         t2.skill(); // 布置作業 

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

1.隱式的創建了一個對象;

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

3.讓實例對象的__ proto __指向構造函數的prototype;

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

5.隱式的返回創建好的對象;

所以在使用構造函數創建對象時一定要使用new操作符。

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

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

原型創建對象:

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

  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(); 

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

理解原型對象

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

創建了自定義的構造函數之后,其原型對象默認只會取得 constructor 屬性;當調用構造函數創建一個新實例后,該實例的內部將包含一個指針(內部 屬性),指向構造函數的原型對象。__proto__這個連接存在于實例與構造函數的原型對象之間,而不是存在于實例與構造函數之間。

針對上述原型模式創建對象的代碼,我們可以畫出它的圖例關系:

文章“【Web前端基礎知識】面向對象之創建對象”已幫助

更多內容

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

THE END  

聲明:本站稿件版權均屬中公教育優就業所有,未經許可不得擅自轉載。

1 您的年齡

2 您的學歷

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

獲取測試結果
  • 大前端大前端
  • 大數據大數據
  • 互聯網營銷互聯網營銷
  • JavaJava
  • Linux云計算Linux
  • Python+人工智能Python
  • 嵌入式物聯網嵌入式
  • 全域電商運營全域電商運營
  • 軟件測試軟件測試
  • 室內設計室內設計
  • 平面設計平面設計
  • 電商設計電商設計
  • 網頁設計網頁設計
  • 全鏈路UI/UE設計UI設計
  • VR/AR游戲開發VR/AR
  • 網絡安全網絡安全
  • 新媒體與短視頻運營新媒體
  • 直播帶貨直播帶貨
  • 智能機器人軟件開發智能機器人
 

快速通道fast track

近期開班時間TIME

主站蜘蛛池模板: 多功能真空滤油机_润滑油全自动滤油机_高效真空滤油机价格-重庆润华通驰 | 包装设计公司,产品包装设计|包装制作,包装盒定制厂家-汇包装【官方网站】 | PU树脂_水性聚氨酯树脂_聚氨酯固化剂_聚氨酯树脂厂家_宝景化工 | 除湿机|工业除湿机|抽湿器|大型地下室车间仓库吊顶防爆除湿机|抽湿烘干房|新风除湿机|调温/降温除湿机|恒温恒湿机|加湿机-杭州川田电器有限公司 | 首页|专注深圳注册公司,代理记账报税,注册商标代理,工商变更,企业400电话等企业一站式服务-慧用心 | 游戏版号转让_游戏资质出售_游戏公司转让-【八九买卖网】 | 电解抛光加工_不锈钢电解抛光_常州安谱金属制品有限公司 | 切铝机-数控切割机-型材切割机-铝型材切割机-【昆山邓氏精密机械有限公司】 | 致胜管家软件服务【在线免费体验】 | 锂电混合机-新能源混合机-正极材料混料机-高镍,三元材料混料机-负极,包覆混合机-贝尔专业混合混料搅拌机械系统设备厂家 | SPC工作站-连杆综合检具-表盘气动量仪-内孔缺陷检测仪-杭州朗多检测仪器有限公司 | 船用烟火信号弹-CCS防汛救生圈-船用救生抛绳器(海威救生设备) | 精密机械零件加工_CNC加工_精密加工_数控车床加工_精密机械加工_机械零部件加工厂 | 上海办公室装修,办公楼装修设计,办公空间设计,企业展厅设计_写艺装饰公司 | 珠海白蚁防治_珠海灭鼠_珠海杀虫灭鼠_珠海灭蟑螂_珠海酒店消杀_珠海工厂杀虫灭鼠_立净虫控防治服务有限公司 | 幂简集成 - 品种超全的API接口平台, 一站搜索、试用、集成国内外API接口 | 浙江寺庙设计-杭州寺院设计-宁波寺庙规划_汉匠 | 玉米深加工机械,玉米加工设备,玉米加工机械等玉米深加工设备制造商-河南成立粮油机械有限公司 | 报警器_家用防盗报警器_烟雾报警器_燃气报警器_防盗报警系统厂家-深圳市刻锐智能科技有限公司 | 电杆荷载挠度测试仪-电杆荷载位移-管桩测试仪-北京绿野创能机电设备有限公司 | 上海赞永| 济宁工业提升门|济宁电动防火门|济宁快速堆积门-济宁市统一电动门有限公司 | 【365公司转让网】公司求购|转让|资质买卖_股权转让交易平台 | 存包柜厂家_电子存包柜_超市存包柜_超市电子存包柜_自动存包柜-洛阳中星 | 根系分析仪,大米外观品质检测仪,考种仪,藻类鉴定计数仪,叶面积仪,菌落计数仪,抑菌圈测量仪,抗生素效价测定仪,植物表型仪,冠层分析仪-杭州万深检测仪器网 | 青岛空压机,青岛空压机维修/保养,青岛空压机销售/出租公司,青岛空压机厂家电话 | 成都办公室装修-办公室设计-写字楼装修设计-厂房装修-四川和信建筑装饰工程有限公司 | 集菌仪厂家_全封闭_封闭式_智能智能集菌仪厂家-上海郓曹 | 精密模具-双色注塑模具加工-深圳铭洋宇通 | 粉末冶金注射成型厂家|MIM厂家|粉末冶金齿轮|MIM零件-深圳市新泰兴精密科技 | 【孔氏陶粒】建筑回填陶粒-南京/合肥/武汉/郑州/重庆/成都/杭州陶粒厂家 | 锂电叉车,电动叉车_厂家-山东博峻智能科技有限公司 | 基业箱_环网柜_配电柜厂家_开关柜厂家_开关断路器-东莞基业电气设备有限公司 | 数控专用机床,专用机床,自动线,组合机床,动力头,自动化加工生产线,江苏海鑫机床有限公司 | 洛阳防爆合格证办理-洛阳防爆认证机构-洛阳申请国家防爆合格证-洛阳本安防爆认证代办-洛阳沪南抚防爆电气技术服务有限公司 | 层流手术室净化装修-检验科ICU改造施工-华锐净化工程-特殊科室建设厂家 | 数控车床-立式加工中心-多功能机床-小型车床-山东临沂金星机床有限公司 | 除尘布袋_液体过滤袋_针刺毡滤料-杭州辉龙过滤技术有限公司 | ★济南领跃标识制作公司★济南标识制作,标牌制作,山东标识制作,济南标牌厂 | 工业胀紧套_万向节联轴器_链条-规格齐全-型号选购-非标订做-厂家批发价格-上海乙谛精密机械有限公司 | 高温高压釜(氢化反应釜)百科|