ES6 Class类、模块 (四)
1.Class类
1.1基本用法
类定义
// 匿名类
let Example = class {
constructor(a) {
this.a = a;
}
}
// 命名类
let Example = class Example {
constructor(a) {
this.a = a;
}
}
类表达式可以为匿名或命名。
类声明
class Example {
constructor(a) {
this.a = a;
}
}
注意不可以重复声明否则会报VM88:1 Uncaught SyntaxError: Identifier ‘Example’ has already been declared错误。
类的主体
属性
prototype:覆盖方法 / 初始化时添加方法。
Example.prototype={
//methods
}
//添加方法
Object.assign(Example.prototype,{
//methods
})
静态属性:class 本身的属性,即直接定义在类内部的属性( Class.propname ),不需要实例化。 ES6 中规定,Class 内部只有静态方法,没有静态属性。
class Example {
// 新提案
static a = 2;
}
// 目前可行写法
Example.b = 2;
公共属性
class Example{}
Example.prototype.a = 2;
实例属性:定义在实例对象( this )上的属性。
class Example {
a = 2;
constructor () {
console.log(this.a);
}
}
方法
constructor 方法是类的默认方法,创建类的实例化对象时被调用。
class Example{
constructor(){
console.log('我是YY');
}
}
new Example(); // 我是YY
静态方法
class Example{
static sum(a, b) {
console.log(a+b);
}
}
Example.sum(1, 2)
原型方法
class Example {
sum(a, b) {
console.log(a + b);
}
}
let exam = new Example();
exam.sum(1, 2); // 3
实例方法
class Example {
constructor() {
this.sum = (a, b) => {
console.log(a + b);
}
}
}
类的实例化
class Example {}
let exam1 = Example();
// Class constructor Example cannot be invoked without 'new'
class 的实例化必须通过 new 关键字,否则会报错。
实例化对象
class Example {
constructor(a, b) {
this.a = a;
this.b = b;
console.log('Example');
}
sum() {
return this.a + this.b;
}
}
let exam1 = new Example(2, 1);
let exam2 = new Example(3, 1);
console.log(exam1._proto_ == exam2._proto_); // true
exam1._proto_.sub = function() {
return this.a - this.b;
}
console.log(exam1.sub()); // 1
console.log(exam2.sub()); // 2
1.2封装与继承
getter / setter
class Example{
constructor(a, b) {
this.a = a; // 实例化时调用 set 方法
this.b = b;
}
get a(){
console.log('getter');
return this.a;
}
set a(a){
console.log('setter');
this.a = a; // 自身递归调用
}
}
getter 与 setter 必须同级出现,否则会直接输出undefined。
extends
class Child extends Father { ... }
通过 extends 实现类的继承。
super
子类 constructor 方法中必须有 super ,且必须出现在 this 之前,否则会报Uncaught ReferenceError: Must call super constructor in derived class before accessing ‘this’ or returning from derived constructor错误。
注意要点
var Father = {
// ...
}
class Child extends Father {
// ...
}
// Uncaught TypeError: Class extends value #<Object> is not a constructor or null
// 解决方案
Object.setPrototypeOf(Child.prototype, Father);
不可继承常规对象。
2.模块
2.1export 与 import
export 命令可以出现在模块的任何位置,但必需处于模块顶层。
import 命令会提升到整个模块的头部,首先执行。
/*-----export [module1.js]-----*/
let myName = "Tom";
let myAge = 20;
let myfn = function(){
return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass = class myClass {
static a = "yeah!";
}
export { myName, myAge, myfn, myClass }
/*-----import [module2.js]-----*/
import { myName, myAge, myfn, myClass } from "./module1.js";
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(myAge);// 20
console.log(myName);// Tom
console.log(myClass.a );// yeah!
as 的用法
/*-----export [module1.js]-----*/
let myName = "Jerry";
export { myName as exportName }
/*-----import [module2.js]-----*/
import { exportName as name1 } from "./module1.js";
console.log(name1);// Jerry
export 命令导出的接口名称,须和模块内部的变量有一一对应关系。
导入的变量名,须和导出的接口名称相同,即顺序可以不一致。
export default 命令
var a = "My name is Tom!";
export default a; // 仅有一个
export default var c = "error";
// error,default 已经是对应的导出变量,不能跟着变量声明语句
export default function(){
}
import b from "./module1.js"; // 不需要加{}, 使用任意变量接收
在一个文件或模块中,export、import 可以有多个,export default 仅有一个。
export default 中的 default 是对应的导出接口变量。
通过 export 方式导出,在导入时要加{ },export default 则不需要。
export default 向外暴露的成员,可以使用任意变量来接收。
2.2复合使用
export 与 import 可以在同一模块使用,使用特点:
可以将导出接口改名,包括 default。
复合使用 export 与 import ,也可以导出全部,当前模块导出的接口会覆盖继承导出的。
export { foo, bar } from "methods";
// 约等于下面两段语句,不过上面导入导出方式该模块没有导入 foo 与 bar
import { foo, bar } from "methods";
export { foo, bar };
/* ------- 特点 1 --------*/
// 普通改名
export { foo as bar } from "methods";
// 将 foo 转导成 default
export { foo as default } from "methods";
// 将 default 转导成 foo
export { default as foo } from "methods";
/* ------- 特点 2 --------*/
export * from "methods";
模块的好处
1.减少命名冲突
2.避免引入时的层层依赖
3.可以提升执行效率
上一篇: jquery中animate()的用法
下一篇: jquery自定义动画