在ES6中有了继承，使用extends关键字就能实现。但这里讲的讲的不是这种，而是ES6之前的几种实现继承的方式。

（一）原型继承

ECMAScript中将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

例如：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <script>

            function Person(){

                this.name = 'zs';

                this.age = 18;

                this.sex = '男';

            }

            function Student(){

                this.score = 100;

            }

            Student.prototype = new Person();

            Student.prototype.constructor = Student;

            var s1 = new Student();

            console.log(s1.constructor);

            console.dir(s1);

            //原型继承 ：不能设置构造函数的参数

        </script>

    </body>

</html>

（二）借用构造函数

在解决原型中包含引用类型值所带来的问题中，使用借用构造函数技术来解决。借用构造函数的基本思想，即在子类型构造函数的内部调用超类型构造函数。函数只不过是在特定环境中执行代码的对象，因此通过使用call()方法可以在新创建的对象上执行构造函数。

例如：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <script>

            //借用构造函数

            function Person(name,age,sex){

                this.name = name;

                this.age = age;

                this.sex = sex;

            }

            //子类型

            function Student(name,age,sex,score){

                Person.call(this,name,age,sex);  //this 为学生对象

                this.score = score;

            }

            var student = new Student('zs',18,'男',100);

            console.dir(student)

        </script>

    </body>

</html>

（三）组合继承

组合继承，指的是将原型链和借用构造函数的技术组合到一起。思路是使用原型链实现对原型方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数的复用，又能够保证每个实例都有它自己的属性。

例如：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <script>

            //组合继承:借用构造函数 +原型继承

            function Person(name,age,sex){

                this.name = name;

                this.age = age;

                this.sex = sex;

            }

            Person.prototype.sayHi = function(){

                console.log(this.name);

            }

            function Student(name,age,sex,score){

                //借用构造函数，继承属性

                Person.call(this,name,age,sex);  //this 为学生对象

                this.score = score;

            }

            //原型继承，继承方法

            Student.prototype = new Person();

            Student.prototype.constructor = Student;

            var student = new Student('zs',18,'男',100);

            console.dir(student)

        </script>

    </body>

</html>

组合继承避免了原型链和借用构造函数的缺点，融合了他们的优点，是JavaScript中最常用的继承模式。

（四）继承的原型图

通过画图的形式，可以更直观的了解到继承的原理

特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢

JavaScript函数继承的更多相关文章

  1. ABP(现代ASP.NET样板开发框架)系列之21、ABP展现层——Javascript函数库

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之21.ABP展现层——Javascript函数库 ABP是“ASP.NET Boilerplate Project ...

  2. Javascript模拟继承（赠送.net吐槽一段）

    首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...

  3. 详解Javascript的继承实现（二）

    上文<详解Javascript的继承实现>介绍了一个通用的继承库,基于该库,可以快速构建带继承关系和静态成员的javascript类,好使用也好理解,额外的好处是,如果所有类都用这种库来构 ...

  4. JavaScript语言精粹读书笔记 - JavaScript函数

    JavaScript是披着C族语言外衣的LISP,除了词法上与C族语言相似以外,其他几乎没有相似之处. JavaScript 函数: 函数包含一组语句,他们是JavaScript的基础模块单元,用于代 ...

  5. 深入理解javascript函数系列第一篇——函数概述

    × 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...

  6. 深入理解javascript函数系列第三篇——属性和方法

    × 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...

  7. 详解Javascript 函数声明和函数表达式的区别

    Javascript Function无处不在,而且功能强大!通过Javascript函数可以让JS具有面向对象的一些特征,实现封装.继承等,也可以让代码得到复用.但事物都有两面性,Javascrip ...

  8. JavaScript之继承（原型链）

    JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...

  9. JavaScript函数之美~

    JavaScript函数之美~ 这篇文章,我将就以下几个方面来认识JavaScript中的函数. 函数为什么是对象,如何定义函数? 如何理解函数可以作为值被传递 函数的内部对象.方法以及属性 第一部分 ...

随机推荐

  1. 老司机带路：《axios从入门到开车 嘀嘀~~》

    前言:axios vue.axios 跨域.axios.js.axios get.axios post.axios中文文档 之前当vue更新到2.0之后,作者就宣告不再对vue-resource更新, ...

  2. 【安富莱专题教程第6期】SEGGER的J-Scope波形上位机软件，RTT模式波形上传速度可狂飙到500KB/S左右

    说明:1.在实际项目中,很多时候,我们需要将传感器或者ADC的数值以波形的形式显示.通常的解决办法是用串口上位机,USB接口上位机或者MDK的逻辑分析仪功能,使用这三种方式都比较繁琐.本期专题为大家讲 ...

  3. JNI实战（一）：JNI HelloWorld

    使用最新Android Studio的Cmake,创建一个Native C++项目后,我们就可以看到JNI的Hello World的项目及示例代码了. JNI的项目代码,分为三层:Java层,C++层 ...

  4. [Swift]LeetCode682. 棒球比赛 | Baseball Game

    You're now a baseball game point recorder. Given a list of strings, each string can be one of the 4 ...

  5. Visual Studio 2010软件安装教程

    链接:https://pan.baidu.com/s/10FeLlKpzFcb9yUjm3ZECsg 提取码:pup1 复制这段内容后打开百度网盘手机App,操作更方便哦 1.右击软件压缩包,选择解压 ...

  6. 3-4 计算属性的setter和getter

    Vue中的计算属性的setter和getter //如上,fullName这个方法在取这个数据的时候,会执行get中的方法:而在设置数据时,会执行set中的方法.其中set中有个参数(value),用 ...

  7. Java并发编程-volatile可见性的介绍

    要学习好Java的多线程,就一定得对volatile关键字的作用机制了熟于胸.最近博主看了大量关于volatile的相关博客,对其有了一点初步的理解和认识,下面通过自己的话叙述整理一遍. 有什么用? ...

  8. java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.paipaixiu/com.example.paipaixiu.MASetSomeThing}: android.view.InflateException: Binary XML file line #19: Attempt to invo

    这个报错是因为Android布局的控件 <view android:layout_width="match_parent" android:layout_height=&qu ...

  9. 浅谈新的布局方式-flex

    引言: 网页布局在flex出来之前,是由盒模型为底子,float,position,table,百分比来进行布局的,重绘的比较多,影响性能,复杂又不好维护.flex布局,可以简便.完整.响应式地实现各 ...

  10. 你以为的MongoDB副本集的高可用是真的高可用了吗?

    很久没来更新博客,自感是一个只会搬砖的劳工,总搞些MySQL相关的数据库实在无聊,且时不时遇到些不讲道理的Dev吧,真的是心累至极,有种想回头我也去干开发的冲动,当个需求者有话语权要风得风,要雨得雨多 ...