Javascript装饰器原理
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Javascript装饰器原理，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10693字，纯文字阅读大概需要16分钟。
内容图文
一个以@开头的描述性词语。英语的decorator动词是decorate，装饰的意思。其中词根dek(dec发音)原始印欧语系中意思是“接受”。即，原来的某个事物接受一些新东西（而变得更好）。从另外一个角度描述，装饰器主要是在被装饰对象的外部起作用，而非入侵其内部发生什么改变。装饰器模式同时也是一种开发模式，其地位虽然弱于MVC、IoC等，但不失为一种优秀的模式。
JavaScript的装饰器可能是借鉴自Python也或许是Java。较为明显的不同的是大部分语言的装饰器必须是一行行分开，而JS的装饰器可以在一行中。
装饰器存在的意义
会偷懒的程序员，才是优秀的程序员。
举个例子：我拿着员工卡进入公司总部大楼。因为每个员工所属的部门、级别不同，并不能进入大楼的任何房间。每个房间都有一扇门；那么，公司需要安排每个办公室里至少一个人关于验证来访者的工作：
- 先登记来访者
- 验证是否有权限进入，如果没有则要求其离开
- 记录其离开时间
还有一个选择方式，就是安装电子门锁，门锁只是将员工卡的信息传输给机房，由特定的程序验证。
前者暂且称之为笨模式，代码如下：
function A101(who){
record(who,new Date(),'enter');
if (!permission(who)) {
record(who,new Date(),'no permission')
return void;
}
// 继续执行
doSomeWork();
record(who,new Date(),'leave')
}
function A102(who){
record(who,new Date(),'enter');
if (!permission(who)) {
record(who,new Date(),'no permission')
return void;
}
// 继续执行
doSomeWork();
record(who,new Date(),'leave')
}
// ...
有经验的大家肯定第一时间想到了，把那些重复语句封装为一个方法，并统一调用。是的，这样可以解决大部分问题，但是还不够“优雅”。同时还有另外一个问题，如果“房间”特别多，又或者只有大楼奇数号房间要验证偶数不验证，那岂不是很“变态”？如果使用装饰器模式来做，代码会如下面这样的：
@verify(who)
class Building {
@verify(who)
A101(){/*...*/}
@verify(who)
A102(){/*...*/}
//...
}
verify是验证的装饰器，而其本质就是一组函数。
JavaScript装饰器
正如先前的那个例子，装饰器其实本身就是一个函数，它在执行被装饰的对象之前先被执行。
在JavaScript中，装饰器的类型有：
- 类
- 存取方法（属性的get和set）
- 字段
- 方法
- 参数
由于目前装饰器概念还处于提案阶段，不是一个正式可用的JS功能，所以想要使用这个功能，不得不借助翻译器工具，例如Babel工具或者TypeScript编译JS代码转后才能被执行。我们需要先搭建运行环境，配置一些参数。（以下过程，假设已经正确安装了NodeJS开发环境以及包管理工具）
cd project && npm init
npm i -D @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/preset-env babel-plugin-parameter-decorator
创建一个.babelrc配置文件，如下：
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }],
"babel-plugin-parameter-decorator"
]
}
利用下面的转换命令，我们可以得到ES5的转换程序：
npx babel source.js --out-file target.js
类装饰器
创建一个使用装饰器的JS程序decorate-class.js
@classDecorator
class Building {
constructor() {
this.name = "company";
}
}
const building = new Building();
function classDecorator(target) {
console.log("target", target);
}
以上是最最简单的装饰器程序，我们利用babel将其“翻译”为ES5的程序，然后再美化一下后得到如下程序
"use strict";
var _class;
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Building =
classDecorator(
(_class = function Building() {
_classCallCheck(this, Building);
this.name = "company";
})
) || _class;
var building = new Building();
function classDecorator(target) {
console.log("target", target);
}
第12行就是在类生成过程中，调用函数形态的装饰器，并将构造函数（类本身）送入其中。同样揭示了装饰器的第一个参数是类的构造函数的由来。
方法 (method)装饰器
稍微修改一下代码，依旧是尽量保持最简单：
class Building {
constructor() {
this.name = "company";
}
@methodDecorator
openDoor() {
console.log("The door being open");
}
}
const building = new Building();
function methodDecorator(target, property, descriptor) {
console.log("target", target);
if (property) {
console.log("property", property);
}
if (descriptor) {
console.log("descriptor", descriptor);
}
console.log("=====end of decorator=========");
}
然后转换代码，可以发现，这次代码量突然增大了很多。排除掉_classCallCheck、_defineProperties和_createClass三个函数，关注_applyDecoratedDescriptor函数：
function _applyDecoratedDescriptor(
target,
property,
decorators,
descriptor,
context
) {
var desc = {};
Object.keys(descriptor).forEach(function (key) {
desc[key] = descriptor[key];
});
desc.enumerable = !!desc.enumerable;
desc.configurable = !!desc.configurable;
if ("value" in desc || desc.initializer) {
desc.writable = true;
}
desc = decorators
.slice()
.reverse()
.reduce(function (desc, decorator) {
return decorator(target, property, desc) || desc;
}, desc);
if (context && desc.initializer !== void 0) {
desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
desc.initializer = undefined;
}
if (desc.initializer === void 0) {
Object.defineProperty(target, property, desc);
desc = null;
}
return desc;
}
它在生成构造函数之后，执行了这个函数，特别注意，这个装饰器函数是以数组形式的参数传递的。然后到上述代码的17~22行，将装饰器逐个应用，其中对装饰器的调用就在第21行。它发送了3个参数，target指类本身。property指方法名（或者属性名），desc是可能被先前装饰器被处理过的descriptor，如果是第一次循环或只有一个装饰器，那么就是方法或属性本身的descriptor。
存取器(accessor)装饰
JS关于类的定义中，支持get和set关键字针对设置某个字段的读写操作逻辑，装饰器也同样支持这类方法的操作。
class Building {
constructor() {
this.name = "company";
}
@propertyDecorator
get roomNumber() {
return this._roomNumber;
}
_roomNumber = "";
openDoor() {
console.log("The door being open");
}
}
有心的读者可能已经发现了，存取器装饰的代码与上面的方法装饰代码非常接近。关于属性 get和set方法，其本身也是一种方法的特殊形态。所以他们之间的代码就非常接近了。
属性装饰器
继续修改源代码：
class Building {
constructor() {
this.name = "company";
}
@propertyDecorator
roomNumber = "";
}
const building = new Building();
function propertyDecorator(target, property, descriptor) {
console.log("target", target);
if (property) {
console.log("property", property);
}
if (descriptor) {
console.log("descriptor", descriptor);
}
console.log("=====end of decorator=========");
}
转换后的代码，还是与上述属性、存取器的代码非常接近。但除了_applyDecoratedDescriptor外，还多了一个_initializerDefineProperty函数。这个函数在生成构造函数时，将声明的各种字段绑定给对象。
参数装饰器
参数装饰器的使用位置较之前集中装饰器略有不同，它被使用在行内。
class Building {
constructor() {
this.name = "company";
}
openDoor(@parameterDecorator num, @parameterDecorator zoz) {
console.log(`${num} door being open`);
}
}
const building = new Building();
function parameterDecorator(target, property, key) {
console.log("target", target);
if (property) {
console.log("property", property);
}
if (key) {
console.log("key", key);
}
console.log("=====end of decorator=========");
}
转换后的代码区别就比较明显了，babel并没有对其生成一个特定的函数对其进行特有的操作，而只在创建完类（构造函数）以及相关属性、方法后直接调用了开发者自己编写的装饰器函数：
var Building = /*#__PURE__*/function () {
function Building() {
_classCallCheck(this, Building);
this.name = "company";
}
_createClass(Building, [{
key: "openDoor",
value: function openDoor(num, zoz) {
console.log("".concat(num, " door being open"));
}
}]);
parameterDecorator(Building.prototype, "openDoor", 1);
parameterDecorator(Building.prototype, "openDoor", 0);
return Building;
}();
装饰器应用
使用参数——闭包
以上所有的案例，装饰器本身均没有使用任何参数。然实际应用中，经常会需要有特定的参数需求。我们再回到一开头的例子中verify(who)，其中需要传入一个身份变量。哪又怎么做？我们少许改变一下类装饰器的代码：
const who = "Django";
@classDecorator(who)
class Building {
constructor() {
this.name = "company";
}
}
转换后得到
// ...
var who = "Django";
var Building =
((_dec = classDecorator(who)),
_dec(
(_class = function Building() {
_classCallCheck(this, Building);
this.name = "company";
})
) || _class);
// ...
请注意第4第5行，它先执行了装饰器，然后再用返回值将类（构造函数）送入。相对应的，我们就应该将构造函数写成下面这样：
function classDecorator(people) {
console.log(`hi~ ${people}`);
return function (target) {
console.log("target", target);
};
}
同样的，方法、存取器、属性和参数装饰器均是如此。
装饰器包裹方法
到此，我们已经可以将装饰器参数与目标对象结合起来，进行一些逻辑类的操作。那么再回到文章的开头的例子中：需求中要先验证来访者权限，然后记录，最后在来访者离开时再做一次记录。此时需要监管对象方法被调用的整个过程。
请大家留意那个方法装饰器的descriptor，我们可以利用这个对象来“重写”这个方法。
class Building {
constructor() {
this.name = "company";
}
@methodDecorator("Gate")
openDoor(firstName, lastName) {
return `The door will be open, when ${firstName} ${lastName} is walking into the ${this.name}.`;
}
}
let building = new Building();
console.log(building.openDoor("django", "xiang"));
function methodDecorator(door) {
return function (target, property, descriptor) {
let fn = descriptor.value;
descriptor.value = function (...args) {
let [firstName, lastName] = args;
console.log(`log: ${firstName}, who are comming.`);
// verify(firstName,lastName)
let result = Reflect.apply(fn, this, [firstName, lastName]);
console.log(`log: ${result}`);
console.log(`log: ${firstName}, who are leaving.`);
return result;
};
return descriptor;
};
}
代码第17行，将原方法暂存；18行定义一个新的方法，20～25行，记录、验证和记录离开的动作。
log: Django, who are comming.
log: The door will be open, when Django Xiang is walking in to the company.
log: Django, who are leaving.
The door will be open, when Django Xiang is walking in to the company
装饰顺序
通过阅读转换后的代码，我们知道装饰器工作的时刻是在类被实例化之前，在生成之中完成装饰函数的动作。那么，如果不同类型的多个装饰器同时作用，其过程是怎样的？我们将先前的案例全部整合到一起看看：
const who = "Django";
@classDecorator(who)
class Building {
constructor() {
this.name = "company";
}
@propertyDecorator
roomNumber = "";
@methodDecorator
openDoor(@parameterDecorator num) {
console.log(`${num} door being open`);
}
@accessorDecorator
get roomNumber() {
return this._roomNumber;
}
}
const building = new Building();
function classDecorator(people) {
console.log(`class decorator`);
return function (target) {
console.log("target", target);
};
}
function methodDecorator(target, property, descriptor) {
console.log("method decorator");
}
function accessorDecorator(target, property, descriptor) {
console.log("accessor decorator");
}
function propertyDecorator(target, property, descriptor) {
console.log("property decoator");
}
function parameterDecorator(target, property, key) {
console.log("parameter decorator");
}
- class decorator
- parameter decorator
- property decoator
- method decorator
- accessor decorator
还可以通过阅读转换后的源代码得到执行顺序：
- 类装饰器（在最外层）
- 参数装饰器（在生成构造函数最里层）
- 按照出现的先后顺序的：属性、方法和存取器
总结
装饰器是一种优雅的开发模式，极大的方便了开发者编码过程，同时提升了代码的可读性。我们在使用装饰器开发时，还是非常有必要了解其运行机理。
本文由博客群发一文多发等运营工具平台 OpenWrite 发布
内容总结
以上是互联网集市为您收集整理的Javascript装饰器原理全部内容，希望文章能够帮你解决Javascript装饰器原理所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。