ES6--Class、Module及常用特性
来源:互联网 发布:php简历管理系统 编辑:程序博客网 时间:2024/05/22 05:05
示例:ES5
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
示例:ES6的等价写法
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
实际上,类的所有方法都定义在类的prototype属性上面;在类的实例上面调用方法,其实就是调用原型上的方法。 p.constructor === Point.prototype.constructor; // true
注意:类中定义的方法,都是带有作用域的普通函数,而不是箭头函数。
当然属性名支持表达式方式
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
constructor方法
constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。
- 1
- 2
- 1
- 2
类的实例对象
必须通过new调用,否则会报错!
- 1
- 2
- 1
- 2
不存在变量提升
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
class表达式
和函数一样,class可以使用表达式的形式定义。通过表达式可以实现立即执行的class。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
继承
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
注意:一个子类继承了一个父类,那么在子类的constructor中必须使用super调用父类构造函数后才能在子类的constructor中使用this。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
取值函数(getter)和存值函数(setter)
在Class内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
私有方法
ES6中并没有支持,但是可以通过一些约定方式去实现
方式一:通过命名区分,如函数名增加”_”
方式二:通过Symbol值的唯一性
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
静态方法
方法前加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
注意:静态方法中,this的指向问题!!
问题
(1)不支持私用属性,只能通过一些约定实现
(2)不支持实例属性,只能通过Getter/Setter实现
(3)不支持多重继承
十九、Module
ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能在运行时确定这些东西。注意,ES6的模块自动采用严格模式,不管你有没有在模块头部加上”use strict”;。模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。
导出模块
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。
(1)导出单一接口
Sybtax:export <statement>
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
export语句需要具有声明部分和赋值部分。
- 1
- 2
- 1
- 2
(2)导出模块默认接口
Sybtax:export default <value>
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
(3)混合使用导出接口语句
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
(4)导出一个模块的所有接口
Sybtax:export * from 'module-name'
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
(5)导出一个模块的部分接口
Sybtax:export {member} from 'module-name'
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
(6)导出一个模块的默认接口
Sybtax:export {default} from 'module'
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
引入模块
(1)引入默认模块
- 1
- 2
- 1
- 2
(2)引入模块部分接口
- 1
- 2
- 1
- 2
(3)引入全部接口到指定命名空间
- 1
- 2
- 1
- 2
(4)混入引入默认接口和命名接口
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
(5)不引入接口,仅运行模块代码
- 1
- 1
ES6中提供的模块机制,可以“模块内容选择性引入”,其意味着可以通过Rollup和webpack2利用ES6模块化机制只压缩必要代码,最大程度地精简JavaScript引用的体积,避免了昂贵的网络带宽和较慢的页面加载速度。
总结:
写到这里,ES6的所有语法基本已全部描述,有彩蛋、也有单纯的语法糖。里面大多数的语法也可用通过ES5去shim(除了Proxy)。在Node6+以上,几乎所有的ES6语法被支持,前端可通过Babel6工具进行转换。在使用ES6过程中,有几个很爽的小特性,特整理如下:
设置对象变量键值的语法
ES6之前,不能在对象字面量里设置变量键值,必须要在对象初始化后增加键/值:
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
ES6中新增了[]方式,完美解决:
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
模板字符串
ES6之前创建多行字符串必须使用\
作连接符。模板字符串的出现,让字符串拼接变得简单可维护。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
### find/findIndex
JavaScript 提供了 Array.prototype.indexOf
方法,用来获取一个元素在数组中的索引,但是 indexOf
只能用来查找确切的值,不可以指定查询条件。find
和 findIndex
可以设置查询条件,在数组中查找到第一个满足条件的值。从而避免了循环处理!
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
扩展运算符:…
扩展运算符表示一个数组或者一个可迭代对象可以在一次调用中将它们的内容分割为独立的参数。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
它能把可迭代对象(NodeList
, arguments
等等)转化为真正的数组,不再需要使用 Array.from
或Array.prototype.slice.call()
方法。
默认参数值
- ES6--Class、Module及常用特性
- ES6--Class、Module及常用特性
- ES6 Class Module模块化 案例
- ES6新特性中的Module
- 常用的es6特性
- ES6入门 —— Class和Module
- ES6常用新特性总结
- ES6的一些常用特性
- ES6十大常用特性
- es6常用特性学习总结
- 最常用的ES6特性
- ES6新特性 Class的实现
- ES6新特性—CLass类
- ES6 module
- ES6之Class的常用功能解读
- 浅尝es6/es2015常用新特性
- 总结ES6常用的新特性
- 总结ES6常用的新特性
- lombok简单使用
- 函数声明,函数表达式,块级作用域小结
- itk中的特征提取算法(三)
- mybatis-generator用法
- JSP数据交互
- ES6--Class、Module及常用特性
- 程序员最核心的竞争力是什么?
- PHP_安全编程建议
- idea中dependencies中总是有红色波浪线(缺少dependency)的解决办法
- 谷歌官方MVP例子分析
- python爬取mm131图片
- 内容安全策略(CSP)_防御_XSS_攻击的好助手
- 第二章 redis的安装
- 【SpringMVC之配置文件(一)】spring 里面的ApplicationContext.xml 和 xxx-servlet.xml分别的作用是什么?