电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

JS繼承實現方法及優缺點詳解

瀏覽:88日期:2024-04-22 13:27:47

前言

JS作為面向對象的弱類型語言,繼承也是其非常強大的特性之一。那么如何在JS中實現繼承呢?讓我們拭目以待。

JS繼承的實現方式

既然要實現繼承,那么首先我們得有一個父類,代碼如下:

// 定義一個動物類function Animal (name) { // 屬性 this.name = name || ’Animal’; // 實例方法 this.sleep = function(){ console.log(this.name + ’正在睡覺!’); }}// 原型方法Animal.prototype.eat = function(food) { console.log(this.name + ’正在吃:’ + food);};

1、原型鏈繼承

核心: 將父類的實例作為子類的原型

function Cat(){ }Cat.prototype = new Animal();Cat.prototype.name = ’cat’;// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.eat(’fish’));console.log(cat.sleep());console.log(cat instanceof Animal); //true console.log(cat instanceof Cat); //true

特點:

非常純粹的繼承關系,實例是子類的實例,也是父類的實例 父類新增原型方法/原型屬性,子類都能訪問到 簡單,易于實現

缺點:

要想為子類新增屬性和方法,必須要在new Animal()這樣的語句之后執行,不能放到構造器中

無法實現多繼承

來自原型對象的所有屬性被所有實例共享(來自原型對象的引用屬性是所有實例共享的)(詳細請看附錄代碼: 示例1)創建子類實例時,無法向父類構造函數傳參

推薦指數:★★(3、4兩大致命缺陷)

2017-8-17 10:21:43補充:感謝 MMHS 指出。缺點1中描述有誤:可以在Cat構造函數中,為Cat實例增加實例屬性。如果要新增原型屬性和方法,則必須放在new Animal()這樣的語句之后執行。

2018-9-10 00:03:45補充:感謝 IRVING_J 指出。缺點3中的描述不夠充分。更正為:來自原型對象的所有屬性被所有實例共享。

2、構造繼承

核心:使用父類的構造函數來增強子類實例,等于是復制父類的實例屬性給子類(沒用到原型)

function Cat(name){ Animal.call(this); this.name = name || ’Tom’;}// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // falseconsole.log(cat instanceof Cat); // true

特點:

解決了1中,子類實例共享父類引用屬性的問題 創建子類實例時,可以向父類傳遞參數 可以實現多繼承(call多個父類對象)

缺點:

實例并不是父類的實例,只是子類的實例 只能繼承父類的實例屬性和方法,不能繼承原型屬性/方法 無法實現函數復用,每個子類都有父類實例函數的副本,影響性能

推薦指數:★★(缺點3)

3、實例繼承

核心:為父類實例添加新特性,作為子類實例返回

function Cat(name){ var instance = new Animal(); instance.name = name || ’Tom’; return instance;}// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // trueconsole.log(cat instanceof Cat); // false

特點:

不限制調用方式,不管是new 子類()還是子類(),返回的對象具有相同的效果

缺點:

實例是父類的實例,不是子類的實例 不支持多繼承

推薦指數:★★

4、拷貝繼承

function Cat(name){ var animal = new Animal(); for(var p in animal){ Cat.prototype[p] = animal[p]; } Cat.prototype.name = name || ’Tom’;}// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // falseconsole.log(cat instanceof Cat); // true

特點:

支持多繼承

缺點:

效率較低,內存占用高(因為要拷貝父類的屬性) 無法獲取父類不可枚舉的方法(不可枚舉方法,不能使用for in 訪問到)

推薦指數:★(缺點1)

5、組合繼承

核心:通過調用父類構造,繼承父類的屬性并保留傳參的優點,然后通過將父類實例作為子類原型,實現函數復用

function Cat(name){ Animal.call(this); this.name = name || ’Tom’;}Cat.prototype = new Animal();// 感謝 @學無止境c 的提醒,組合繼承也是需要修復構造函數指向的。Cat.prototype.constructor = Cat;// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // trueconsole.log(cat instanceof Cat); // true

特點:

彌補了方式2的缺陷,可以繼承實例屬性/方法,也可以繼承原型屬性/方法 既是子類的實例,也是父類的實例 不存在引用屬性共享問題 可傳參 函數可復用

缺點:

調用了兩次父類構造函數,生成了兩份實例(子類實例將子類原型上的那份屏蔽了)推薦指數:★★★★(僅僅多消耗了一點內存)

6、寄生組合繼承

核心:通過寄生方式,砍掉父類的實例屬性,這樣,在調用兩次父類的構造的時候,就不會初始化兩次實例方法/屬性,避免的組合繼承的缺點

function Cat(name){ Animal.call(this); this.name = name || ’Tom’;}(function(){ // 創建一個沒有實例方法的類 var Super = function(){}; Super.prototype = Animal.prototype; //將實例作為子類的原型 Cat.prototype = new Super();})();// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // trueconsole.log(cat instanceof Cat); //true感謝 @bluedrink 提醒,該實現沒有修復constructor。Cat.prototype.constructor = Cat; // 需要修復下構造函數

感謝 @bluedrink 提醒,該實現沒有修復constructor。

Cat.prototype.constructor = Cat; // 需要修復下構造函數

特點:

堪稱完美

缺點:

實現較為復雜

推薦指數:★★★★(實現復雜,扣掉一顆星)

附錄代碼:

示例一:

function Animal (name) { // 屬性 this.name = name || ’Animal’; // 實例方法 this.sleep = function(){ console.log(this.name + ’正在睡覺!’); } //實例引用屬性 this.features = [];}function Cat(name){}Cat.prototype = new Animal();var tom = new Cat(’Tom’);var kissy = new Cat(’Kissy’);console.log(tom.name); // 'Animal'console.log(kissy.name); // 'Animal'console.log(tom.features); // []console.log(kissy.features); // []tom.name = ’Tom-New Name’;tom.features.push(’eat’);//針對父類實例值類型成員的更改,不影響console.log(tom.name); // 'Tom-New Name'console.log(kissy.name); // 'Animal'//針對父類實例引用類型成員的更改,會通過影響其他子類實例console.log(tom.features); // [’eat’]console.log(kissy.features); // [’eat’]

原因分析:

關鍵點:屬性查找過程

執行tom.features.push,首先找tom對象的實例屬性(找不到),

那么去原型對象中找,也就是Animal的實例。發現有,那么就直接在這個對象的features屬性中插入值。

在console.log(kissy.features); 的時候。同上,kissy實例上沒有,那么去原型上找。

剛好原型上有,就直接返回,但是注意,這個原型對象中features屬性值已經變化了。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 绿萝净除甲醛|深圳除甲醛公司|测甲醛怎么收费|培训机构|电影院|办公室|车内|室内除甲醛案例|原理|方法|价格立马咨询 | 工业用品一站式采购平台|南创工品汇-官网|广州南创 | 泰来华顿液氮罐,美国MVE液氮罐,自增压液氮罐,定制液氮生物容器,进口杜瓦瓶-上海京灿精密机械有限公司 | 365文案网_全网创意文案句子素材站 | 杭州火蝠电商_京东代运营_拼多多全托管代运营【天猫代运营】 | 通风天窗,通风气楼,屋顶通风天窗,屋顶通风天窗公司 | 工业车间焊接-整体|集中除尘设备-激光|等离子切割机配套除尘-粉尘烟尘净化治理厂家-山东美蓝环保科技有限公司 | 篮球地板厂家_舞台木地板品牌_体育运动地板厂家_凯洁地板 | 维泰克Veertek-锂电池微短路检测_锂电池腐蚀检测_锂电池漏液检测 | 翻斗式矿车|固定式矿车|曲轨侧卸式矿车|梭式矿车|矿车配件-山东卓力矿车生产厂家 | 高温高压釜(氢化反应釜)百科| 体视显微镜_荧光生物显微镜_显微镜报价-微仪光电生命科学显微镜有限公司 | 高精度电阻回路测试仪-回路直流电阻测试仪-武汉特高压电力科技有限公司 | 四川职高信息网-初高中、大专、职业技术学校招生信息网 | 防爆电机-高压防爆电机-ybx4电动机厂家-河南省南洋防爆电机有限公司 | 药品冷藏箱厂家_低温冰箱_洁净工作台-济南欧莱博电子商务有限公司官网 | 水冷散热器_水冷电子散热器_大功率散热器_水冷板散热器厂家-河源市恒光辉散热器有限公司 | 济南冷库安装-山东冷库设计|建造|冷库维修-山东齐雪制冷设备有限公司 | 户外-组合-幼儿园-不锈钢-儿童-滑滑梯-床-玩具-淘气堡-厂家-价格 | 真空泵厂家_真空泵机组_水环泵_旋片泵_罗茨泵_耐腐蚀防爆_中德制泵 | 非甲烷总烃分析仪|环控百科 | 防潮防水通风密闭门源头实力厂家 - 北京酷思帝克门窗 | 衡阳耐适防护科技有限公司——威仕盾焊接防护用品官网/焊工手套/焊接防护服/皮革防护手套 | 全自动端子机|刺破式端子压接机|全自动双头沾锡机|全自动插胶壳端子机-东莞市傅氏兄弟机械设备有限公司 | 振动台-振动试验台-振动冲击台-广东剑乔试验设备有限公司 | 上海单片机培训|重庆曙海培训分支机构—CortexM3+uC/OS培训班,北京linux培训,Windows驱动开发培训|上海IC版图设计,西安linux培训,北京汽车电子EMC培训,ARM培训,MTK培训,Android培训 | 雷蒙磨,雷蒙磨粉机,雷蒙磨机 - 巩义市大峪沟高峰机械厂 | 通风气楼_通风天窗_屋顶风机-山东美创通风设备有限公司 | 灰板纸、灰底白、硬纸板等纸品生产商-金泊纸业 | 团建-拓展-拓展培训-拓展训练-户外拓展训练基地[无锡劲途] | 警方提醒:赣州约炮论坛真的安全吗?2025年新手必看的网络交友防坑指南 | 防水套管|柔性防水套管|伸缩器|伸缩接头|传力接头-河南伟创管道 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 | 蜘蛛车-高空作业平台-升降机-高空作业车租赁-臂式伸缩臂叉装车-登高车出租厂家 - 普雷斯特机械设备(北京)有限公司 | 北京软件开发_软件开发公司_北京软件公司-北京宜天信达软件开发公司 | 洛阳永磁工业大吊扇研发生产-工厂通风降温解决方案提供商-中实洛阳环境科技有限公司 | 北京公司注册_代理记账_代办商标注册工商执照-企力宝 | 【直乐】河北石家庄脊柱侧弯医院_治疗椎间盘突出哪家医院好_骨科脊柱外科专业医院_治疗抽动症/关节病骨伤权威医院|排行-直乐矫形中医医院 | 楼承板设备-楼承板成型机-免浇筑楼承板机器厂家-捡来 | 合肥网带炉_安徽箱式炉_钟罩炉-合肥品炙装备科技有限公司 | 家乐事净水器官网-净水器厂家「官方」| 微信聊天记录恢复_手机短信删除怎么恢复_通讯录恢复软件下载-快易数据恢复 |