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的递归之递归与循环示例介绍
Aug 05 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
js实现简易ATM功能
Oct 27 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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自动获取关键字的方法
2015/01/06 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
jQuery的链式调用浅析
2010/12/03 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
python使用pil生成缩略图的方法
2015/03/26 Python
Python六大开源框架对比
2015/10/19 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
Python连接字符串过程详解
2020/01/06 Python
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
会计岗位职责
2013/11/08 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
绩效管理实施方案
2014/03/19 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
党员违纪检讨书
2015/05/05 职场文书
旗帜观后感
2015/06/08 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
关于MySQL中的 like操作符详情
2021/11/17 MySQL