JS实现继承的几种常用方式示例


Posted in Javascript onJune 22, 2019

本文实例讲述了JS实现继承的几种常用方式。分享给大家供大家参考,具体如下:

1,原型链继承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>原型链继承</title>
</head>
<body>
<script>
  /**
   * 优点:
   * 实例是父类的实例也是子类的实例
   * 父类新增原型方法或者原型属性 子类都能访问到
   * 简单 易于实现
   * 缺点:
   * 无法实现多继承
   * 来自原型对象的引用属性和实例是所有子类共享的
   * 创建子类实例的时候,无法向父构造函数传参
   * 可以在Cat构造函数中,为Cat实例增加实例属性。如果要新增原型属性和方法,则必须放在new Animal()这样的语句之后执行。
   * **/
  function Animal(name) {
    this.name=name;//属性
    this.sleep=function () {//实例方法
      console.log(this.name+'正在睡觉')
    }
  }
  //原型方法
  Animal.prototype.eat=function (food) {
    console.log(this.name+'正在吃'+food)
  };
  //原型链继承---核心:将父类的实例作为子类的原型
  function Cat() {
  }
  Cat.prototype=new Animal();
  Cat.prototype.name='cat';
  var cat=new Cat();
  console.log(cat);//cat._proto_====>Animal 可以使用Animal里面的name属性 sleep方法
  //  也可以使用 cat._proto_._proto_的eat方法 即animal的原型方法
  //  cat._proto_._proto_._proto_ 是object
  console.log(cat.name);
  cat.eat('fish');
  cat.sleep();
</script>
</body>
</html>

运行结果:

JS实现继承的几种常用方式示例

2,构造继承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>构造继承</title>
</head>
<body>
<script>
  /**
   *构造继承 相当于复制父类的实例给子类 (没有用到原型)
   * 只能使用父类的属性和方法 不能继承原型属性和方法 所以cat不能使用eat方法
   * **/
  function Animal(name) {
    this.name=name;//属性
    this.sleep=function () {//实例方法
      console.log(this.name + '正在睡觉!');
    }
  }
  // 原型方法
  Animal.prototype.eat = function(food) {
    console.log(this.name + '正在吃:' + food);
  };
  function Cat(name) {
    Animal.call(this,name);//Cat就可以使用Animal的
//    this.name=name
  }
  var cat=new Cat('Tom');
  console.log(cat);//只能使用Animal的属性和实例方法 不能使用原型的方法
  //cat的_proto_(指向的是一个函数) 是cat 构造器是Cat cat的_proto_._proto_ 是object
  console.log(cat.name);
//  cat.eat('fish');
  cat.sleep()
</script>
</body>
</html>

运行结果:

JS实现继承的几种常用方式示例

3,组合继承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组合继承</title>
</head>
<body>
<script>
  function Animal(name) {
    this.name=name;
    this.sleep=function () {
      console.log(this.name+"正在睡觉");
    };
  }
  Animal.prototype.eat=function (food) {
    console.log(this.name+"正在吃"+food);
  }
  function Cat(name) {
    Animal.call(this,name)
  }
  Cat.prototype=new Animal();
//  组合继承也是需要修复构造函数指向的。
  Cat.prototype.constructor=Cat;//构造器进行修改
  Cat.prototype.show=function () {//可以在子类的原型上加方法 不影响父类
    console.log("11111")
  };
  var cat=new Cat('Tom');
  console.log(cat);//cat可以直接使用animal的属性和实例方法
  //cat.proto是Animal cat.proto_._proto_ 是eat cat.proto_._proto_._proto_是object
  console.log(cat.name);
  cat.sleep();
  cat.eat('fish')
  cat.show()
</script>
</body>
</html>

运行结果:

JS实现继承的几种常用方式示例

4,寄生组合继承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>寄生组合继承</title>
</head>
<body>
<script>
  function Animal(name) {
    this.name=name;
    this.sleep=function () {
      console.log(this.name+"正在睡觉");
    }
  }
  // 原型方法
  Animal.prototype.eat = function(food) {
    console.log(this.name + '正在吃:' + food);
  };
  function Cat(name) {
    Animal.call(this,name);
  }
//  (function () {
    //创建一个没有实例方法的类
    var Super=function () {
    };
    Super.prototype=Animal.prototype;//eat
    console.log(Animal.prototype);//构造方法还是Animal 可以使用eat方法 eat的_proto_ 是object
    //初始化这个实例 把它作为子类(Cat)的原型
    Cat.prototype=new Super();//一般 的话是new Animal()
    Cat.prototype.constructor=Cat;//Cat的构造器还是Cat
//  })();
  var cat=new Cat('Tom');
  console.log(cat.name);
  cat.sleep();
  cat.eat('food')
</script>
</body>
</html>

运行结果:

JS实现继承的几种常用方式示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
Express URL跳转(重定向)的实现方法
Apr 07 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 #Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 #Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 #Javascript
简单了解JavaScript中常见的反模式
Jun 21 #Javascript
通过图带你深入了解vue的响应式原理
Jun 21 #Javascript
10种JavaScript最常见的错误(小结)
Jun 21 #Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 #Javascript
You might like
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
PHP数据过滤的方法
2013/10/30 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
采用call方式实现js继承
2014/05/20 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
Python创建系统目录的方法
2015/03/11 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
python实现俄罗斯方块
2018/06/26 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
公司司机岗位职责
2014/02/07 职场文书
企业精神口号
2014/06/11 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js