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

您的位置:首頁技術(shù)文章
文章詳情頁

JS繼承實現(xiàn)方法及優(yōu)缺點詳解

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

前言

JS作為面向?qū)ο蟮娜躅愋驼Z言,繼承也是其非常強大的特性之一。那么如何在JS中實現(xiàn)繼承呢?讓我們拭目以待。

JS繼承的實現(xiàn)方式

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

// 定義一個動物類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

特點:

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

缺點:

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

無法實現(xiàn)多繼承

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

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

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

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

2、構(gòu)造繼承

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

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中,子類實例共享父類引用屬性的問題 創(chuàng)建子類實例時,可以向父類傳遞參數(shù) 可以實現(xiàn)多繼承(call多個父類對象)

缺點:

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

推薦指數(shù):★★(缺點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

特點:

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

缺點:

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

推薦指數(shù):★★

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

特點:

支持多繼承

缺點:

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

推薦指數(shù):★(缺點1)

5、組合繼承

核心:通過調(diào)用父類構(gòu)造,繼承父類的屬性并保留傳參的優(yōu)點,然后通過將父類實例作為子類原型,實現(xiàn)函數(shù)復(fù)用

function Cat(name){ Animal.call(this); this.name = name || ’Tom’;}Cat.prototype = new Animal();// 感謝 @學(xué)無止境c 的提醒,組合繼承也是需要修復(fù)構(gòu)造函數(shù)指向的。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的缺陷,可以繼承實例屬性/方法,也可以繼承原型屬性/方法 既是子類的實例,也是父類的實例 不存在引用屬性共享問題 可傳參 函數(shù)可復(fù)用

缺點:

調(diào)用了兩次父類構(gòu)造函數(shù),生成了兩份實例(子類實例將子類原型上的那份屏蔽了)推薦指數(shù):★★★★(僅僅多消耗了一點內(nèi)存)

6、寄生組合繼承

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

function Cat(name){ Animal.call(this); this.name = name || ’Tom’;}(function(){ // 創(chuàng)建一個沒有實例方法的類 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 提醒,該實現(xiàn)沒有修復(fù)constructor。Cat.prototype.constructor = Cat; // 需要修復(fù)下構(gòu)造函數(shù)

感謝 @bluedrink 提醒,該實現(xiàn)沒有修復(fù)constructor。

Cat.prototype.constructor = Cat; // 需要修復(fù)下構(gòu)造函數(shù)

特點:

堪稱完美

缺點:

實現(xiàn)較為復(fù)雜

推薦指數(shù):★★★★(實現(xiàn)復(fù)雜,扣掉一顆星)

附錄代碼:

示例一:

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’]

原因分析:

關(guān)鍵點:屬性查找過程

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

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

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

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

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 上海诺狮景观规划设计有限公司 | 上海防爆真空干燥箱-上海防爆冷库-上海防爆冷柜?-上海浦下防爆设备厂家? | 办公室家具_板式办公家具定制厂家-FMARTS福玛仕办公家具 | Boden齿轮油泵-ketai齿轮泵-yuken油研-无锡新立液压有限公司 | 智能垃圾箱|垃圾房|垃圾分类亭|垃圾分类箱专业生产厂家定做-宿迁市传宇环保设备有限公司 | 密度电子天平-内校-外校电子天平-沈阳龙腾电子有限公司 | 领先的大模型技术与应用公司-中关村科金| 聚氨酯复合板保温板厂家_廊坊华宇创新科技有限公司 | 卫生型双针压力表-高温防腐差压表-安徽康泰电气有限公司 | 深圳货架厂_仓库货架公司_重型仓储货架_线棒货架批发-深圳市诺普泰仓储设备有限公司 | 泰兴市热钻机械有限公司-热熔钻孔机-数控热熔钻-热熔钻孔攻牙一体机 | 亚洲工业智能制造领域专业门户网站 - 亚洲自动化与机器人网 | 锂电混合机-新能源混合机-正极材料混料机-高镍,三元材料混料机-负极,包覆混合机-贝尔专业混合混料搅拌机械系统设备厂家 | PU树脂_水性聚氨酯树脂_聚氨酯固化剂_聚氨酯树脂厂家_宝景化工 | 武汉天安盾电子设备有限公司 - 安盾安检,武汉安检门,武汉安检机,武汉金属探测器,武汉测温安检门,武汉X光行李安检机,武汉防爆罐,武汉车底安全检查,武汉液体探测仪,武汉安检防爆设备 | 粉末包装机-给袋式包装机-全自动包装机-颗粒-液体-食品-酱腌菜包装机生产线【润立机械】 | 东莞画册设计_logo/vi设计_品牌包装设计 - 华略品牌设计公司 | nalgene洗瓶,nalgene量筒,nalgene窄口瓶,nalgene放水口大瓶,浙江省nalgene代理-杭州雷琪实验器材有限公司 | 包塑软管|金属软管|包塑金属软管-闵彬管业 | 游泳池设计|设备|配件|药品|吸污机-东莞市太平洋康体设施有限公司 | 玻璃钢型材-玻璃钢风管-玻璃钢管道,生产厂家-[江苏欧升玻璃钢制造有限公司] | 耐高温电缆厂家-远洋高温电缆| 烟台螺纹,烟台H型钢,烟台钢材,烟台角钢-烟台市正丰金属材料有限公司 | 直流电能表-充电桩电能表-导轨式电能表-智能电能表-浙江科为电气有限公司 | 涂层测厚仪_漆膜仪_光学透过率仪_十大创新厂家-果欧电子科技公司 | 招商帮-一站式网络营销服务|搜索营销推广|信息流推广|短视视频营销推广|互联网整合营销|网络推广代运营|招商帮企业招商好帮手 | 冲击式破碎机-冲击式制砂机-移动碎石机厂家_青州市富康机械有限公司 | 动力配电箱-不锈钢配电箱-高压开关柜-重庆宇轩机电设备有限公司 聚天冬氨酸,亚氨基二琥珀酸四钠,PASP,IDS - 远联化工 | 工业rfid读写器_RFID工业读写器_工业rfid设备厂商-ANDEAWELL | 挤奶设备过滤纸,牛奶过滤纸,挤奶机过滤袋-济南蓝贝尔工贸有限公司 | 辽宁资质代办_辽宁建筑资质办理_辽宁建筑资质延期升级_辽宁中杭资质代办 | 科昊仪器超纯水机系统-可成气相液氮罐-美菱超低温冰箱-西安昊兴生物科技有限公司 | 广州食堂承包_广州团餐配送_广州堂食餐饮服务公司 - 旺记餐饮 | 期货软件-专业期货分析软件下载-云智赢| 奥因-光触媒除甲醛公司-除甲醛加盟公司十大品牌 | 馋嘴餐饮网_餐饮加盟店火爆好项目_餐饮连锁品牌加盟指南创业平台 | 交通气象站_能见度检测仪_路面状况监测站- 天合环境科技 | 山东螺杆空压机,烟台空压机,烟台开山空压机-烟台开山机电设备有限公司 | 自动化展_机器人展_机床展_工业互联网展_广东佛山工博会 | 胃口福饺子加盟官网_新鲜现包饺子云吞加盟 - 【胃口福唯一官网】 | 假肢-假肢价格-假肢厂家-河南假肢-郑州市力康假肢矫形器有限公司 |