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. java基础知识-算术运算符和赋值运算符

    1.算术运算符 算术运算符: +,-,*,/,% /:取的是两个数的商,当两个数是整数,不整除的情况,结果不包含小数部分 %:取的是两个数的余数. 字符串和+联合使用:此时的+称为连接符.++,--都 ...

  2. Amoeba常见问题

    1.1.1 JAVA_HOME不认 jdk安装后测试无问题java –version,但启动amoeba就是报错JAVA_HOME找不到.就修改/amoeba/bin/amoeba文件,在文件最开头直 ...

  3. F - Cookies Piles

    Description The kids in my son's kindergarten made Christmas cookies with their teacher, and piled t ...

  4. gcc 6.0编译opencv出错

    在编译opencv3.2时候,出现下面错误: cmake -DCMAKE_BUILD_TYPE=RELEASE -DCMAKE_INSTALL_PREFIX=/usr/local -DBUILD_NE ...

  5. 背水一战 Windows 10 (51) - 控件（集合类）: ItemsControl - 项模板选择器, 数据分组

    [源码下载] 背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组 作者:webabcd 介绍背水一战 Windows 10 之 控件 ...

  6. Swift5 语言参考(七) 属性

    属性提供有关声明或类型的更多信息.Swift中有两种属性,即适用于声明的属性和适用于类型的属性. 您可以通过编写@符号后跟属性的名称以及属性接受的任何参数来指定属性: @attribute name ...

  7. 编译lua-5.3.5时出错解决方法

    问题描述: 执行 make linux test 过程出现错误,错误信息如下: “ lua.c:82:31: fatal error: readline/readline.h: No such fil ...

  8. POJ 2562

    #include<iostream> #include<algorithm> #define MAXN 15 using namespace std; //int rec[MA ...

  9. odoo开发笔记 -- odoo源码解析

    odoo 源码解析:http://blog.csdn.net/weixin_35737303

  10. kindEditor 使用

    1. kindEditor简介: KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果.     主要特点: 1. 体积小,加载速度快,但功能十分丰富.2 ...