编程 Javascript

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程序设计有所帮助。

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

- Author -

etemal_bright

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript下的keyCode键码值表

Apr 10 Javascript

ImageFlow可鼠标控制图片滚动

Jan 30 Javascript

基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）

Jul 31 Javascript

js 与 php 通过json数据进行通讯示例

Mar 26 Javascript

使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法

Apr 15 Javascript

基于AngularJS实现页面滚动到底自动加载数据的功能

Oct 16 Javascript

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

May 12 Javascript

JavaScript中点击事件的写法

Jun 28 Javascript

深入分析javascript中console命令

Aug 14 Javascript

JavaScript实现输入框与清空按钮联动效果

Sep 09 Javascript

React根据宽度自适应高度的示例代码

Oct 11 Javascript

JS判断数组四种实现方法详解

Jun 29 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