装饰修饰器的作用

介绍

本篇内容主要讲解”装饰修饰器的作用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习”装饰修饰器的作用”吧!

修饰器(Decorator)是ES7的一个提案,熟悉javascript设计模式的读者,肯定知道用es5语法来实现修饰器模式是多么的麻烦,而用ES7的修饰器本身实现了修饰者模式,修饰器主要的作用有两个:

<李>

不同类间共享方法

<李>

编译期对类和方法的行为进行改变

首先来了解一下装饰的语法:

装饰就是一个函数,这个函数既可以修饰类,也可以修饰类的属性和方法,装饰在修饰类的时候只能传递一个参数,这个参数指的就是被修饰的类,装饰在修饰类里面的属性的时候可以传递三个参数,目标指的是类本身,关键被修饰的属性,描述符属性描述符。

下面演示deractor的使用方法,首先演示第一种,用deractor修饰类,代码如下:

 <代码> @setProp 
类用户{}

函数记者(目标){
,,console.log(目标)
,目标。30岁=
}

console.log (User.age);

打印结果如图:

装饰修饰器的作用“> </p> <p>我们使用修饰器给用户这个类增加了一个属性,并且可以看就到目标是类本身。</p> <p>上面的案例为用户这个类设置的时代属性是写死的,能不能再调用修饰类的时候,通过传递参数设置不同的年龄呢?看如下代码:</p> <pre> <代码> @setProp (20) <br/>类用户{}<br/> <br/>函数记者(值){<br/>,,返回函数(目标){<br/>,,,目标。年龄<br/>=价值,,}<br/>} <br/> <br/> console.log (User.age) </代码> </pre> <p>仔细观察代码,我们发现修饰器就是一个函数,我们将这个修饰器包裹在另外一个函数中,将变量提取为参数,在使用的地方调用这个函数,传入参数,函数内部返回修饰器,这也是开发中经常用到的修饰器的方式。</p> <p> deractor修饰类的时候除了直接为类增加属性,也可以修饰类的原型,看如下代码:</p> <p> <img src=装饰修饰器的作用