精准猎取科技资讯,天堂视频在线观看,高效阅读科技新闻_黄色av网站在线免费观看_科技猎

JavaScript中的繼承方式 – WEB前端開發

我是創始人李巖:很抱歉!給自己產品做個廣告,點擊進來看看。  

基于這篇文章的一些名稱約定:

				/*
				* 約定
				*/
				function Fun(){
				// 私有屬性
				var val = 1;        // 私有基本屬性
				var arr = [1];      // 私有引用屬性
				function fun(){}    // 私有函數(引用屬性)
				// 實例屬性
				this.val = 1;               // 實例基本屬性
				this.arr = [1];             // 實例引用屬性
				this.fun = function(){};    // 實例函數(引用屬性)
				}
				// 原型屬性
				Fun.prototype.val = 1;              // 原型基本屬性
				Fun.prototype.arr = [1];            // 原型引用屬性
				Fun.prototype.fun = function(){};   // 原型函數(引用屬性)
			

上面的約定應該是比較合理的,如果難以理解,可以查看 黯羽輕揚:JS學習筆記2_面向對象 ,了解更多的基本常識

一.簡單原型鏈

這是實現繼承最簡單的方式了,真的超簡單,核心就一句話(在代碼中用注釋標明了)

1.具體實現

				function Super(){
				this.val = 1;
				this.arr = [1];
				}
				function Sub(){
				// ...
				}
				Sub.prototype = new Super();    // 核心
				var sub1 = new Sub();
				var sub2 = new Sub();
				sub1.val = 2;
				sub1.arr.push(2);
				alert(sub1.val);    // 2
				alert(sub2.val);    // 1
				alert(sub1.arr);    // 1, 2
				alert(sub2.arr);    // 1, 2
			

2.核心

拿父類實例來充當子類原型對象

3.優缺點

優點:

  1. 簡單,易于實現

缺點:

  1. 修改sub1.arr后sub2.arr也變了,因為來自原型對象的引用屬性是所有實例共享的。

    可以這樣理解:執行sub1.arr.push(2);先對sub1進行屬性查找,找遍了實例屬性(在本例中沒有實例屬性),沒找到,就開始順著原型鏈向上找,拿到了sub1的原型對象,一搜身,發現有arr屬性。于是給arr末尾插入了2,所以sub2.arr也變了

  2. 創建子類實例時,無法向父類構造函數傳參

二.借用構造函數

簡單原型鏈真夠簡單,可是存在2個致命缺點簡直不能用,于是上個世紀末的jsers就想辦法fix這2個缺陷,然后出現了借用構造函數方式

1.具體實現

				function Super(val){
				this.val = val;
				this.arr = [1];
				this.fun = function(){
				// ...
				}
				}
				function Sub(val){
				Super.call(this, val);   // 核心
				// ...
				}
				var sub1 = new Sub(1);
				var sub2 = new Sub(2);
				sub1.arr.push(2);
				alert(sub1.val);    // 1
				alert(sub2.val);    // 2
				alert(sub1.arr);    // 1, 2
				alert(sub2.arr);    // 1
				alert(sub1.fun === sub2.fun);   // false
			

2.核心

借父類的構造函數來增強子類實例 ,等于是把父類的實例屬性復制了一份給子類實例裝上了(完全沒有用到原型)

3.優缺點

優點:

  1. 解決了子類實例共享父類引用屬性的問題
  2. 創建子類實例時,可以向父類構造函數傳參

P.S.前輩就這么高效,兩個缺陷瞬間修復

缺點:

  1. 無法實現函數復用,每個子類實例都持有一個新的fun函數,太多了就會影響性能,內存爆炸。。

P.S.好吧,剛修復了共享引用屬性的問題,又出現了這個新問題。。

三.組合繼承(最常用)

目前我們的借用構造函數方式還是有問題(無法實現函數復用),沒關系,接著修復,jsers吭哧吭哧又搞出了組合繼承

1.具體實現

				function Super(){
				// 只在此處聲明基本屬性和引用屬性
				this.val = 1;
				this.arr = [1];
				}
				//  在此處聲明函數
				Super.prototype.fun1 = function(){};
				Super.prototype.fun2 = function(){};
				//Super.prototype.fun3...
				function Sub(){
				Super.call(this);   // 核心
				// ...
				}
				Sub.prototype = new Super();    // 核心
				var sub1 = new Sub(1);
				var sub2 = new Sub(2);
				alert(sub1.fun === sub2.fun);   // true
			

2.核心

把實例函數都放在原型對象上,以實現函數復用。同時還要保留借用構造函數方式的優點 ,通過Super.call(this);繼承父類的基本屬性和引用屬性并保留能傳參的優點;通過Sub.prototype = new Super();繼承父類函數,實現函數復用

3.優缺點

優點:

  1. 不存在引用屬性共享問題
  2. 可傳參
  3. 函數可復用

缺點:

  1. (一點小瑕疵)子類原型上有一份多余的父類實例屬性,因為父類構造函數被調用了兩次,生成了兩份,而子類實例上的那一份屏蔽了子類原型上的。。。又是內存浪費,比剛才情況好點,不過確實是瑕疵

P.S.如果無法理解這個”多余“,可以查看 黯羽輕揚:JS學習筆記2_面向對象 ,文章末尾有更詳細的解釋

四.寄生組合繼承(最佳方式)

從名字就能看出又是對組合繼承的優化,不是說組合繼承有瑕疵嗎,沒關系,我們接著追求完美

1.具體實現

				function beget(obj){   // 生孩子函數 beget:龍beget龍,鳳beget鳳。
				var F = function(){};
				F.prototype = obj;
				return new F();
				}
				function Super(){
				// 只在此處聲明基本屬性和引用屬性
				this.val = 1;
				this.arr = [1];
				}
				//  在此處聲明函數
				Super.prototype.fun1 = function(){};
				Super.prototype.fun2 = function(){};
				//Super.prototype.fun3...
				function Sub(){
				Super.call(this);   // 核心
				// ...
				}
				var proto = beget(Super.prototype); // 核心
				proto.constructor = Sub;            // 核心
				Sub.prototype = proto;              // 核心
				var sub = new Sub();
				alert(sub.val);
				alert(sub.arr);
			

P.S.等等,生孩子函數是啥東西,怎么沒聽過?還有標明了核心的3句話,怎么沒看明白?別著急,我們喝杯茶接著看

2.核心

用beget(Super.prototype); 切掉了原型對象上多余的那份父類實例屬性

P.S.啥?沒看明白?哦哦~,忘記說原型式和寄生式繼承了,就說怎么總覺得忘了鎖門。。這記性

P.S.寄生組合式繼承,這名字不是很貼切,和寄生式繼承關系并不是特別大

3.優缺點

優點:完美了

缺點:理論上沒有了(如果用起來麻煩不算缺點的話。。)

P.S.用起來麻煩是一方面,另一方面是因為寄生組合式繼承出現的比較晚,是21世紀初的東西,大家等不起這么久,所以組合繼承是最常用的,而這個理論上完美的方案卻只是課本上的最佳方式了

五.原型式

其實介紹完上面的完美方案就可以結束了,但從組合繼承到完美方案好像有一段不小的思維跳躍,有必要把故事說清楚

1.具體實現

				function beget(obj){   // 生孩子函數 beget:龍beget龍,鳳beget鳳。
				var F = function(){};
				F.prototype = obj;
				return new F();
				}
				function Super(){
				this.val = 1;
				this.arr = [1];
				}
				// 拿到父類對象
				var sup = new Super();
				// 生孩子
				var sub = beget(sup);   // 核心
				// 增強
				sub.attr1 = 1;
				sub.attr2 = 2;
				//sub.attr3...
				alert(sub.val);     // 1
				alert(sub.arr);     // 1
				alert(sub.attr1);   // 1
			

P.S.誒~看到了沒,生孩子函數beget出現了

2.核心

用生孩子函數得到 得到一個“純潔”的新對象(“純潔”是因為沒有實例屬性),再逐步增強之(填充實例屬性)

P.S.ES5提供了Object.create()函數,內部就是原型式繼承,IE9+支持

3.優缺點

優點:

  1. 從已有對象衍生新對象,不需要創建自定義類型(更像是對象復制,而不是繼承。。)

缺點:

  1. 原型引用屬性會被所有實例共享,因為是用整個父類對象來充當了子類原型對象,所以這個缺陷無可避免
  2. 無法實現代碼復用(新對象是現取的,屬性是現添的,都沒用函數封裝,怎么復用)

P.S.這東西和繼承有很大關系嗎?為什么尼古拉斯把它也列為實現繼承的一種方式?關系不大,但有一定關系

六.寄生式

這名字太扯了,而且 寄生式是一種模式(套路) ,并不是只能用來實現繼承

1.具體實現

				function beget(obj){   // 生孩子函數 beget:龍beget龍,鳳beget鳳。
				var F = function(){};
				F.prototype = obj;
				return new F();
				}
				function Super(){
				this.val = 1;
				this.arr = [1];
				}
				function getSubObject(obj){
				// 創建新對象
				var clone = beget(obj); // 核心
				// 增強
				clone.attr1 = 1;
				clone.attr2 = 2;
				//clone.attr3...
				return clone;
				}
				var sub = getSubObject(new Super());
				alert(sub.val);     // 1
				alert(sub.arr);     // 1
				alert(sub.attr1);   // 1
			

2.核心

給原型式繼承穿了個馬甲而已 ,看起來更像繼承了(上面介紹的原型式繼承更像是對象復制)

注意 :beget函數并不是必須的,換言之,創建新對象 -> 增強 -> 返回該對象,這樣的過程叫寄生式繼承,新對象是如何創建的并不重要(用beget生的,new出來的,字面量現做的。。都可以)

3.優缺點

優點:

  1. 還是不需要創建自定義類型

缺點:

  1. 無法實現函數復用(沒用到原型,當然不行)

P.S.劇情解析:有缺陷的寄生式繼承 + 不完美的組合繼承 = 完美的寄生組合式繼承,不妨 回去找找 看哪里用到了寄生

七.6種繼承方式的聯系

繼承

P.S.虛線表示輔助作用,實線表示決定性作用

轉載自: http://www.ayqy.net/blog/%E9%87%8D%E6%96%B0%E7%90%86%E8%A7%A3js%E7%9A%846%E7%A7%8D%E7%BB%A7%E6%89%BF%E6%96%B9%E5%BC%8F/

隨意打賞

提交建議
微信掃一掃,分享給好友吧。
主站蜘蛛池模板: 生鲜配送系统-蔬菜食材配送管理系统-连锁餐饮订货配送软件-挪挪生鲜供应链管理软件 | CTAB,表面活性剂1631溴型(十六烷基三甲基溴化铵)-上海升纬化工原料有限公司 | 步进驱动器「一体化」步进电机品牌厂家-一体式步进驱动 | 许昌奥仕达自动化设备有限公司| 真空上料机(一种真空输送机)-百科 | 磁力链接搜索神器_BT磁力狗_CILIMAO磁力猫_高效磁力搜索引擎2024 | 上海赞永| 订做不锈钢_不锈钢定做加工厂_不锈钢非标定制-重庆侨峰金属加工厂 | 阴离子_阳离子聚丙烯酰胺厂家_聚合氯化铝价格_水处理絮凝剂_巩义市江源净水材料有限公司 | 中国品牌门窗网_中国十大门窗品牌_著名门窗品牌 | 深圳天际源广告-形象堆头,企业文化墙,喷绘,门头招牌设计制作专家 | 奇酷教育-Python培训|UI培训|WEB大前端培训|Unity3D培训|HTML5培训|人工智能培训|JAVA开发的教育品牌 | 铆钉机|旋铆机|东莞旋铆机厂家|鸿佰专业生产气压/油压/自动铆钉机 | 低粘度纤维素|混凝土灌浆料|有机硅憎水粉|聚羧酸减水剂-南京斯泰宝 | 电主轴,车床电磨头,变频制动电机-博山鸿达特种电机 | 青州开防盗门锁-配汽车芯片钥匙-保险箱钥匙-吉祥修锁店 | 电采暖锅炉_超低温空气源热泵_空气源热水器-鑫鲁禹电锅炉空气能热泵厂家 | 品牌广告服务平台,好排名,好流量,好生意。 | 南京租车,南京汽车租赁,南京包车,南京会议租车-南京七熹租车 | 浴室柜-浴室镜厂家-YINAISI · 意大利设计师品牌 | 咿耐斯 |-浙江台州市丰源卫浴有限公司 | 胜为光纤光缆_光纤跳线_单模尾纤_光纤收发器_ODF光纤配线架厂家直销_北京睿创胜为科技有限公司 - 北京睿创胜为科技有限公司 | 节流截止放空阀-不锈钢阀门-气动|电动截止阀-鸿华阀门有限公司 | 液氮罐_液氮容器_自增压液氮罐_杜瓦瓶_班德液氮罐厂家 | 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | 订做不锈钢_不锈钢定做加工厂_不锈钢非标定制-重庆侨峰金属加工厂 | 连续油炸机,全自动油炸机,花生米油炸机-烟台茂源食品机械制造有限公司 | 存包柜厂家_电子存包柜_超市存包柜_超市电子存包柜_自动存包柜-洛阳中星 | 浙江栓钉_焊钉_剪力钉厂家批发_杭州八建五金制造有限公司 | 不锈钢螺丝 - 六角螺丝厂家 - 不锈钢紧固件 - 万千紧固件--紧固件一站式采购 | HEYL硬度计量泵-荧光法在线溶解氧仪-净时测控技术(上海)有限公司 | 换网器_自动换网器_液压换网器--郑州海科熔体泵有限公司 | 安规_综合测试仪,电器安全性能综合测试仪,低压母线槽安规综合测试仪-青岛合众电子有限公司 | 无锡网站建设_小程序制作_网站设计公司_无锡网络公司_网站制作 | 黑龙江「京科脑康」医院-哈尔滨失眠医院_哈尔滨治疗抑郁症医院_哈尔滨精神心理医院 | 电缆隧道在线监测-智慧配电站房-升压站在线监测-江苏久创电气科技有限公司 | 扬子叉车厂家_升降平台_电动搬运车|堆高车-扬子仓储叉车官网 | 单螺旋速冻机-双螺旋-流态化-隧道式-食品速冻机厂家-广州冰泉制冷 | 合肥网络推广_合肥SEO网站优化-安徽沃龙First | 包装盒厂家_纸盒印刷_礼品盒定制-济南恒印包装有限公司 | 臭氧老化试验箱,高低温试验箱,恒温恒湿试验箱,防水试验设备-苏州亚诺天下仪器有限公司 | 江苏远邦专注皮带秤,高精度皮带秤,电子皮带秤研发生产 |