装饰器本质上提供了对被装饰对象 Property​ Descriptor 的操作,在运行时被调用。

因为对于同一对象来说,可同时运用多个装饰器,然后装饰器中又可对被装饰对象进行任意的修改甚至是替换掉实现,直观感觉会有一些主观认知上的错觉,需要通过代码来验证一下。

比如,假若每个装饰器都对被装饰对象的有替换,其结果会怎样?

多个装饰器的应用

通过编译运行以下示例代码并查看其结果可以得到一些直观感受:

function f() {
console.log("f(): evaluated");
return function(_target: any, key: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`[f]before ${key} called`, args);
const result = original.apply(this, args);
console.log(`[f]after ${key} called`);
return result;
};
console.log("f(): called");
return descriptor;
};
} function g() {

console.log("g(): evaluated");

return function(_target: any, key: string, descriptor: PropertyDescriptor) {

const original = descriptor.value;

descriptor.value = function(...args: any[]) {

console.log(</span>[g]before ${<span class="pl-smi">key</span>} called<span class="pl-pds">, args);

const result = original.apply(this, args);

console.log(</span>[g]after ${<span class="pl-smi">key</span>} called<span class="pl-pds">);

return result;

};

console.log("g(): called");

return descriptor;

};

} class C {

@f()

@g()

foo(count: number) {

console.log(</span>foo called ${<span class="pl-smi">count</span>}<span class="pl-pds">);

}

} const c = new C();

c.foo(0);

c.foo(1);

先放出执行结果:

f(): evaluated
g(): evaluated
g(): called
f(): called
[f]before foo called [ 0 ]
[g]before foo called [ 0 ]
foo called 0
[g]after foo called [ 0 ]
[f]after foo called [ 0 ]
[f]before foo called [ 1 ]
[g]before foo called [ 1 ]
foo called 1
[g]after foo called [ 1 ]
[f]after foo called [ 1 ]

下面来详细分析。

编译后的装饰器代码

首页看看编译后变成 JavaScript 的代码,毕竟这是实际运行的代码:

编译后的代码
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
function f() {
console.log("f(): evaluated");
return function (_target, key, descriptor) {
var original = descriptor.value;
descriptor.value = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
console.log("[f]before " + key + " called", args);
var result = original.apply(this, args);
console.log("[f]after " + key + " called", args);
return result;
};
console.log("f(): called");
return descriptor;
};
}
function g() {
console.log("g(): evaluated");
return function (_target, key, descriptor) {
var original = descriptor.value;
descriptor.value = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
console.log("[g]before " + key + " called", args);
var result = original.apply(this, args);
console.log("[g]after " + key + " called", args);
return result;
};
console.log("g(): called");
return descriptor;
};
}
var C = /** @class */ (function () {
function C() {
}
C.prototype.foo = function (count) {
console.log("foo called " + count);
};
__decorate([
f(),
g(),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Number]),
__metadata("design:returntype", void 0)
], C.prototype, "foo", null);
return C;
}());
var c = new C();
c.foo(0);
c.foo(1);

先看经过 TypeScript 编译后的代码,重点看这一部分:

var C = /** @class */ (function () {
function C() {
}
C.prototype.foo = function (count) {
console.log("foo called " + count);
};
__decorate([
f(),
g(),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Number]),
__metadata("design:returntype", void 0)
], C.prototype, "foo", null);
return C;
}());

tslib 中装饰器的实现

其中 __decorate 为 TypeScript 经 tslib 提供的 Decorator 实现,其源码为:

tslib/tslib.js(经过格式化)

var __decorate =
(this && this.__decorate) ||
function(decorators, target, key, desc) {
var c = arguments.length,
r =
c < 3
? target
: desc === null
? (desc = Object.getOwnPropertyDescriptor(target, key))
: desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if ((d = decorators[i]))
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};

装饰器的执行顺序

配合编译后代码和这里装饰器的实现来看,进一步之前了解到的关于装饰器被求值和执行的顺序,

源码中应用装饰器的地方:

  @f()
@g()
foo(count: number) {
console.log(`foo called ${count}`);
}

然后这里的 @f() @g() 按照该顺序传递给了 __decorate 函数,

  __decorate(
[
+ f(),
+ g(),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Number]),
__metadata("design:returntype", void 0)
],
C.prototype,
"foo",
null
);

然后在 __decorate 函数体中,对传入的 decorators 从数据最后开始,取出装饰器函数顺次执行,

var __decorate =
(this && this.__decorate) ||
function(decorators, target, key, desc) {
var c = arguments.length,
r =
c < 3
? target
: desc === null
? (desc = Object.getOwnPropertyDescriptor(target, key))
: desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
+ for (var i = decorators.length - 1; i >= 0; i--)
if ((d = decorators[i]))
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};

其中 r 便是装成器的返回,会被当作被装饰对象的新的属性描述器(Property Descriptor)来重新定义被装饰的对象:

Object.defineProperty(target, key, r)

所以,像示例代码中多个装饰器均对被装饰对象有修改,原则上和多次调用 Object.defineProperty() 相当。

Object.defineProperty()

而调用 Object.defineProperty() 的结果是后面的会覆盖前面的,比如来看这里一个简单的示例:

const obj = {};

Object.defineProperty(obj, "foo", {

configurable: true,

value: function() {

console.log("1");

}

}); Object.defineProperty(obj, "foo", {

value: function() {

console.log("2");

}

}); obj.foo(); // 2

注意: 根据 MDN 对 defineProperty 的描述configurable 在缺省时为 false,所以如果要重复定义同一个 key,需要显式将其置为 true

configurable

true if and only if the type of this property descriptor may be changed and if the > property may be deleted from the corresponding object.

Defaults to false.

回到本文开头的示例,为了进一步验证,可通过将运用装饰之后的属性描述器打印出来:

console.log(Object.getOwnPropertyDescriptor(C.prototype, "foo").value.toString());

输出结果为:

function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
console.log("[f]before " + key + " called", args);
var result = original.apply(this, args);
console.log("[f]after " + key + " called", args);
return result;
}

那么这里引出另一个问题,通过装饰器重复定义同一属性时,并没有显式返回一个 configurable:true 的对象,那为何在运用多个装饰器重复定义时没报错。

装饰器入参中的 descriptor

答案就只有一个,那就是装饰器传入的 descriptor 已经是 configurabletrue 的状态。

为了验证,只需要在 @f()@g() 任意一个装饰器中将 descriptor 打印出来即可。

function g() {
console.log("g(): evaluated");
return function(_target: any, key: string, descriptor: PropertyDescriptor) {
+ console.log(descriptor)
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`[g]before ${key} called`, args);
const result = original.apply(this, args);
console.log(`[g]after ${key} called`, args);
return result;
};
console.log("g(): called");
return descriptor;
};
}

输出的 descriptor

{
value: [Function],
writable: true,
enumerable: true,
configurable: true
}

这便是最终运行时会执行的 foo 方法真身。

可以看到确实是最后生效的装饰器确实是后运用的 @f()。因此你确实可以这么理解多个装饰器的重叠应用为,那一切都还说得通,就是 后运用的装饰器中 对被装饰对象的替换 会覆盖掉 先运用的装饰器 对被装饰对象的替换。

But,

这解释不了它的输出结果:

f(): evaluated
g(): evaluated
g(): called
f(): called
[f]before foo called [ 0 ]
[g]before foo called [ 0 ]
foo called 0
[g]after foo called
[f]after foo called
[f]before foo called [ 1 ]
[g]before foo called [ 1 ]
foo called 1
[g]after foo called
[f]after foo called

装饰器嵌套

原因就在于这句代码:

var result = original.apply(this, args);

因为这句,@f()@g() 便不是简单的覆盖关系,而是形成了嵌套关系。

这里 originaldescriptor.value,即装饰器传入的 descriptor 的一个副本。我们在进行覆盖前保存了一下原方法的副本,

// 保存原始的被装饰对象
const original = descriptor.value; // 替换被装饰对象

descriptor.value = function(...args: any[]) {

// ...

}

因为装饰器的目的只是对已有的对象进行修饰加强,所以你不能粗暴地将原始的对象直接替换成新的实现(当然你确实可以那样粗暴的),那样并不符合大多数应用场景。所以在进行替换时,先保存原始对象(这里原始对象是 foo 方法),然后在新的实现中对原始对象再进行调用,这样来实现了对原始对象进行修饰,添加新的特性。

descriptor.value = function(...args: any[]) {
console.log(`[g]before ${key} called`, args);
+ const result = original.apply(this, args);
console.log(`[g]after ${key} called`, args);
return result;
};

通过这种方式,多个装饰器对被装饰对象的修改可以层层传递下去,而不至于丢失。

下面把每个装饰器接收到的属性描述器打印出来:

function f() {
console.log("f(): evaluated");
return function(_target: any, key: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
+ console.log("[f] receive descriptor:", original.toString());
descriptor.value = function(...args: any[]) {
console.log(`[f]before ${key} called`, args);
const result = original.apply(this, args);
console.log(`[f]after ${key} called`, args);
return result;
};
console.log("f(): called");
return descriptor;
};
} function g() {

console.log("g(): evaluated");

return function(_target: any, key: string, descriptor: PropertyDescriptor) {

const original = descriptor.value;

+ console.log("[g] receive descriptor:", original.toString());

descriptor.value = function(...args: any[]) {

console.log([g]before ${key} called, args);

const result = original.apply(this, args);

console.log([g]after ${key} called, args);

return result;

};

console.log("g(): called");

return descriptor;

};

}

输出结果:

[g] receive descriptor:
function (count) {
console.log("foo called " + count);
} [f] receive descriptor:

function () {

var args = [];

for (var _i = 0; _i < arguments.length; _i++) {

args[_i] = arguments[_i];

}

console.log("[g]before " + key + " called", args);

var result = original.apply(this, args);

console.log("[g]after " + key + " called", args);

return result;

}

这里的示例中,先是 @g() 被调用,它接收到的 descriptor 就是原始的 foo 方法的属性描述器,打印出其值便是原始的 foo 方法的方法体,

function (count) {
console.log("foo called " + count);
}

经过 @g() 处理后的属性描述器传递给了下一个装饰器 @f(),所以后者接收到的是经过处理后新的属性描述器,即 @g() 返回的那个:

 function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
console.log("[g]before " + key + " called", args);
var result = original.apply(this, args);
console.log("[g]after " + key + " called", args);
return result;
}

然后将 @f()original 替换成上述代码便是最终 @f() 返回的最终 foo 的样子,大致是这样的:

descriptor.value = function(...args: any[]) {
console.log(`[f]before ${key} called`, args); // g 开始

var args = [];

for (var _i = 0; _i < arguments.length; _i++) {

args[_i] = arguments[_i];

}

console.log("[g]before " + key + " called", args); // foo 开始

console.log(</span>foo called <span class="pl-s1"><span class="pl-pse">${</span>count<span class="pl-pse">}</span></span><span class="pl-pds">);

// foo 结束 console.log("[g]after " + key + " called", args);

// g 结束 console.log(</span>[f]after <span class="pl-s1"><span class="pl-pse">${</span>key<span class="pl-pse">}</span></span> called<span class="pl-pds">, args);

return result;

};

所以最终的 foo 方法其实是 f(g(x)) 两者嵌套组合的结果,像数学上的函数调用一样。

总结

多个装饰器运用于同一对象时,其求值和执行顺序是相反的,

对于类似这样的调用:

@f
@g
x
  • 求值顺序是由上往下
  • 执行顺序是由下往上

通常情况下我们只关心执行顺序,除非是在编写复杂的装饰器工厂方法时。同时需要注意到,这里所指的装饰器执行顺序 是装饰器本身被调用的顺序,如果是装饰方法,这和 descriptor.value 被执行的顺序是两码事,后者的执行是层层嵌套的方式,联想 Koa 中间件的洋葱圈模型。

如果多个装饰器中都对被装饰对象有所修改,注意嵌套过程中修改被覆盖的问题,如果不想要产生覆盖,装饰器中应该有对被装饰对象保存副本并且调用,方法通过 fn.apply(),类则可通过返回一个新的但继承自被装饰对象的新类来实现,比如:

function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) {
return class extends constructor {
newProperty = "new property";
hello = "override";
}
} @classDecorator

class Greeter {

property = "property";

hello: string;

constructor(m: string) {

this.hello = m;

}

} console.log(new Greeter("world"));

这里覆盖了被装饰类的构造器,但其他未修改的部分仍是原来类中的样子,因为这里返回的是一个 extends 后的新类。

TypeScript 装饰器的执行原理的更多相关文章

  1. 从C#到TypeScript - 装饰器

    总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...

  2. 基于TypeScript装饰器定义Express RESTful 服务

    前言 本文主要讲解如何使用TypeScript装饰器定义Express路由.文中出现的代码经过简化不能直接运行,完整代码的请戳:https://github.com/WinfredWang/expre ...

  3. TypeScript装饰器(decorators)

    装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上,可以修改类的行为. 装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被 ...

  4. Angular 个人深究(一)【Angular中的Typescript 装饰器】

    Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...

  5. python 中多个装饰器的执行顺序

    python 中多个装饰器的执行顺序: def wrapper1(f1): print('in wrapper1') def inner1(*args,**kwargs): print('in inn ...

  6. typescript装饰器 方法装饰器 方法参数装饰器 装饰器的执行顺序

    /* 装饰器:装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,属性或参数上,可以修改类的行为. 通俗的讲装饰器就是一个方法,可以注入到类.方法.属性参数上来扩展类.属性.方法.参数的功能. 常 ...

  7. python 装饰器、递归原理、模块导入方式

    1.装饰器原理 def f1(arg): print '验证' arg() def func(): print ' #.将被调用函数封装到另外一个函数 func = f1(func) #.对原函数重新 ...

  8. TypeScript 装饰器

    装饰器(Decorators)可用来装饰类,属性,及方法,甚至是函数的参数,以改变和控制这些对象的表现,获得一些功能. 装饰器以 @expression 形式呈现在被装饰对象的前面或者上方,其中 ex ...

  9. python3-多装饰器的执行顺序

    [例]: def dec1(func): print("HHHA:0====>") def one(): print("HHHA:0.1====>" ...

随机推荐

  1. JS基础知识——变量类型和计算(一)

    JS中使用typeof能得到的哪些类型? 何时使用===何时使用==? JS中有哪些内置函数? JS变量按照存储方式区分为哪些类型,描述其特点? 如何理解JSON? 知识点梳理 一.变量类型: (1) ...

  2. spf13-vim安装成功

    之前安装好像都没有出现这个画面,说明我安装得不完整吧!有一个html括号匹配的插件要求输入username和password,不知所以然,没安装上,其他应该一切正常.纪念一个!

  3. Python基础-day01-3

    PyCharm 的初始设置(知道) 目标 恢复 PyCharm 的初始设置 第一次启动 PyCharm 新建一个 Python 项目 设置 PyCharm 的字体显示 PyCharm 的升级以及其他 ...

  4. vue中点击屏幕其他区域关闭自定义div弹出框

    直接上代码: mounted: function () { let that = this; $(document).on('click', function (e) { let dom = $('. ...

  5. Python--合并2个字典成1个新字典的9种方法

    d1 = {'name': 'revotu', 'age': 99} d2 = {'age': 24, 'sex': 'male'} 输出: {'name': 'revotu', 'age': 24, ...

  6. centos7配置Memcached

    Memcached是一套分布式的高速缓存系统,用于提升网站访问速度,尤其对于一些大型的.需要频繁访问数据库的网站,访问速度提升效果十分显著. 1.安装memcached yum install mem ...

  7. linux(center OS7)安装JDK、tomcat、mysql 搭建java web项目运行环境

    一.安装JDK 1.卸载旧版本或者系统自带的JDK (1)列出所有已安装的JDK rpm -qa | grep jdk (2)卸载不需要的JDK yum -y remove 安装包名称 2.下载并解压 ...

  8. Aery的UE4 C++游戏开发之旅(3)蓝图

    目录 蓝图 蓝图命名规范 蓝图优化 暴露C++至蓝图 暴露C++类 暴露C++属性 暴露C++函数 暴露C++结构体/枚举 暴露C++接口 蓝图和C++的结合方案 使用继承重写蓝图 使用组合重写蓝图 ...

  9. Java安装JDK

    因为Java程序必须运行在JVM之上,所以,我们第一件事情就是安装JDK. 搜索JDK 13,确保从Oracle的官网下载最新的稳定版JDK: 1.选择JDK版本 2.同意协议,点击合适系统平台下载 ...

  10. 关于InterruptedException的两篇博文的转载

    博文一:https://www.jianshu.com/p/a8abe097d4ed InterruptedException异常 在了解InterruptedException异常之前应该了解以下的 ...