ES6学习笔记(五):Class和Module
Class
Class
只是一个语法糖,其功能用es5也能实现,但是比es5更符合类的期待
定义:
constructor代表构造方法,而this指向new 生成的实例
定义类方法时,可以不使用function
注意:类的内部所有定义的方法,都是不可枚举的(non-enumerable)。
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
使用
new Point(x,y)
constructor
类的默认方法,new生成对象实例的时候执行的就是这个方法
一个类必须有constructor方法
constructor默认返回实例对象
Class不存在变量提升
new Foo(); // ReferenceError
class Foo {}
Class的继承
extends关键字
class ColorPoint extends Point {}
注意:
1.子类必须调用super,子类本身没有this,super是父类的构造函数,调用super,子类才有this
这是因为子类实例的构建,是基于对父类实例加工,只有super方法才能返回父类实例。
类的prototype属性和__proto__属性
1.子类的__proto__指向父类
2.子类的prototype的__proto__指向父类的.prototype
class A {
}
class B extends A {
}
B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true
super关键字
1.调用super方法时,super代表父类的constructor方法
2.作为属性super调用时,super代表父类本身
ES6改变了Object构造函数的行为,一旦发现Object方法不是通过new Object()这种形式调用,ES6规定Object构造函数会忽略参数。
getter和setter
Generate方法
直接在方法属性前加*
静态方法static
一个方法前加static,则该方法不会被继承,而是通过类来直接调用
父类的静态方法,可以被子类继承。
静态方法也可以从super上调用,因为super指向父类本身
注意:Class内部只有静态方法,没有静态属性。
new.target
(在构造函数中)返回new命令作用于的那个构造函数。
mixin模式
???
Module
严格模式
es6的模块自动使用严格模式
export
as
通常情况下,export输出的变量就是本来的名字,但是可以使用as关键字重命名。
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
export命令必须处于模块顶层。
export命令规定的是对外的接口。
import
import具有变量提升效果,会提升到模块头部执行
default
import和export的默认变量名
es6模块加载与CommonJS
CommonJS模块输出的是一个值的拷贝,而ES6模块输出的是值的引用。
CommonJS一旦输出一个值,模块内部的变化就影响不到这个值。
ES6模块原始值变了,import输入的值也会跟着变。
ES6学习笔记(五):Class和Module的更多相关文章
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- ES6学习笔记五(promise异步)
知识点1:rosolve是执行下一步then() // Promise { let ajax=function(){ console.log('执行2'); return new Promise(fu ...
- ES6学习笔记五:Promise异步任务
一:Promise对象 Promise对象代表一个异步操作,有三种状态:Pending(进行中).Resolved(已完成,又称 Fulfilled)和Rejected(已失败). 二:创建与使用 v ...
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
- ES6学习笔记<三> 生成器函数与yield
为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- ES6学习笔记<一> let const class extends super
学习参考地址1 学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...
- es6从零学习(五):Module的语法
es6从零学习(五):Module的语法 ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量 一:es6模块化和 CommonJS 和 AMD 模块 (运行 ...
- C#可扩展编程之MEF学习笔记(五):MEF高级进阶
好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...
- (转)Qt Model/View 学习笔记 (五)——View 类
Qt Model/View 学习笔记 (五) View 类 概念 在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...
随机推荐
- iOS VideoToolBox decoder解码失败(-12909和-12911)问题解决
对于任何H.264解码器而言,都要将SPS和PPS信息传递给解码器.FFmpeg内部做了设置,所以没有显示设置.但是对于硬件解码器来讲,开发者必须手动设置.另外,使用FFmpeg解码出来的视频帧是以Y ...
- jqgrid 点击列头的超链接或按钮时,不触发列排序事件
接上篇文章:jqgrid 将列头设置为超链接或按钮 如果在列头设置了超链接或按钮,在点击超链接或按钮时会触发列的排序事件. 原由:点击超链接/按钮会触发排序的冒泡事件 解决方法:点击超链接/按钮时,阻 ...
- 解决php的交互式命令行不能正常启动的问题兼介绍psysh
今天在自己的mac电脑上试着启动php的交互式命令行,发现敲下命令后一直卡在提示进入的地方,但没有出现已经进入的提示符,百度了下应该是与readline有关. 于是安装php的readline扩展,在 ...
- golang channel 源码剖析
channel 在 golang 中是一个非常重要的特性,它为我们提供了一个并发模型.对比锁,通过 chan 在多个 goroutine 之间完成数据交互,可以让代码更简洁.更容易实现.更不容易出错. ...
- Android Environment.getExternalStorageDirectory() 获取的是内部存储还是外部存储? - z
这几天在做Android应用的远程更新功能,将下载的更新包放在移动设备上指定的目录.用的是 Environment.getExternalStorageDirectory() 这个方法,然后在获取的 ...
- 2017-2018-2 20155315《网络对抗技术》Exp7 :网络欺诈防范
实验目的 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 实验内容 简单应用SET工具建立冒名网站 ettercap DNS spoof 结合应用两种技术,用DNS sp ...
- EZ 2018 03 09 NOIP2018 模拟赛(三)
最近挺久没写比赛类的blog了 链接:http://211.140.156.254:2333/contest/59 这次的题目主要考验的是爆搜+打表的能力 其实如果你上来就把所有题目都看过一次就可以知 ...
- 由于未能创建 Microsoft Visual C# 2008 编译器,因此未能打开项目 "..."的解决方法
如果遇到这种问题,我们通常只要在 Visual Studio 2017 的命令提示符工具里执行下列命令即可: devenv /resetskippkgs 如果还是不行的话,可以先把 Visual St ...
- 原生 JS 实现手机验证码倒计时
可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value): ...
- [CF986F]Oppa Funcan Style Remastered[exgcd+同余最短路]
题意 给你 \(n\) 和 \(k\) ,问能否用 \(k\) 的所有 \(>1\) 的因子凑出 \(n\) .多组数据,但保证不同的 \(k\) 不超过 50 个. \(n\leq 10^{1 ...