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函数般调用正则
Apr 08 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
vue 实现input表单元素的disabled示例
Oct 28 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
linux iconv方法的使用
2011/10/01 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
javascript关于继承解析
2016/05/10 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
python字符串替换的2种方法
2014/11/30 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
python tqdm库的使用
2020/11/30 Python
公司新员工的演讲稿注意事项
2014/01/01 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
股权转让协议书
2014/12/07 职场文书
教师个人培训总结
2015/02/11 职场文书
商场收银员岗位职责
2015/04/07 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS