欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6语法糖(class)、module模块化 笔记

程序员文章站 2022-06-28 09:47:23
ES6语法糖(class)、module模块化1.class基本用法...

ES6语法糖(class)、module模块化

1.class基本用法

1.基础写法

ES6语法糖(class)、module模块化 笔记

2.属性表达式写法
    - - 类的属性名,可以采用表达式 

ES6语法糖(class)、module模块化 笔记

3.Class 表达式 写法

ES6语法糖(class)、module模块化 笔记

4.constructor 方法
  - -  constructor()方法是类的默认方法,一个类必须有constructor()方法
  - -  如果没有显式定义,一个空的constructor()方法会被默认添加

2.静态方法

  1.static
  	- - Point类的fn方法前有static关键字,表明该方法是一个静态方法
  	- - 直接在Point类上调用(Point.fn())
  	- - 不能在Point类的实例上调用 -> 报错
  	- - 静态方法若包含this关键字,这个this指的是类,而不是实例
  	- - 父类的静态方法,可以被子类继承
  	- - 静态方法也是可以从super对象上调用的

ES6语法糖(class)、module模块化 笔记

2.静态属性
   - - 静态属性指的是 Class 本身的属性(Class.propName),非定义实例上的属性

ES6语法糖(class)、module模块化 笔记

3.私有方法和私有属性

私有方法和私有属性,是只能在类的内部访问的方法和属性,外部不能访问
 - - 一种做法是在命名上加以区别
 - -  另一种方法就是索性将私有方法移出类,因为类内部的所有方法都是对外可见的
 - - 还有一种方法是利用Symbol值的唯一性,将私有方法的名字命名为一个Symbol值
 单例模式 —> 保证一个类只有一个实例  --> 通用性不强

4. class 继承

1.extends 关键字

ES6语法糖(class)、module模块化 笔记

2. Object.getPrototypeOf()
  - - Object.getPrototypeOf方法可以用来从子类上获取父类

ES6语法糖(class)、module模块化 笔记

3.super 关键字
 - - 子类必须在constructor方法中调用super方法,否则新建实例时会报错
 - - 不调用super方法,子类就得不到this对象
 - - 只有先调用super之后,才可以使用this关键字,否则会报错
 - - super这个关键字,既可以当作函数,也可以当作对象
 		- - 作为函数时,super()只能用在子类的构造函数之中,用在其他地方就会报错 
 		- - super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类

ES6语法糖(class)、module模块化 笔记
ES6语法糖(class)、module模块化 笔记

5.类的 prototype 属性和__proto__属性

- - ES5 中
	- - 每一个对象都有__proto__属性,指向对应的构造函数的prototype属性
- - ES6 中
	- - 子类的__proto__属性,表示构造函数的继承,总是指向父类
	- - 子类prototype属性的__proto__属性,表示方法的继承,总是指向父类的prototype属性

ES6语法糖(class)、module模块化 笔记

module 模块化

1.export 导出 命令

- - 1.export 导出 变量
	 - - export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系
	 - - 导出时,export命令后面要加上  {  }
	 - - export命令可以出现在模块的任何位置,只要处于模块顶层就可以,export语句放在函数之中,结果报错

ES6语法糖(class)、module模块化 笔记
- - 2.export 导出 函数 或者 类(class)

ES6语法糖(class)、module模块化 笔记

2.export default 导出 命令

- - 1.export default 命令 只能 导出单一变量 或 函数 或 类

ES6语法糖(class)、module模块化 笔记

3.import 导入 命令

- - 对照下面伪代码
	- - 加载profile.js文件,并从中导入变量
	- - import命令接受一对大括号,里面指定要从其他模块导入的变量名
	- - 大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同
	- - 使用as关键字,可将导入的变量重命名

ES6语法糖(class)、module模块化 笔记

- - import命令输入的变量都是只读的,不能改写
- - 如果  x  是一个对象,改写 x 的属性是允许的

ES6语法糖(class)、module模块化 笔记

- - 注:模块引入页面中 必写属性 type="module"

ES6语法糖(class)、module模块化 笔记

- - 按需加载  import()函数
	- -  返回一个 promise 对象

ES6语法糖(class)、module模块化 笔记

ES 2020

1.合并 空 运算符
	- - 在ES5 中   空字符串  或者 0 会当做 false 处理
	- -  合并空字符串后  空字符串 和 0 会正常输出

ES6语法糖(class)、module模块化 笔记

2.可选链式操作符  
	- -	ES5 中,找不到对象的属性时 会报错
	- - 使用可选链式操作符   找不到对象的属性时 会输出一个 undefined

ES6语法糖(class)、module模块化 笔记

本文地址:https://blog.csdn.net/weixin_44434872/article/details/111826350

相关标签: ES6笔记 es6