在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. travis-ci 中运行 puppeteer

    通过 travis-ci 可以构建基于 puppeteer 的自动化任务,基于此构建的一个 计划任务 puppeteer中调用需要禁用沙箱环境 https://github.com/GoogleChr ...

  2. 【安富莱二代示波器教程】第17章 附件B---功能扩展和改进方向

    完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=45785 第17章      附件B---功能扩展和改进方向   ...

  3. [Swift]LeetCode649. Dota2 参议院 | Dota2 Senate

    In the world of Dota2, there are two parties: the Radiantand the Dire. The Dota2 senate consists of ...

  4. SpringMVC接收json数组对象

    最近帮一个妹子解决一个需求,就是前台使用ajax传三个相同的对象,再加一个form表单对象.然后遇到各种问题,终于解决了,@RequestBody接收Json对象字符串 ​以前,一直以为在Spring ...

  5. MVC的App_Code这个特殊文件夹

    对于一个之前编译一点都没有问题的项目,突然间调试就出现了一个报错: 然而你会天真的认为,这个真的是using的问题吗!别傻了,我检查了一遍又一遍: 首先这个是有using的! 其实代码编写上也是没有报 ...

  6. Web系统大规模并发:电商秒杀与抢购-----面试必问

    一.大规模并发带来的挑战 在过去的工作中,我曾经面对过5w每秒的高并发秒杀功能,在这个过程中,整个Web系统遇到了很多的问题和挑战.如果Web系统不做针对性的优化,会轻而易举地陷入到异常状态.我们现在 ...

  7. 你安装的是SUN/Oracle JDK还是OpenJDK?

    目录 1 如何查看你安装的JDK版本 1.1 要用到的命令行工具 1.2 查看JDK的版本 2 什么是 OpenJDK 2.1 OpenJDK 的来历 2.2 Oracle JDK的来历 3 Orac ...

  8. 一个类是怎么被JVM执行的

    现有如下代码,那么我们的JVM是怎么执行的呢 public class Test{ public static vodi main(String[] args){ MaYun my=new MaYun ...

  9. 带着萌新看springboot源码09(springboot+JdbcTemplate)

    emmm.....常规开局,继续说一下废话,前面简单的说了一下spring的ioc容器创建原理(花了不少时间去看了别人的博客+查了不少资料+自己的理解),相信大家对ioc容器有了一个初步的认识了. s ...

  10. Spring Boot 路由

    多路由指向同一个方法 @GetMapping(value = {"/login","/index"}) 访问http://127.0.0.1/index 和 h ...