字节跳动Web前端高级工程师，Javascript装饰器原理，web前端开发实战项目

最新推荐文章于 2024-10-09 14:08:42 发布

2301_79054215

最新推荐文章于 2024-10-09 14:08:42 发布

阅读量932

点赞数 25

分类专栏： 2024年程序员学习文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2301_79054215/article/details/137486860

版权

2024年程序员学习专栏收录该内容

267 篇文章 3 订阅

订阅专栏

参数装饰器

参数装饰器的使用位置较之前集中装饰器略有不同，它被使用在行内。

class Building { constructor() { this.name = “company”; } openDoor(@parameterDecorator num, @parameterDecorator zoz) { console.log(${num} door being open); }}

const building = new Building();

转换后的代码区别就比较明显了，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”));

代码第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”);}