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. AngularJS 路由及SPA理解

    一.路由及SPA理解 路由允许我们通过不同的 URL 访问不同的内容,可实现多视图的单页web应用(SPA);通常我们的URL形式为 http://runoob.com/first/page,但在单页 ...

  2. 测试pc大、小端

    判断计算机的大.小端存储方式 1 int main() { ; char* p=(char*)&a; ) printf("little\n");//小端存储:高位存在地地址 ...

  3. 个人作业四--Alpha阶段个人总结

    一.个人总结 在alpha 结束之后, 每位同学写一篇个人博客, 总结自己的alpha 过程: 请用自我评价表:http://www.cnblogs.com/xinz/p/3852177.html 有 ...

  4. Kali Linux渗透测试实战 1.1 Kali Linux简介

    1.1 Kali Linux简介 如果您之前使用过或者了解BackTrack系列Linux的话,那么我只需要简单的说,Kali是BackTrack的升级换代产品,从Kali开始,BackTrack将成 ...

  5. 【计算机网络】网络层学习笔记：总结IP，NAT和DHCP

    前言:这篇文章是学习网络层协议时候总结的笔记,前面的主要部分介绍的都是IP协议, 后半部分介绍NAT协议和DHCP协议 参考书籍 <计算机网络-自顶向下>       作者 James F ...

  6. Flask系列05--Flask的配置config

    一.flask配置 示例说明, 就是使用config进行配置 from flask import Flask ​ app = Flask(__name__) # type:Flask app.conf ...

  7. leetcode 152. 乘积最大子序列 java

    题目: 给定一个整数数组 nums ,找出一个序列中乘积最大的连续子序列(该序列至少包含一个数). 示例 1: 输入: [2,3,-2,4] 输出: 6 解释: 子数组 [2,3] 有最大乘积 6. ...

  8. java的基本数据类型--四类八种

    java的数据类型 1.分为基本数据类型和引用数据类型 基本数据类型的分类:整数型: byte  占用一个字节 范围-128-127 short 占用两个字节  -2^15~2^15-1 int    ...

  9. dubbo实现原理之SPI简介

    dubbo采用微内核+插件体系,设计优雅,扩展性很强.微内核+插件体系是如何实现的呢?想必大家都知道SPI(service provider interface)机制.这种机制的原理是假如我们定义了服 ...

  10. 55.storm 之 hello word（本地模式）

    strom hello word 概述 然后卡一下代码怎么实现的: 编写数据源类:Spout.可以使用两种方式: 继承BaseRichSpout类 实现IRichSpout接口 主要需要实现或重写几个 ...