继承是类和类之间的关系,继承使得子类别具有父类别的属性和方法。

js里常用的如下两种继承方式:

原型链继承(对象间的继承)
类式继承(构造函数间的继承)

由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念。所以,要想实现继承,可以用js的原型prototype机制或者用applycall方法去实现。

JS继承的实现方式

1.原型链继承

function Human(name){
this.name = name
}
Human.prototype.run = function(){
console.log("我叫"+this.name+",我在跑")
return undefined
}
function Man(name){
Human.call(this, name)
this.gender = '男'
} var f = function(){}
f.prototype = Human.prototype
Man.prototype = new f() Man.prototype.fight = function(){
console.log('糊你熊脸')
}
  1. 基于class的继承, 用 funcion 实现
class Human{
constructor(name){
this.name = name
}
run(){
console.log("我叫"+this.name+",我在跑")
return undefined
}
}
class Man extends Human{
constructor(name){
super(name)
this.gender = '男'
}
fight(){
console.log('糊你熊脸')
}
}

上面两种方法的优缺点:

原型链继承

优点:

  • 非常简便的实现了多重继承的关系;
  • 能够确定原型和实例之间的关系;
    缺点:
  • 创建子类型实例时,无法向父类型传递参数,尤其是多重继承时,弊端非常明显;
  • 所有的实例会共享通过原型链继承的属性,在一个实例中改变了,会在另一个实例中反映出来;
  • 不能使用字面量添加新方法,会使继承关系中断(会重写constructor属性);
借用构造函数实现继承

优点:

  • 可以通过使用call可以在调用的时候向父类型传递参数。
    缺点:
  • 仅仅借用构造函数,方法都在构造函数中定义,就无法实现函数复用;
  • 通过借用构造函数,在父类型原型中定义的方法也无法通过原型链暴露给子类型;

JavaScript中继承的实现的更多相关文章

  1. Javascript中继承

    Javascript中继承 构造函数继承 原型继承 call和apply继承 组合继承

  2. javascript 中继承实现方式归纳

    转载自:http://sentsin.com/web/1109.html 不同于基于类的编程语言,如 C++ 和 Java,javascript 中的继承方式是基于原型的.同时由于 javascrip ...

  3. javascript中继承(一)-----原型链继承的个人理解

    [寒暄]好久没有更新博客了,说来话长,因为我下定决心要从一个后台程序员转为Front End,其间走过了一段漫长而艰辛的时光,今天跟大家分享下自己对javascript中原型链继承的理解. 总的说来, ...

  4. 实现JavaScript中继承的三种方式

    在JavaScript中,继承可以通过三种手法实现原型链继承 使用apply.call方法 对象实例间的继承.     一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似 ...

  5. 浅谈JavaScript中继承的实现

    谈到js中的面向对象编程,都有一个共同点,选择原型属性还是构造函数,两者各有利弊,而就片面的从js的对象创建以及继承的实现两个方面来说,官方所推荐的是两个相结合,各尽其责,各取其长,在前面的例子中,我 ...

  6. JavaScript中继承的那些事

    引言 JS是一门面向对象的语言,但是在JS中没有引入类的概念,之前特别疑惑在JS中继承的机制到底是怎样的,一直学了JS的继承这块后才恍然大悟,遂记之. 假如现在有一个“人类”的构造函数: functi ...

  7. JavaScript中继承机制的模仿实现

    首先,我们用一个经典例子来简单阐述一下ECMAScript中的继承机制. 在几何学上,实质上几何形状只有两种,即椭圆形(是圆形的)和多边形(具有一定数量的边).圆是椭圆的一种,它只有一个焦点.三角形. ...

  8. JavaScript中继承的实现方法--详解

    最近看<JavaScript王者归来>中关于实现继承的方法,做了一些小总结: JavaScript中要实现继承,其实就是实现三层含义:1.子类的实例可以共享父类的方法:2.子类可以覆盖父类 ...

  9. javascript中继承方式及优缺点(一)

    分别介绍原型链继承.call/apply继承(借用构造函数继承).组合继承.原型式继承.寄生式继承.寄生组合式继承 1. 原型链继承 核心:将父类的实例作为子类的原型 function SuperTy ...

  10. javascript中继承方式及优缺点(三)

    文以<JavaScript高级程序设计>上的内容为骨架,补充了ES6 Class的相关内容,从我认为更容易理解的角度将继承这件事叙述出来,希望大家能有所收获. 1. 继承分类 先来个整体印 ...

随机推荐

  1. Codeforces 480.E Parking Lot

    E. Parking Lot time limit per test 3 seconds memory limit per test 256 megabytes input standard inpu ...

  2. JSP2 特性

    JSP2 新特性 1.直接配置 JSP 属性 2.表达式语言 3.简化的自定义标签 API 4.Tag 文件语法 如果要使用 JSP2 语法,web.xml 文件必须使用 Servlet2.4 以上版 ...

  3. sloop公共程序之初始过程及启动

    1:sloop_init() 初始化主要是初始化静态sloop_*** 结构体和填充struct sloop_data 结构体中的成员. //初始化静态存储区给sloop_***结构体 static ...

  4. spring mvc入门配置

    现在主流的Web MVC框架除了Struts这个主力 外,其次就是Spring MVC了,因此这也是作为一名程序员需要掌握的主流框架,框架选择多了,应对多变的需求和业务时,可实行的方案自然就多了.不过 ...

  5. TCP和UDP相关概念

    位于传输层的协议,都是基于IP协议的. TCP是面向连接的.可靠的传输,UDP是无连接的.不可靠的传输.要进行TCp传输时候,需要进行三次握手,建立连接,然后才能发送数据,而且在发送过程中,有数据的确 ...

  6. Isomorphic JavaScript: The Future of Web Apps(译)

                                                                                                 Isomorp ...

  7. 《JavaScript 实战》:JavaScript 实现拖拽缩放效果

    拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小,例如选框效果.这里的拖拉缩放比一般的选框复杂一点,能设置八个方位(方向)的固定触发点,能设置最小范围,最大范围和比例缩放. 跟拖放效果一样,程 ...

  8. jQuery插件ASP.NET应用之AjaxUpload

    本次使用AJAXUPLOAD做为上传客户端无刷上传插件,其最新版本为3.9,官方地址:http://valums.com/ajax-upload/ 在页面中引入 jquery.min.1.4.2.js ...

  9. Linux 安装tomcat,搭建web app运行环境

    Tomcat 8 下载地址:https://tomcat.apache.org/download-80.cgi 解压tomcat:tar -xf apache-tomcat-8.5.31.tar.gz ...

  10. 下载Google My Tracks

    http://code.google.com/p/mytracks/source/browse/?name=2.0.2#hg%2FMyTracks%253Fstate%253Dclosed 需要类似的 ...