JavaScript中继承的实现
继承是类和类之间的关系,继承使得子类别具有父类别的属性和方法。
js里常用的如下两种继承方式:
原型链继承(对象间的继承)
类式继承(构造函数间的继承)
由于js
不像java
那样是真正面向对象的语言,js
是基于对象的,它没有类的概念。所以,要想实现继承,可以用js
的原型prototype机制或者用apply
和call
方法去实现。
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('糊你熊脸')
}
- 基于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中继承的实现的更多相关文章
- Javascript中继承
Javascript中继承 构造函数继承 原型继承 call和apply继承 组合继承
- javascript 中继承实现方式归纳
转载自:http://sentsin.com/web/1109.html 不同于基于类的编程语言,如 C++ 和 Java,javascript 中的继承方式是基于原型的.同时由于 javascrip ...
- javascript中继承(一)-----原型链继承的个人理解
[寒暄]好久没有更新博客了,说来话长,因为我下定决心要从一个后台程序员转为Front End,其间走过了一段漫长而艰辛的时光,今天跟大家分享下自己对javascript中原型链继承的理解. 总的说来, ...
- 实现JavaScript中继承的三种方式
在JavaScript中,继承可以通过三种手法实现原型链继承 使用apply.call方法 对象实例间的继承. 一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似 ...
- 浅谈JavaScript中继承的实现
谈到js中的面向对象编程,都有一个共同点,选择原型属性还是构造函数,两者各有利弊,而就片面的从js的对象创建以及继承的实现两个方面来说,官方所推荐的是两个相结合,各尽其责,各取其长,在前面的例子中,我 ...
- JavaScript中继承的那些事
引言 JS是一门面向对象的语言,但是在JS中没有引入类的概念,之前特别疑惑在JS中继承的机制到底是怎样的,一直学了JS的继承这块后才恍然大悟,遂记之. 假如现在有一个“人类”的构造函数: functi ...
- JavaScript中继承机制的模仿实现
首先,我们用一个经典例子来简单阐述一下ECMAScript中的继承机制. 在几何学上,实质上几何形状只有两种,即椭圆形(是圆形的)和多边形(具有一定数量的边).圆是椭圆的一种,它只有一个焦点.三角形. ...
- JavaScript中继承的实现方法--详解
最近看<JavaScript王者归来>中关于实现继承的方法,做了一些小总结: JavaScript中要实现继承,其实就是实现三层含义:1.子类的实例可以共享父类的方法:2.子类可以覆盖父类 ...
- javascript中继承方式及优缺点(一)
分别介绍原型链继承.call/apply继承(借用构造函数继承).组合继承.原型式继承.寄生式继承.寄生组合式继承 1. 原型链继承 核心:将父类的实例作为子类的原型 function SuperTy ...
- javascript中继承方式及优缺点(三)
文以<JavaScript高级程序设计>上的内容为骨架,补充了ES6 Class的相关内容,从我认为更容易理解的角度将继承这件事叙述出来,希望大家能有所收获. 1. 继承分类 先来个整体印 ...
随机推荐
- jsp 项目中 web.xml 的作用
每个 web 应用的 WEB-INF 路径下(而且必须位于该路径)的 web.xml 文件被称为配置描述符. 对于 java web 应用而言,WEB-INF 是一个特殊的文件夹,web 容器会包含该 ...
- vmvare安装ubuntu后
配置源: http://wiki.ubuntu.org.cn/%E6%BA%90%E5%88%97%E8%A1%A8#Trusty.2814.04.29.E7.89.88.E6.9C.AC 清理工作: ...
- SSH免密码登录,实现数据传输备份
简单来说,就是通过ssh-keygen -t rsa命令来产生一组公私钥,私钥是id_rsa,公钥是id_rsa.pub,把公钥上传到另一台服务器对应账号的.ssh/authorized_keys,即 ...
- [DeeplearningAI笔记]卷积神经网络1.6-1.7构造多通道卷积神经网络
4.1卷积神经网络 觉得有用的话,欢迎一起讨论相互学习~Follow Me 1.6多通道卷积 原理 对于一个多通道的卷积操作,可以将卷积核设置为一个立方体,则其从左上角开始向右移动然后向下移动,这里设 ...
- 为VSCODE添加右键菜单
参考:https://blog.csdn.net/GreekMrzzJ/article/details/82194913 1.创建一个名为vscode.reg的空文本文件,填入下列内容 Windows ...
- Linux 目录详解 树状目录结构图
1.树状目录结构图 2./目录 目录 描述 / 第一层次结构的根.整个文件系统层次结构的根目录. /bin/ 需要在单用户模式可用的必要命令(可执行文件):面向所有用户,例如:cat.ls.cp,和/ ...
- 谨慎重载clone方法
本文涉及到的概念 1.浅拷贝和深拷贝 2..clone方法的作用和使用方式 3.拷贝构造器和拷贝工厂 1.浅拷贝和深拷贝 浅拷贝 一个类实现Cloneable接口,然后,该类的实例调用clone方 ...
- Razor使用Parse()时最好指定“缓存名”
为什么? 本文的标题,明显有一种提醒的口吻. 从18年的生活经验看,如果想提醒人要怎么办,不要怎么办. 最好说明原因.那么小编开始说明原因喽. 哦对,说原因之前,先说交代一下背景,一句话 在非mvc下 ...
- Spring Boot工程结构推荐
工程结构(最佳实践) Spring Boot框架本身并没有对工程结构有特别的要求,但是按照最佳实践的工程结构可以帮助我们减少可能会遇见的坑,尤其是Spring包扫描机制的存在,如果您使用最佳实践的工程 ...
- 微信小程序rpx单位
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375p ...