JavaScript的继承方式有多种，这里列举3种，分别是原型继承、类继承以及混合继承。

1、原型继承

优点：既继承了父类的模板，又继承了父类的原型对象；

缺点：不是子类实例传参，而是需要通过父类实例，不符合常规。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>javascript的3种继承方式</title>

</head>

<body>

    <script type="text/javascript">

        //1、原型继承

        //父类（水果）

        function Fruit(name, price) {

            this.name = name;

            this.price = price;

        }

        //父类的原型对象属性

        Fruit.prototype.id = 2018;

        //子类（苹果）

        function Apple(color) {

            this.color = color;

        }

        //继承实现

        Apple.prototype = new Fruit('apple', 15);

        var apple = new Apple('red');

        console.log(apple.name);

        console.log(apple.price);

        console.log(apple.color);

        console.log(apple.id);

    </script>

</body>

</html>

控制台结果：

2、类继承（运用构造函数的方式继承）

优点：继承了父类的模板并且能通过子类实例传参；

缺点：不能继承父类的原型对象。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>javascript的3种继承方式</title>

</head>

<body>

    <script type="text/javascript">

        //2、类继承（使用构造函数的方式继承）

        //父类（水果）

        function Fruit(name, price) {

            this.name = name;

            this.price = price;

        }

        //父类的原型对象属性

        Fruit.prototype.id = 99;

        //子类（苹果）

        function Apple(name, price, color) {

            Fruit.call(this, name, price);//调用call或apply方法实现继承

            this.color = color;

        }

        var apple = new Apple('apple', 12, 'red');

        console.log(apple.name);

        console.log(apple.price);

        console.log(apple.color);

        console.log(apple.id);

    </script>

</body>

</html>

控制台结果：

3、混合继承（原型继承+类继承）

优点：既继承了父类的模板，又继承了父类的原型对象，还能实现子类实例的传参。

缺点：Apple.prototype = new Fruit();这步又实例化了一次，当多次调用比较占用资源，影响性能。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>javascript的3种继承方式</title>

</head>

<body>

    <script type="text/javascript">

        //3、组合继承

        //父类（苹果）

        function Fruit(name, price) {

            this.name = name;

            this.price = price;

        }

        //父类的原型对象属性

        Fruit.prototype.id = 98;

        //子类（苹果）

        function Apple(name, price, color) {

            Fruit.call(this, name, price);//调用call或apply方法实现继承

            this.color = color;

        }

        //原型继承

        Apple.prototype = new Fruit();

        var apple = new Apple('apple', 12, 'red');

        console.log(apple.name);

        console.log(apple.price);

        console.log(apple.color);

        console.log(apple.id);

    </script>

</body>

</html>

控制台结果：

JavaScript的3种继承方式的更多相关文章

  1. Javascript的四种继承方式

    在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...

  2. 都0202年了，你还不知道javascript有几种继承方式？

    前言     当面试官问你:你了解js哪些继承方式?es6的class继承是如何实现的?你心中有很清晰的答案吗?如果没有的话,可以通过阅读本文,帮助你更深刻地理解js的所有继承方式.       js ...

  3. JavaScript的几种继承方式

    看<JavaScript高级程序设计>做的一些笔记 ECMAScript只支持实现继承,不支持接口继承(因为函数没有签名) 原型链(实现继承的主要方法): function SuperTy ...

  4. JavaScript之四种继承方式讲解

    在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...

  5. JavaScript几种继承方式

    我们先构建一个Person的构造函数 function Person(name) { this.name=name; } Person.prototype.sayHi=function () { co ...

  6. 重新理解JS的6种继承方式

    写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面试官问到了JS的OOP,那么说明这 ...

  7. JavaScript的7种继承模式

    <JavaScript模式>一书中,对于JavaScript的几种继承模式讲解得很清楚,给我提供了很大帮助.总结一下,有如下7种模式. 继承模式1--设置原型(默认模式) 实现方式: // ...

  8. JavaScript 常见的六种继承方式

    JavaScript 常见的六种继承方式 前言 面向对象编程很重要的一个方面,就是对象的继承.A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. 大部分 ...

  9. js的6种继承方式

    重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学 ...

随机推荐

  1. bootstrap2.2相关文档

    本节课我们主要学习一下 Bootstrap表单和图片功能,通过内置的 CSS定义,显示各种丰富的效果. 一．表单 Bootstrap提供了一些丰富的表单样式供开发者使用. 1.基本格式 //实现基本的 ...

  2. 由异常掉电问题---谈xfs文件系统

    由异常掉电问题---谈xfs文件系统 本文皆是作者自己的学习总结或感悟(linux环境),如有不对,欢迎提出一起探讨!! 目录结构 一.相关知识 二.问题提出 三.处理方法 四.最终结果 一.相关知识 ...

  3. Linux-IO重定向与管道

    1. 输入与输出 标准输入 STDIN 文件描述符:0,默认:键盘输入 标准输出 STDOUT 文件描述符:1,默认:屏幕输出 错误输出 STDERR 文件描述符:2,默认:屏幕输出 2. 标准输出重 ...

  4. android.os.NetworkOnMainThreadException的解决方案

    06-24 18:04:36.857: E/AndroidRuntime(22251): FATAL EXCEPTION: main 06-24 18:04:36.857: E/AndroidRunt ...

  5. nginx在Linux下的安装

    安装之前的环境装备: 1.ngiinx 是C 语言开发的,我们上传的文件还是源码,需要gcc环境编译源码 : yum install gcc-c++ 2.nginx的http模块使用pcre来解析正则 ...

  6. Fusioncharts的数字格式化

      1.     小数点位数格式化 <chart ... decimals='2' > Eg.数值12.432, 13.4 and 13,使用<chart ... decimals= ...

  7. C#6.0语言规范(十三) 接口

    接口定义合同.实现接口的类或结构必须遵守其合同.接口可以从多个基接口继承,并且类或结构可以实现多个接口. 接口可以包含方法,属性,事件和索引器.接口本身不为它定义的成员提供实现.接口仅指定必须由实现接 ...

  8. 交换机与VLAN

    1. 交换机 1.1 定义 交换机是一种基于MAC地址识别,能完成封装转发数据帧功能的网络设备. HUB集线器是一种物理层共享设备,HUB本身不能识别MAC 地址和IP地址,当同一局域网内的A主机给B ...

  9. solr初识

    参考资料http://blog.csdn.net/l1028386804/article/details/70199983

  10. oracle undo redo 解析

    Undo是干嘛用的?          简单理解,就相当于Windows下的回收站.        你对数据执行修改时,数据库会生成undo信息,这样万一你执行的事务或语句由于某种原因失败了,或者如果 ...