JS装饰器

3,436 阅读2分钟

参考文章:JS装饰器     

详细参考:ES6-decorator(装饰器)

许多面向对象的语言都有修饰器(Decorator)函数,用来修改类的行为。目前,有一个提案将这项功能,引入了 ECMAScript。修饰器是一个对类进行处理的函数。修饰器函数的第一个参数,就是所要修饰的目标类。

一:高阶函数

function compose(a,b){
	return function(c){
		return a(b(c));
	};
}

function addTwo(value){
	return value+2;
}

function timesTwo(value){
	return value * 2;
}

const add = compose(addTwo, timesTwo);
console.log(add(2)); //6

二:流式函数

function fluent(fn){
	return function(...args){
		fn.apply(this,args);
		return this;
	};
}

function Person() {}

Person.prototype.setName = fluent(function(first,last){
	this.first = first;
	this.last = last;
});

Person.prototype.sayName = fluent(function(){
	console.log(`my first name is ${this.first}, my last name is ${this.last}`);
});

const person = new Person();

person.setName('jane','doe').sayName().setName('john','doe').sayName();
//链式调用

ES6的写法

function fluent(fn){
	return function(...args){
		fn.apply(this,args);
		return this;
	};
}

class Person{
	setName = fluent(function(first, last){
		this.first = first;
		this.last = last;
	});

	sayName = fluent(function(){
		console.log(`my first name is ${this.first},my last name is ${this.last}`);
	});
};

const person = new Person();
person.setName('jane','doe').sayName().setName('john','doe').sayName();

三:Decorator装饰器

function decorate(target, name, descriptor){
	const fn = descriptor.value;
	descriptor.value = function(...args){
		fn.apply(target,args);
		return target;
	};
}

class Person{
	@decorate
	setName(first, last){
		this.first = first;
		this.last = last;
	}

	@decorate
	sayName(){
		console.log(`my first name is ${this.first},my last name is ${this.last}`);
	}
};

const person = new Person();
person.setName('jane','doe').sayName().setName('john','doe').sayName();

四:Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

该方法允许精确添加或修改对象的属性。通过赋值来添加的普通属性会创建在属性枚举期间显示的属性(for...in 或 Object.keys 方法), 这些值可以被改变,也可以被删除。这种方法允许这些额外的细节从默认值改变。默认情况下,使用 Object.defineProperty() 添加的属性值是不可变的。

语法

Object.defineProperty(obj, prop, descriptor)
  • obj:要在其上定义属性的对象。
  • prop:要定义或修改的属性的名称。
  • descriptor:将被定义或修改的属性描述符。
  • 返回值:被传递给函数的对象。

在ES6中,由于 Symbol类型 的特殊性,用 Symbol类型 的值来做对象的key与常规的定义或修改不同,而Object.defineProperty 是定义 key为 Symbol 的属性的方法之一。