浅谈es5和es6中的继承
首先给大家介绍下在es5中构造函数的继承
function A(){
2 //构造函数A
3 this.name="我是A函数";
4 }
5
6 A.prototype={
7 constructor:A,
8 render(){
9 console.log("我是A实例的render方法")
10 }
11 }
12
13 let a=new A();
14
15 function B(a){
16 this.age=a;
17 A.call(this);
18 //通过call改变this指向从而达到继承A函数里面的私有属性
19 console.log(this.name)
20 }
21 let b=new B("18")
22
23 //B函数继承A函数的原型
24 //B.prototype=A.prototype; 如果是这样直接继承的话会出现如果你改变B的方法A的同时在变
25 B.prototype=Object.create(A.prototype)
26 //原型继承完毕需要更改一下constructor指向
27 B.prototype.constructor=B;
28 B.prototype.render();//这样的话通过B函数的原型就能调用A函数的原型方法render了
29 console.log(b) //总结 在es5中继承无非就是先私有属性的继承 注意通过call和apply改变this指向 接着就是原型的继承了
其实想要彻底弄清es5的继承可以从原型链上去理解 下面通过几个方法给大家介绍下原型链
//在上面代码的基础上
//在上方代码中A函数没有toString这个函数 假如说我们通过a调用toString这个函数能不能调用到呢
a.toString()
//显而易见 我们能够找到这个函数 为什么呢 因为我们通过a找这个方法时候
//首先系统会先去我们A这个构造函数中去寻找 假如说我们从A中没有找到
//然后接着去A的原型prototype去寻找 如果这里面又没找到接着去找a的__proto__
//如果这个a的__proto__里面没有找到就接着再去__proto__去找 ,顺着proto
//找到最后是null //所以如果我们构造函数中有这个方法的话会先取我们构造函数中的 原型中有的话就去原型找
//都没有才去__proto__找
配张原型链的图片理解下
接下来分享下es6的继承 es6的继承相对来说就简单多了 也更方便初学者使用了
es6的class函数语法类似与构造函数 基本上大同小异
class A{
constructor(){//相当于原型构造函数
this.name="aa";//成员属性或者叫私有属性
this.init()
}
init(){
//这些都是原型方法
//基本上类似构造函数
}
} class的继承
class B extends A{
constructor(){
super(A函数的constructor传的参数)
//super()是一个语法糖 作用是调用父构造函数
//在没有调用super之前this指向不能使用
}
}
浅谈es5和es6中的继承的更多相关文章
- 浅谈ES5和ES6继承和区别
最近想在重新学下ES6,所以就把自己学到的,记录下加强下自己的理解 首先先简单的聊下ES5和ES6中的继承 1.在es5中的继承: function parent(a,b){ this a = a; ...
- ES5和ES6中的继承
看到一篇写的非常好的关于js继承的文章,其中对构造函数.原型.实例之间的关系的描述十分透彻,故转载作者文章以随时学习,并供大家共同进步! ES5 ES5中的继承,看图: function Super( ...
- ES5和ES6中的继承 图解
Javascript中的继承一直是个比较麻烦的问题,prototype.constructor.__proto__在构造函数,实例和原型之间有的 复杂的关系,不仔细捋下很难记得牢固.ES6中又新增了c ...
- ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
- ES5与ES6中的继承
ES5继承在ES5中没有类的概念,所以一般都是基于原型链继承,具体的继承方法有以下几种: 父类: function Father (name) { this.name = name || 'sam' ...
- 浅谈surging服务引擎中的rabbitmq组件和容器化部署
1.前言 上个星期完成了surging 的0.9.0.1 更新工作,此版本通过nuget下载引擎组件,下载后,无需通过代码build集成,引擎会通过Sidecar模式自动扫描装配异构组件来构建服务引擎 ...
- 浅谈线程池(中):独立线程池的作用及IO线程池
原文地址:http://blog.zhaojie.me/2009/07/thread-pool-2-dedicate-pool-and-io-pool.html 在上一篇文章中,我们简单讨论了线程池的 ...
- 【ASP.NET MVC系列】浅谈NuGet在VS中的运用
一 概述 在我们讲解NuGet前,我们先来看看一个例子. 1.例子: 假设现在开发一套系统,其中前端框架我们选择Bootstrap,由于选择Bootstrap作为前端框架,因此,在项目中,我们 ...
- 浅谈如何检查Linux中开放端口列表
给大家分享一篇关于如何检查Linux中的开放端口列表的详细介绍,首先如果你想检查远程Linux系统上的端口是否打开请点击链接浏览.如果你想检查多个远程Linux系统上的端口是否打开请点击链接浏览.如果 ...
随机推荐
- linux命令大全比较完整
转:https://www.cnblogs.com/yjd_hycf_space/p/7730690.html 最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是 ...
- 屏幕录像LICEcap
简介 LiceCap是一款轻量级屏幕录制工具 官网链接 windows版下载链接 Demo 以下是访问http://www.cockos.com/licecap/的屏幕录像
- 微信小程序 - 弹出键盘遮挡住输入框
在开发微信小程序的时候遇到,输入用户名或者手机号以及地址,手机键盘调起来,会把输入框遮挡. 如图: 以上两张图是自己工作中遇到的,此处不要着急,一个属性帮你搞定. cursor-spacing:指定光 ...
- 为订阅内虚拟机批量安装并配置 Microsoft Anti-Malware 扩展
本文提供了对订阅内的 Windows 经典部署虚拟机和资源管理器部署虚拟机执行批量安装并配置 Microsoft Anti-Malware 扩展的 PowerShell 脚本. 关于安装 Window ...
- CentOS随笔 - 3.CentOS7安装Oracle 11g xe
前言 转帖请注明出处: http://www.cnblogs.com/Troy-Lv5/ 由于手上很多项目都是采用Oracle在进行开发, 所以安装Oracle成为必然. 当然有朋友会想为什么不安装1 ...
- SVN合并时报错:合并跟踪不允许丢失子树Merge tracking not allowed with missing subtrees; try restoring these items
使用的是TortoiseSVN; Merge tracking not allowed with missing subtrees; try restoring these items 下面会有跟着几 ...
- Visual Studio Code (vscode)编译C++
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮.智能代码补全.自定义热键.括号匹配.代码片段. ...
- 深入浅出SharePoint2013——常用术语
CAS(Code Access Security)自定义代码访问安全性 Sandboxed solution 沙箱解决方案
- 关于 MapReduce
继续摘抄<Hadoop 权威指南>第二章,跳过不少于我复杂的东西,但依然是捉急的效率,开始觉得看不完另外一本全英文的书,大概每天要看5页吧... 以上. MapReduce 是一种可用于数 ...
- servlet的生命周期详解
一.servlet生命周期原理解析 1.Servlet生命周期分为三个阶段: (1)初始化阶段 调用init()方法 (2)响应客户请求阶段 调用service()方法 (3)终止阶段 调用dest ...