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提供的表示方式相同,可以与 ...
随机推荐
- jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化
jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 js监听输入框值的即时变化 网上有很多关于 onpropertychange.oni ...
- JAVA框架 Spring 入门
一.阐述: IoC:我们以前写的框架虽然我们已经进行分层,web.业务层.持久层.但是各个层之间的关系.耦合性比较高,那个层调用其他层的时候,需要new对应层的类的对象,这样的话,我们以后做修改的时候 ...
- expect 批量执行命令
在跳板机上执行脚本,登录到远程机器分区格式化挂载命令 #!/bin/bashpasswd='engine'/usr/bin/expect <<-EOFset time 40spawn ss ...
- 一个将lambda字符串转化为lambda表达式的公共类
一个将lambda字符串转化为lambda表达式的公共类.StringToLambda 使用方式如下: var module = new Module(); url = url.ToLower();/ ...
- 数据预取 __builtin_prefetch()
__builtin_prefetch() 是 gcc 的一个内置函数.它通过对数据手工预取的方法,减少了读取延迟,从而提高了性能,但该函数也需要 CPU 的支持. 该函数的原型为: void __bu ...
- Codeforces Educational round 58
Ediv2 58 随手AK.jpg D 裸的虚树,在这里就不写了 E 傻逼贪心?这个题过的比$B$都多.jpg #include <cstdio> #include <algorit ...
- SqlServer执行大的数据库脚本出错解决方法
如果执行线上项目拷下来sqlserver的.sql的数据库脚本文件,如果文件较大时,那么就会报错内存不足之类的. 这时可以在命令提示符使用命令来执行脚本文件.切记,执行前先改一下数据库存放位置! 命令 ...
- spark-windows(含eclipse配置)下本地开发环境搭建
spark-windows(含eclipse配置)下本地开发环境搭建 >>>>>>注意:这里忽略JDK的安装,JDK要求是1.8及以上版本,请通过 java ...
- 20155237 《JAVA程序设计》实验三(敏捷开发与XP实践)实验报告
20155237 <JAVA程序设计>实验三(敏捷开发与XP实践)实验报告 实验内容 敏捷开发与XP实践 XP基础 XP核心实践 相关工具 实验要求 1.没有Linux基础的同学建议先学习 ...
- vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...