Rumah > Artikel > hujung hadapan web > Apakah pengubah es6 digunakan?
Dalam es6, penghias digunakan untuk menganotasi atau mengubah suai kelas dan kaedah kelas Mereka bergantung pada kaedah "Object.defineProperty" ES5 dan ditulis sebagai "@nama fungsi"; biasanya diletakkan sebelum kelas dan kaedah kelas. Pengubah suai boleh disuntik ke dalam kelas, kaedah dan parameter atribut untuk melanjutkan fungsi kelas, atribut, kaedah dan parameter.
Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.
Corak Penghias membenarkan menambah fungsi baharu pada objek sedia ada tanpa mengubah strukturnya. Corak reka bentuk jenis ini ialah corak struktur, yang bertindak sebagai pembalut di sekeliling kelas sedia ada.
Corak ini mencipta kelas hiasan untuk membalut kelas asal dan menyediakan kefungsian tambahan sambil mengekalkan integriti tandatangan kaedah kelas.
Dalam ES6, Penghias ialah sintaks berkaitan kelas yang digunakan untuk menganotasi atau mengubah suai kelas dan kaedah kelas.
Penghias sebenarnya adalah fungsi, biasanya diletakkan di hadapan kelas dan kaedah kelas.
@decorateClass
class Example {
@decorateMethods
method(){}
}Dua penghias digunakan dalam kod di atas, di mana penghias @decorateClass() digunakan pada kelas itu sendiri, Digunakan untuk menambah atau mengubah suai kefungsian kelas; penghias @decorateMethods() digunakan pada kaedah kelas untuk menganotasi atau mengubah suai kaedah kelas.
Penghias hanya boleh digunakan untuk kelas dan kaedah kelas, bukan fungsi, kerana ada fungsi mempromosikan.
Penghias hanya boleh digunakan untuk kelas dan kaedah kelas Mari kita lihat penggunaan dua jenis penghias secara berasingan
@decorateClass
class Example {
//...
}
function decorateClass(target) {
target.isTestClass = true
}@decorateClass(true)
class Example {
//...
}
function decorateClass(isTestClass) {
return function(target) {
target.isTestClass = isTestClass
}
}class MyReactComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}
// descriptor对象原来的值如下
{
value: specifiedFunction,
enumerable: false,
configurable: true,
writable: true
};class Example {
@log
instanceMethod() { }
@log
static staticMethod() { }
}
function log(target, methodName, descriptor) {
const oldValue = descriptor.value;
descriptor.value = function() {
console.log(`Calling ${name} with`, arguments);
return oldValue.apply(this, arguments);
};
return descriptor;
}class Example {
@log(1)
instanceMethod() { }
@log(2)
static staticMethod() { }
}
function log(id) {
return (target, methodName, descriptor) => {
const oldValue = descriptor.value;
descriptor.value = function() {
console.log(`Calling ${name} with`, arguments, `this id is ${id}`);
return oldValue.apply(this, arguments);
};
return descriptor;
}
}// 类装饰器
function decoratorClass(id){
console.log('decoratorClass evaluated', id);
return (target) => {
// target 类的构造函数
console.log('target 类的构造函数:',target)
console.log('decoratorClass executed', id);
}
}
// 方法装饰器
function decoratorMethods(id){
console.log('decoratorMethods evaluated', id);
return (target, property, descriptor) => {
// target 代表
// process.nextTick((() => {
target.abc = 123
console.log('method target',target)
// }))
console.log('decoratorMethods executed', id);
}
}
@decoratorClass(1)
@decoratorClass(2)
class Example {
@decoratorMethods(1)
@decoratorMethods(2)
method(){}
}
/** 输入日志 **/
// decoratorMethods evaluated 1
// decoratorMethods evaluated 2
// method target Example { abc: 123 }
// decoratorMethods executed 2
// method target Example { abc: 123 }
// decoratorMethods executed 1
// decoratorClass evaluated 1
// decoratorClass evaluated 2
// target 类的构造函数: [Function: Example]
// decoratorClass executed 2
// target 类的构造函数: [Function: Example]
// decoratorClass executed 1如上面代码中，会先执行类方法的装饰器 @decoratorMethods(1) 和 @decoratorMethods(2)，执行完后再执行类装饰器 @decoratorClass(1) 和 @decoratorClass(2)
上面代码中的类方法装饰器中，外层装饰器 @decoratorMethods(1) 先进入，但是内层装饰器 @decoratorMethods(2) 先执行。类装饰器同理。
function log(target, name, descriptor) {
var oldValue = descriptor.value;
descriptor.value = function () {
console.log(`Calling "${name}" with`, arguments);
return oldValue.apply(null, arguments);
}
return descriptor;
}
// 日志应用
class Maths {
@log
add(a, b) {
return a + b;
}
}
const math = new Maths();
// passed parameters should get logged now
math.add(2, 4);【相关推荐：javascript视频教程、web前端】
Atas ialah kandungan terperinci Apakah pengubah es6 digunakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!