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.

Penghias ES6 (Penghias)

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.

Dua jenis penghias (penghias)

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

Penghias kelas

<🎜. >Penghias kelas digunakan untuk menghiasi keseluruhan kelas

Parameter penghias kelas

sasaran: Kelas itu sendiri juga bersamaan dengan pembina kelas: Prototaip .pembina.

@decorateClass
class Example {
    //...
}

function decorateClass(target) {
    target.isTestClass = true
}

Seperti dalam kod di atas, penghias @decorateClass mengubah suai tingkah laku keseluruhan kelas Contoh dan menambah statik pada Harta kelas contoh ialahTestClass. Penghias ialah fungsi. Sasaran parameter dalam fungsi decorateClass ialah kelas Contoh itu sendiri, yang juga bersamaan dengan pembina kelas Example.prototype.constructor.

Parameter hantaran penghias

Penghias yang dilaksanakan di atas tidak boleh dihantar dalam parameter apabila digunakan Jika anda ingin memasukkan parameter apabila menggunakan penghias, anda boleh merangkum lapisan fungsi di luar penghias

@decorateClass(true)
class Example {
    //...
}

function decorateClass(isTestClass) {
    return function(target) {
  target.isTestClass = isTestClass
  }
}

Penghias yang dilaksanakan dalam kod di atas boleh melepasi parameter apabila digunakan, supaya tingkah laku penghias boleh diubah suai mengikut senario yang berbeza.

Dalam pembangunan sebenar, apabila React digunakan dalam kombinasi dengan perpustakaan Redux, selalunya perlu menulisnya seperti berikut.

class MyReactComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

Dengan penghias, anda boleh menulis semula kod di atas.

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}

Penghias kaedah kelas

Penghias kaedah kelas digunakan untuk menghias kelas Parameter kaedah

penghias kaedah kelas

• sasaran:

• dihiasi oleh penghias Kaedah kelas ialah kaedah statik: sasaran ialah pembina kelas

• Kaedah kelas yang diubah suai oleh penghias ialah kaedah contoh: sasaran ialah objek prototaip kelas

• kaedah: nama kaedah kelas yang diubah suai

• deskriptor: deskriptor atribut ahli yang diubah suai

// 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;
}

Seperti dalam kod di atas, penghias @log menghiasi kaedah contoh masing-masing instanceMethod dan staticMethod. Fungsi penghias @log adalah untuk melaksanakan console.log untuk mengeluarkan log sebelum melakukan operasi asal.

Parameter hantaran penghias kaedah kelas

Penghias yang dilaksanakan di atas tidak boleh dihantar dalam parameter apabila anda ingin menggunakan penghias, anda mesti lulus dalam parameter , anda boleh merangkum lapisan fungsi lain di luar penghias

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;
  }
}

Penghias yang dilaksanakan dalam kod di atas boleh dihantar apabila digunakan Parameter, supaya tingkah laku penghias boleh diubah suai mengikut senario yang berbeza.

Aturan pelaksanaan penghias kelas dan penghias kaedah kelas

Jika dalam kelas, penghias digunakan untuk menghias kelas dan kaedah kelas pada masa yang sama, maka penghias Urutan pelaksanaan ialah: mula-mula laksanakan penghias kaedah kelas, dan kemudian laksanakan penghias kelas.

Jika kelas yang sama atau kaedah kelas yang sama mempunyai banyak penghias, ia akan menjadi seperti mengupas bawang, masuk dari luar ke dalam dahulu, dan kemudian melaksanakan dari dalam ke luar.

// 类装饰器
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) 先执行。类装饰器同理。

利用装饰器实现AOP切面编程

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前端】