JavaScript中的继承之类继承 - vip共享吧
  • 网站首页
  • IT技术笔记
    • PHP开发
    • JavaScript
    • SEO优化
    • 常用工具
  • 好资源福利
    • 会员账号共享
  • 网站模板源码
    • 小程序源码
    • 网站源码
  • 共享网络资源
  • 更多功能
    • 留言吐槽
    • 文章归档
    • 我的邻居
    • 视频解析
    • 高清壁纸
    • 公告动态
    • 广告合作
    • 关于我们


  • 个人中心
  •  我的主页
  •  我要投稿
  •  会员服务
  •  修改资料
  •  退出登录
导航菜单
  • 网站首页
  • IT技术笔记
    • PHP开发
    • JavaScript
    • SEO优化
    • 常用工具
  • 好资源福利
    • 会员账号共享
  • 网站模板源码
    • 小程序源码
    • 网站源码
  • 共享网络资源
  • 更多功能
    • 留言吐槽
    • 文章归档
    • 我的邻居
    • 视频解析
    • 高清壁纸
    • 公告动态
    • 广告合作
    • 关于我们
javascript教程JavaScript

JavaScript中的继承之类继承

2023/4/13 韩俊  JavaScript 98 0

继承简介

在JS中继承是一个非常复杂的话题,比其他任何面向对象语言中的继承都复杂得多。在大多数其他面向对象语言中,继承一个类只需使用一个关键字即可。在JS中想要达到继承公用成员的目的,需要采取一系列措施。JS属于原型式继承,得益于这种灵活性,我们既可以使用标准的基于类的继承,也可以使用更微妙一些的原型式继承。在JS中应该要明确一点,一切继承都是通过prototype来进行的,且JS是基于对象来继承的。

继承:

function Animal(name){ 
this.name = name; 
this.showName = function(){ 
alert(this.name); 
} 
} 
function Cat(name){ 
Animal.call(this, name); 
} 
var cat = new Cat("Black Cat"); 
cat.showName();

Animal.call(this) 的意思就是使用 Animal对象代替this对象,那么 Cat中不就有Animal的所有属性和方法了吗,Cat对象就能够直接调用Animal的方法以及属性了.

多继承:

function Class10() 
{ 
this.showSub = function(a,b) 
{ 
alert(a-b); 
} 
} 
function Class11() 
{ 
this.showAdd = function(a,b) 
{ 
alert(a+b); 
} 
} 
function Class2() 
{ 
Class10.call(this); 
Class11.call(this); 
}

很简单,使用两个 call 就实现多重继承了

当然,js的继承还有其他方法,例如使用原型链,这个不属于本文的范畴,只是在此说明call 的用法。说了call ,当然还有 apply,这两个方法基本上是一个意思,区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组,也可以是arguments。

下面给大家介绍如何在JavaScript中实现简单的继承?

下面的例子将创建一个雇员类Employee,它从Person继承了原型prototype中的所有属性。

function Employee(name, sex, employeeID) {
this.name = name;
this.sex = sex;
this.employeeID = employeeID;
}
// 将Employee的原型指向Person的一个实例
// 因为Person的实例可以调用Person原型中的方法, 所以Employee的实例也可以调用Person原型中的所有属性。
Employee.prototype = new Person();
Employee.prototype.getEmployeeID = function() {
return this.employeeID;
};
var zhang = new Employee("ZhangSan", "man", "");
console.log(zhang.getName()); // "ZhangSan

上面关于继承的实现很粗糙,并且存在很多问题:

在创建Employee构造函数和原型(以后简称类)时,就对Person进行了实例化,这是不合适的。

Employee的构造函数没法调用父类Person的构造函数,导致在Employee构造函数中对name和sex属性的重复赋值。

Employee中的函数会覆盖Person中的同名函数,没有重载的机制(和上一条是一个类型的问题)。

创建JavaScript类的语法过于零散,不如C#/Java中的语法优雅。

实现中有constructor属性的指向错误。

点赞:0 分享 海报 收藏

上一篇
浅析Javascript中bind()方法的使用与实现
下一篇
浅析Javascript中双等号(==)隐性转换机制
作者头像 作者名称 作者性别
韩俊
联系作者 作者主页

热门推荐

1 详解JavaScript表单验证(E-mail验证)
2 javascript制作照片墙及制作过程中出现的问题
3 对JS消息机制和事件机制的理解
4 javascript拖拽效果延伸学习
5 原生js实现addClass,removeClass,hasClass方法
6 JQuery 在表单提交之前修改提交的值

评论列表

取消回复

    •  
      Login

      韩俊

      趁你现在还有时间,尽你自己最大的努力,努力做成你最想做的那件事,成为你最想成为的那种人,过着你最想过的那种生活。这个世界永远比你想的要更精彩,不要败给生活。

      站长 主页
      用户中心
      评论管理
      退出登陆
      • 845文章
      • 449评论
      • 76微语
  • 广告赞助

  • 二零二三年06月
    一二三四五六日
       1234
    567891011
    12131415161718
    19202122232425
    2627282930  
  • 分类

    • 网站模板源码
    • IT技术笔记
    • 好资源分享
    • 共享网络资源
  • 最新文章

      • 什么是传输和传播延迟?
        • 什么是网络服务术语?
          • 什么是负载敏感路由算法?
            • 什么是流控制传输协议 (SCTP) 服务?
              • 什么是计算机网络中的 IPV6 单播地址?
                • 什么是计算机网络中的 UDP 数据报格式?
                  • 什么是蜂窝网络带宽能力和基站?
                    • 什么是协议图?比较网络接口和协议
  • 热门文章

    • 酷狗音乐VIP账号 酷狗音乐会员账号共享2017.01.29更新
    • 芒果tv vip会员账号 芒果tv会员账号共享2017.01.29更新
    • 爱奇艺vip账号 爱奇艺/PPS会员账号共享2016.12.12更新
    • 优酷/土豆vip会员账号 优酷会员账号共享2017.01.29更新
    • 活动:免费获得爱奇艺VIP/PPS会员账号50天以上的使用权!
    • 酷我音乐VIP账号 酷我音乐会员账号共享2016.12.31更新
    • 暴风影音会员账号 暴风影音会员账号共享2016.12.31更新
    • m1905会员账号 m1905会员账号共享2016.10.21更新
  • 最新评论

    • https://www.vipshare8.com/content/templates/meta/Api/qqtx.php/?qq=1766679359

      2345和360修改太厉害,现在都不想给...

    • https://www.vipshare8.com/content/templates/meta/Api/qqtx.php/?qq=3293901900

      感谢大大的分享

    • https://www.vipshare8.com/content/uploadfile/202103/thum-490d1614564497.png

      回复了好奥v:如果没有解析成功,可以切换接口...

    • https://www.vipshare8.com/content/templates/meta/Api/qqtx.php/?qq=131241242441

      现在视频解析网站怎么用不了啦?

    • https://www.vipshare8.com/content/uploadfile/202103/thum-490d1614564497.png

      回复了全力以赴:已发送

    • https://www.vipshare8.com/content/templates/meta/Api/qqtx.php/?qq=471420954

      感谢大佬!麻烦您啦! 模板地址:htt...

    • https://www.vipshare8.com/content/templates/meta/Api/qqtx.php/?qq=qleez

      感谢大佬!麻烦您啦! 模板地址:htt...

    • https://www.vipshare8.com/content/templates/meta/Api/qqtx.php/?qq=1184503826

      回复了韩俊:万分感谢!!!

    • https://www.vipshare8.com/content/uploadfile/202103/thum-490d1614564497.png

      回复了Moen:已发送

    • https://www.vipshare8.com/content/uploadfile/202103/thum-490d1614564497.png

      回复了慕子訓Chester:已发送

  • 网站统计 I 当前在线:321人

    • 本站管理:1位
    • 用户总数:590位
    • 置顶文章:0篇
    • 日志总数:845篇
    • 微语总数:76条
    • 评论总数:449条
    • 标签总数:79条
    • 页面总数:8页
    • 分类总数:11个
    • 链接总数:47条
    • 运行天数:2960天
    • 最后更新:6月8日
    • 登录
    • 注册
    • 找回
    Copyright © 2023vip共享吧网站地图 网站备案豫ICP备19004194号-1

    免责声明:本站资源仅供用于学习和交流,本站部分素材内容来源于网络,如有侵权/投稿等,请及时联系站长.

    • 首页
    • SEO优化 SEO优化
    • 搜索
    • 视频解析
    • 用户

    大家都在搜

    • 秒懂百科
    • 微信小程序源码
    • 掌阅会员账号
    • 酷狗会员账号共享
    • 网易云音乐会员
    • 千图网vip账号共享
    • qq音乐vip账号共享
    • meilisearch
    • 设计素材
    • 电影抢先看
    • 华数tv会员账号
    • 小程序
    • 土豆vip账号共享
    • VIP电影
    • PHP
    • 经验分享
    • 
    • 