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提供的表示方式相同,可以与 ...
随机推荐
- Python2.7-struct模块
struct模块 处理二进制数据,与C语言交互,可以较为方便的对C语言的struct类型和python中的数据进行转换 主要是用于将int,char之类的C语言中基础数据pack至一个二进制流的字符串 ...
- strstr(),strchr()
strstr($a, $b)和strchr()一样,起的别名,表示查找$a中第一次出现$b,并返回字符串的剩余部分: .strrchr()从后往前查第一个出现的 直接写两行代码: <?php $ ...
- 蜻蜓fm面试
一面: 面试官首先看简历上写了在腾讯的实习,然后就探讨了半天,各种虚拟化的技术.... 说完之后,估计都半小时过去了,然后就又说了一下你用什么语言,你做的东西都比较偏底层呢,然后你对工作有什么要求吗? ...
- go语言之行--数组、切片、map
一.内置函数 append :追加元素到slice里,返回修改后的slice close :关闭channel delete :从map中删除key对应的value panic : 用于异常处理,停 ...
- 20155238 实验四 Android程序设计
Android 安装Android Studio 按照教程依次完成安装步骤.安装所存的相应文件夹必须纯英文,不能出现特殊字符. 32位系统和64位系统是同一个安装文件.启动程序中32位与64位都有.根 ...
- Qt控件使用汇总
QTableWidget: //tab居中显示 QTabWidget::tab-bar { alignment: center; } //tab边框样式,边框颜色,前景色 QTabBar::tab { ...
- JDBC详解系列(一)之流程
---[来自我的CSDN博客](http://blog.csdn.net/weixin_37139197/article/details/78838091)--- JDBC概述 使用JDBC也挺长 ...
- JQuery快速入门-简介
一.什么是JQuery? jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...
- eclipse中怎么找项目部署的路径和找编译后的class路径
1.快捷键 ctrl+shift+R,会默认显示你的源文件.java的路径,如果没有.class的话,点击右上角的三角,选中 Show Derived Resource; 2.打开出现下图 3.按下 ...
- 一个web应用的诞生(3)--美化一下
经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的b ...