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提供的表示方式相同,可以与 ...
随机推荐
- JAVA springmvc参数
一.简单参数: package jd.com.contronller; import jd.com.projo.goods; import org.springframework.stereotype ...
- java 锁白话
一.锁 1.可见性: 定义:数据对所有线程可见 原因:cpu操作数据时会把数据读取到内存中去,可以理解为值做了备份,但是备份数据和原始数据在后续操作中不一定一致 实现:java使用volite关键字来 ...
- sprintboot 和swagger2整合生成文档
1.创建springboot 工程 2.引入maven依赖 <dependency> <groupId>io.springfox</groupId> <art ...
- 表单设置 disabled 后无法传值到后台的解决办法
在提交 from 表单时,下面的 input 无法正常提交给后台, 发现,如果input的字段设为disabled,该表单是无法提交的. <input type="text" ...
- Package 设计3:数据源的提取和使用暂存
SSIS 设计系列: Package设计1:选择数据类型.暂存数据和并发 Package设计2:增量更新 Package 设计3:数据源的提取和使用暂存 在使用SSIS Package处理海量数据时, ...
- Flask学习-Wsgiref库
一.前言 前面在Flask学习-Flask基础之WSGI中提到了WerkZeug,我们知道,WerkZeug是一个支持WSGI协议的Server,其实还有很多其他支持WSGI协议的Server.htt ...
- REST-framework快速构建API--初体验
一.快速上手 1.环境准备 安装restframework,注册app pip install djangorestframework INSTALLED_APPS = [ 'django.contr ...
- effective c++ 笔记 (18-22)
//---------------------------15/04/06---------------------------- //#18 让接口容易被正确使用,不易被误用 { // 1:为了防 ...
- docker之镜像管理命令
一.docker image 镜像管理命令 指令 描述ls 列出本机镜像build 构建镜像来自Dockerfilehistory 查看镜像历史inspect 显示一个或多个镜像详细信息pull 从镜 ...
- FME Cloud 账号申请流程
第一步,访问SAFE的FME Cloud注册页,官网明确表态,如果你是一个新的FME Cloud用户,你可以免费获得一个初级版.地址:https://console.fmecloud.safe.com ...