ES6类和装饰器的使用总结

前言

我们都知道Javascript通过原型实现继承

function Animal(name,subject){
  this.name=name;
  this.subject=subject;
};

Animal.prototype.constructor = Animal;
var tom = new Animal('tom','cat');
console.log(tom); => //Animal {name: 'tom', subject: 'cat'}

1
2
3
4
5
6
7
8
9

ES6提供了class类,class本质上还是function,它可以看作是function的语法糖。

1. class的基础使用

1.1 准备环境
class语法是es6的标准,目前是不被浏览器完全支持的,我们需要一些工具将代码编译成es5

• typescript

• rollup + babel 或者 webpack+ babel

babel的配置比较麻烦,感兴趣的可以自行百度,这里我们直接使用typescript
typescript本身是支持es6的,我们只需要安装下就可以
执行

//安装到全局
npm install typescript -g
1
2

新建index.ts文件

calss Animal {

}
var cat = new Aminal();
1
2
3
4

控制台执行下 tsc index.ts 会自动在当前目录下生产一个index.js,这个就是typescript编译后的文件,可以直接运行在浏览器或者使用node执行

1.2 类的基础使用

//匿名类
const Example = class {
  constructor(){};
};

//命名类
const Example = calss Eaxmple {
  constructor(){};
};

//Example实例
const eaxmplae  = new Example();
console.log(example); //Example {};

1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.3 成员方法和成员变量以及构造函数

calss Animal {

  //构造函数
  cobstructor(name:string, age:number, subject:string){
    this.name = name;
    this.age = age;
  };
  
  //成员变量
  subject: string;
  name: string;
  age: number;

  //成员方法
  setAge(age: number){
   this.age = age;
  };
  
}

const tigger = new Animal('tigger',1,'猫科');
tigger.setAge(2);
console.log(tigger); //Animal {name:'tigger', age:2 ,subject:'猫科'};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• 成员方法和成员属性是继承给具体的Animal实例的,通过生成的实例去调用
• 在执行new Animal 的时候构造函数会自动执行

1.4 静态方法和静态属性

calss Animal {
  static className: 'animal';
  static getClassName: function(){
    return this.className;
  };

  constructor(){};
};

Animal.getClasssType(); // animal
1
2
3
4
5
6
7
8
9
10

• 通过static关键字定义静态属性/方法
• 静态属性和静态方法直接通过类名调用

2. 类的继承

2.1 通过extends关键字继承

    //动物类
	class Animal {
	  static className = '动物';
	  static getClassName(){
	   return this.className;
	  };
	
	  //每个动物都有叫声
	  animalCall(){
	   return '动物的叫声';
	  };
	  test(){
	    return 'Animal Test';
	  }
	};
	
	//老虎类继承动物类
	class Tigger extends Animal{
	name: string;
	age: number;
	 constructor(name: string,age: 21){
	   super();  //调用父类的构造方法
	   this.name = name;
	   this.age = age;
	 };
	
	 test1(){
	  //在成员方法中调用通过super调用父类的成员方法
	  return super.test();
	 }
	 
	 //在静态方法中调用父类的静态方法
	  static getAnimalName(){
	   return super.getClassName();
	 }
	};
	
	const tigger = new Tigger('jack',21);
	
	//调用从Animal继承过来的成员方法
	console.log(tigger.animalCall());//动物的叫声
	console.log(tigger.test1());//Animal Test
	console.log(Tigger.getAnimalName());// 动物
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

• 类的构造函数可以省略,如果子类中写了构造函数则一定要写super(),且super只能在子类的构造函数中调用
• 子类继承了父类的成员方法和成员变量
• 通过super可访问到父类的成员方法/属性和静态方法/属性,在成员方法中super的this指向父类的原型对象,在静态方法中super的this指向父类

2.2 super()的时候做了哪些事情?

1. 执行父类的构造函数
2. 绑定父类的this

下面是ts编译后的js文件,重点看圈出来的那行代码

var _this = _super.call(this) || this 这个就是super执行的时候做的事情。这里进行了this的绑定,如果父类的构造函数有返回对象的话就将this绑定到这个返回值。所以子类构造函数里使用this的语句一定要写super执行之后。

4. 装饰器

装饰器是一个函数,在代码编译阶段修改类的行为

4.1 类装饰器

	//为动物类添加科属的装饰器
	function addSubject(targert) {
	  //作为静态属性添加到类上
	  target.subject = '猫科';
	  //添加方法到原型上
	  traget.prototype.getSubject = function () {
	    return '猫科';
	  };
	};
	
	@addSubject
	class Animal {
	  name: string;
	  age: number;
	  constructor(name: string, age: number) {
	    this.name = name;
	    this.age = age;
	  };
	};
	
	var tigger = new Animal('tom', 1);
	console.log(Animal.subject);  //猫科
	console.log(tigger.getSubject()); //猫科
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• 装饰器函数接收一个参数target是被装饰的类(构造函数)

使用函数解套接受参数,外层的参数是函数的参数,内层的函数是被装饰类。看起来跟compose有点类似。

	function addSubject(subject) {
	  return function (target) {
	    //作为静态属性添加到类上
	    target.subject = subject;
	  };
	};
	
	@addSubject('猫科')
	class Animal { ... };
1
2
3
4
5
6
7
8
9

4.2 方法/属性装饰器

更新中…