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

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. lnmp集成环境Access Denied的问题

    在你的php.ini配置文件中,设置cgi.fix_pathinfo=1

  2. ACE服务端编程2:ACE跨平台之数据类型和宽字符

    ACE网络库的主要优势之一就是跨平台,ACE提供了操作系统API和编译器级别的跨平台解决方法,使开发人员不用再去关心操作系统和编译器的差异,但因此也带来了ACE的复杂性. ACE网络库的组织结构主要分 ...

  3. 第3章-Vue.js 指令扩展 和 todoList练习

    一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...

  4. cmd编译java程序出现:找不到或无法加载主类的原因以及解决办法 以及 给java的main方法传递args参数

    原因: 1.java源程序中没有主类main方法. 2.java源程序中包含有eclipse等IDE工具生成的package包. 解决办法(对应以上的原因): 1.运行含有main的类 2.将java ...

  5. 前端PHP入门-004-数据类型,特别需要注意字符串

    人类世界对万事万物都有种类划分,例如: 哺乳动物 人.猫.马.鸭嘴兽-.等等 蔬菜 西红柿.波菜.茄子-.等等 水果 西瓜.桃子.苹果-.等等 数据类型:就是对数据分类的一个划分而已 整型就是整数 我 ...

  6. 重构改善既有代码设计--重构手法18:Self Encapsulate Field (自封装字段)

    你直接访问一个值域(field),但与值域之间的耦合关系逐渐变得笨拙. 为这个值域建立取值/设值函数(getting/setting methods),并且只以这些函数来访问值域. private i ...

  7. 使用条件注释判断 IE 浏览器版本

    IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解.比如普通的HTML注释是: <!--This is a comment--> 而只有IE可读的IE条件注释是 ...

  8. 微信小程序rpx单位

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375p ...

  9. 通过cordova将vue项目打包为webapp

    准备工作:需要之前配置好vue-cli脚架构,安装好cordova环境.下面开始对vue.js项目进行打包,打包环境为Android. 可以看下我的github:https://github.com/ ...

  10. Shell-history命令加记录用户IP

    记录输入的命令 history命令可以查看用户输入过的命令,一个典型history命令输出如下: 980 2017-05-29 20:17:37 cd - 981 2017-05-29 20:17:4 ...