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. 调用GOOGLE的TTS实现文字转语音(XE7+小米2)(XE10.1+小米5)

    相关资料: 注意:在手机上必须选安装文字转语音引擎“google Text To Speech”地址:http://www.shouji56.com/soft/GoogleWenZiZhuanYuYi ...

  2. .Net下EF的简单实现

    1.连接SQLServer,创建数据库TestDB; 2.添加EF引用,点击工具-NuGet包管理器-管理解决方案的NuGet程序包, 搜索EntityFramework包,点击安装: 3.在Web. ...

  3. Bootstrap框架下实现图片切换

    准备图片,把相关记录添加至数据库表中: 创建一个存储过程,获取所有记录: 在ASP.NET MVC专案中,部署Bootstrap环境...... 然后创建一个model: using System; ...

  4. 【react】关于react框架使用的一些细节要点的思考

    ( _(:3 」∠)_给园友们提个建议,无论是API文档还是书籍,一定要多看几遍!特别是隔一段时间后,会有意想不到的收获的)   这篇文章主要是写关于学习react中的一些自己的思考:   1.set ...

  5. for，while陈述

    今天我们来说一下for 和while循环 Python循环语句的控制结构图如下所示: for 是Python程序员使用最多的语句,for 循环用于迭代容器对象中的元素,这些对象可以是列表.元组.字典. ...

  6. 简单理解jQuery中$.getJSON、$.get、$.post、$.ajax用法

    在WEB开发中异步请求方式普遍使用,ajax技术减少程序员的工作量,也提升用户交互体验.AJAX的四种异步请求方式都能实现基本需求,闲话不多说,直接切入正题. 1.$.getJSON $.getJSO ...

  7. python with用法举例

    我们知道在操作文件对象的时候可以这么写 with open('a.txt') as f: '代码块' 上述叫做上下文管理协议,即with语句,为了让一个对象兼容with语句,必须在这个对象的类中声明_ ...

  8. 01-02 notepad++安装、配置及使用

    一.安装 按照默认设置,下一步下一步即可. 二.配置 设置-->首选项-->新建

  9. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  10. odoo开发笔记 -- 多个视图共用一个模型

    除了写序列优先绑定之外, 窗口引用的视图id也要绑定,否则页面加载的时候,可能不是自己需要显示的视图.例如:<field name="view_id" ref="c ...