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. C# 函数式编程及Monads.net库

    函数式编程中,一切皆为函数,这个函数一般不是类级别的,其可以保存在变量中,可以当做参数或返回值,是函数级别的抽象和重用,将函数作为可重用的基本模块,就像面向对象中一切皆为对象,把所有事物抽象为类,面向 ...

  2. 没那么难，谈CSS的设计模式

    没那么难,谈CSS的设计模式 来源: 灵感的小窝  发布时间: 2016-09-09 16:46  阅读: 8949 次  推荐: 27   原文链接   [收藏]   什么是设计模式? 曾有人调侃, ...

  3. MySQL--Percona-XtraDB-Cluster使用xtrabackup来添加节点

    虽然PXC支持在线增加群集节点,但是目前尚未解决wsrep_sst_method=xtrabackup 或wsrep_sst_method=mysqldump时报错的问题,因此尝试手动完成xtraba ...

  4. 在我朝如何为Brackets安装扩展？

    Brackets是Adobe发起的一个开源的HTML编辑器,界面优美简洁.扩展丰富.支持基于Chrome浏览器的实时预览,非常适合对于Web的开发和学习. 但是Brackets的安装包下载和扩展下载, ...

  5. WPF TreeView IsExpanded 绑定不上的问题

    最近项目上需要通过MVVM来控制TreeView,其中需要需要控制通过搜索来定位某个节点,正常逻辑下,首先通过需要在树上面找到该节点,然后选中该节点,并将该节点的父节点展开,这个时候需要通过MVVM来 ...

  6. 201621123018《Java程序设计》第9周学习报告

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 泛型个人认为可以理解为一种模糊的类型,在里面写入各种方法,程序员可以根据需要再创建具体类型的对象,然后调用泛型 ...

  7. 分布式管理GIT命令总结(转载)

    GIT是个了不起但却复杂的源代码管理系统.它能支持复杂的任务,却因此经常被认为太过复杂而不适用于简单的日常工作.让我们诚实一记吧:Git是复杂的,我们不要装作它不是.但我仍然会试图教会你用(我的)基本 ...

  8. Redis---ZipList(压缩列表)

    1.概述 压缩列表是一块连续的内存空间,元素之间紧挨着存储,没有任何冗余空间. Redis 为了节约内存空间使用,zset 和 hash 容器对象在元素个数较少的时候,采用压缩列表 (ziplist) ...

  9. Python小白学习之路（二十三）—【生成器补充】

    生成器的一些补充 接着下鸡蛋和吃包子! 补充一:生成器只能遍历一次 (总是把生成器比喻成母鸡下鸡蛋,需要一个下一个,首先是下出来的鸡蛋不能塞回母鸡肚子里,其次是一个母鸡一生只能下一定数量的鸡蛋,下完了 ...

  10. 【xsy2504】farm 容斥原理

    题目大意:给你三个数$n,m,s$,满足$n,m,s≤10^{18}$且最大质因数均不大于$10^6$. 问你存在多少个整数$k$,满足$0≤k≤m$,且$(k,0)$,$(0,n)$,$(x,y)$ ...