装饰模式 -- 原先没有,后期添加的属性和方法
修饰器(Decorator)是一个函数,用来修饰类的行为。这是ES7的一个提案,目前Babel转码器已经支持。
需要先安装一个插件:
npm install babel-plugin-transform-decorators-legacy --save-dev
然后在项目根目录下,找到:.babelrc => 修改为
"plugins": ["transform-runtime","transform-decorators-legacy"],
// 添加属性,添加方法,在方法执行之前添加动作
1.给添加一个静态方法(属性)
function chooseCourse(target){ // 定义一个方法 target.course = '物理'; } function setStudy(target){ target.study = function(){ console.log("学习" + target.course); } } @chooseCourse // 通过@ + 函数名,表示 用函数 chooseCourse 来修饰 类 Student,这样就给student添加了一个course,值为'物理' @classroom // 因为修饰的是类,所以相当于添加了静态属性和静态方法 class Student{}; // 定义一个类 Student.study();
2.修饰器带参数
function chooseCourse(courseName){ return function(target){ // 闭包 返回一个闭包函数 target.courseName = courseName; } } function classroom(roomName){ return function(target){ target.study = function(){ console.log('在' + roomName + '学习' + target.courseName); } } } @chooseCourse('物理') // 传参 通过添加参数的方式,来添加属性和方法 @classroom('第1教室') // 传参 class Student{} Student.study();
3.修饰器不仅可以修饰类,还可以修饰类的方法(属性)
function chooseCourse(courseName){ return function(target){ console.log('检查准考证' + target.uid); // target中的this发生指针转移 target.courseName = courseName; } } class Student{ constructor(){ this.uid = 15; } @chooseCourse('物理') // 对类里面的属性和方法直接进行修饰 , 此处的@chooseCourse 表示 修饰 exam()方法 // 代码运行到此行才进行修饰 exam(){ // 定义一个方法 console.log(this.uid + '考试,考:' + this.courseName); } } // 后面不能加 ';' let student = new Student(); // 用new方法创建一个 类的实例 new 一个 student,将student作为target传递到方法中 student.exam();
4.修饰器只能用于类和类的方法,不能用于函数,会导致函数提升而发生错误
//-------------错误---------------
@chooseCourse('物理') function Teacher(){ teach(){ console.log('讲师教:' + this.courseName); } } Teacher.teach();
5.装饰模式与代理模式的差别
装饰器模式(从外边注入属性和方法)关注于在一个对象上动态的添加方法,然而代理模式(proxy 屏蔽了原有的类,对代理进行操作,实现方法重新)关注于控制对对象的访问。换句话说,用代理模式,代理类(proxy class)可以对它的客户隐藏一个对象的具体信息。因此,当使用代理模式的时候,我们常常在一个代理类中创建一个对象的实例,并且,当我们使用装饰器模式的时候,我们通常的做法是将原始对象作为一个参数传给装饰者的构造器。
使用代理模式,代理和真实对象之间的关系通常在编译时就已经确定了,而装饰者能够在运行时递归地被构造。