本文主要是介绍js装饰器简单理解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
装饰器（Decorator）是一种与类（class）相关的语法，用来注释或修改类和类方法。
装饰器是一种函数，写成
@函数名。它可以放在类和类方法的定义前面。如下：
@frozen
class Foo {@configurable(false)@enumerable(true)method() {}@throttle(500)expensiveMethod() {}
}
上面代码一共使用了四个装饰器，一个用在类本身，另外三个用在类方法。它们不仅增加了代码的可读性，清晰地表达了意图，而且提供一种方便的手段，增加或修改类的功能。
- 类的装饰
装饰器对类的行为的改变，是代码编译时发生的，而不是在运行时
@decorator
class A {}// 等同于
class A {}
A = decorator(A) || A;
- 可以在装饰器后面再添加提个参数
@log('hi')
class MyClass { }function log(text) {return function(target) {target.prototype.logger = () => `${text}，${target.name} 被调用`}
}const test = new MyClass()
test.logger() // hello，MyClass 被调用
- 方法的装饰
与装饰类不同，对类方法的装饰本质是操作其描述符。可以把此时的装饰器理解成是 Object.defineProperty(obj, prop, descriptor) 的语法糖
class Person {@readonlyname() { return `${this.first} ${this.last}` }
}
- 参数详解
装饰器都具备三个参数，即
target,name,descriptor
- 装饰器在装饰类时，
target 目标是类本身，也就是例子中的 Hero 类，而此时name 和 descriptor 均为 undefined
@speakName("Julius")
class Hero {} function speakName(kingname) { return function(target, name, descriptor) { console.log(target); // ƒ Hero() console.log(name); // undefined console.log(descriptor); // undefined target.prototype.name = kingname; };
}
- 装饰器在装饰类方法时
target 目标是类实例，name 是类方法的名称，descriptor 则是类方法的描述对象，可看到 value 是类方法本身，其他3个值和 Object.defineProperty的属性一样，负责控制值的行为，该例中的 writable 就是其中之一。
class Hero { name = "Julius"; @readonly speak() { console.log(`My name is ${this.name}`); }
} function readonly(target, name, descriptor) { console.log(target); // {} __proto__: Object: Object console.log(name); // speak console.log(descriptor); /* * configurable: true * enumerable: false * value: ƒ speak() * writable: true */ descriptor.writable = false;
} const hero = new Hero();
- 知识拓展
- Object.defineProperty
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
该方法允许精确添加或修改对象的属性。通过赋值来添加的普通属性会创建在属性枚举期间显示的属性（for…in 或 Object.keys 方法）， 这些值可以被改变，也可以被删除。这种方法允许这些额外的细节从默认值改变。默认情况下，使用 Object.defineProperty() 添加的属性值是不可变的。
语法
Object.defineProperty(obj, prop, descriptor)
-
obj：要在其上定义属性的对象。 -
prop：要定义或修改的属性的名称。 -
descriptor：将被定义或修改的属性描述符。 -
返回值：被传递给函数的对象。
-
属性描述符
对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。
数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。
存取描述符是由 getter-setter 函数对描述的属性。
描述符必须是这两种形式之一；不能同时是两者。
- 数据描述符和存取描述符均具有以下可选键值：
- configurable
当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false
- enumerable
enumerable定义了对象的属性是否可以在 for…in 循环和 Object.keys() 中被枚举。
当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false。
- 数据描述符同时具有以下可选键值：
- value
该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined
- writable
当且仅当该属性的 writable 为 true 时，value 才能被赋值运算符改变。默认为 false
- 存取描述符同时具有以下可选键值
- get
一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined
- set
一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined
如果一个描述符不具有value,writable,get 和 set 任意一个关键字，那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字，将会产生一个异常
- Babel编辑
class C {@readonly(false)method() { console.log('cat') }
}function readonly(value) {return function (target, key, descriptor) { // 此处 target 为 C.prototype; key 为 method;// 原 descriptor 为：{ value: f, enumarable: false, writable: true, configurable: true }descriptor.writable = valuereturn descriptor}
}const c = new C()
c.method = () => console.log('dog')c.method() // cat
可以看到装饰器函数接收的三个参数与 Object.defineProperty 是完全一样的，具体实现可以看 babel 转化后的代码，主要实现如下所示：
var C = (function() {class C {method() { console.log('cat') }}var temptemp = readonly(false)(C.prototype, 'method',temp = Object.getOwnPropertyDescriptor(C.prototype, 'method')) || temp // 通过 Object.getOwnPropertyDescriptor 获取到描述符传入到装饰器函数中if (temp) Object.defineProperty(C.prototype, 'method', temp)return C
})()
有多个装饰器作用于同一个方法:
class C {@readonly(false)@logmethod() { }
}
经 babel 转化后的代码如下：
desc = [readonly(false), log].slice().reverse().reduce(function(desc, decorator) {return decorator(target, property, desc) || desc;}, desc);
可以清晰地看出，经过 reverse 倒序后，装饰器方法会至里向外执行
参考
阮一峰-装饰器
JS 装饰器，一篇就够
这篇关于js装饰器简单理解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
