JS裝飾器

Jsp發表於2018-08-02
JS

參考文章：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 的屬性的方法之一。


相關文章