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 相关文章推荐
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
详解javascript new的运行机制
Jan 26 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
JS轮播图的实现方法2
Aug 25 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 操作符与控制结构
2012/03/07 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
详解package.json版本号规则
2019/08/01 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
Python操作mongodb的9个步骤
2018/06/04 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
python中get和post有什么区别
2020/06/19 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
最新的大学生找工作自我评价
2013/09/29 职场文书
初三学生个人自我评定
2014/04/06 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
建筑工地质量标语
2014/06/12 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
工作证明格式范文
2015/06/15 职场文书
婚育证明格式
2015/06/17 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
linux目录管理方法介绍
2022/06/01 Servers