Adakah pengubah suai ciri es6 atau es7?

Pengubah suai ialah ciri es7. Pengubah suai ialah sintaks berkaitan kelas yang diperkenalkan oleh ES7 Ia digunakan untuk menganotasi atau mengubah suai kelas dan kaedah kelas Ia bergantung pada kaedah "Object.defineProperty" ES5 dan ditulis sebagai "@function name"; kelas, Kaedah dan parameter atribut digunakan untuk melanjutkan fungsi kelas, atribut, kaedah dan parameter.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 7, komputer Dell G3.

Apakah itu penghias?

Penghias ialah sintaks ES7 yang digunakan untuk menganotasi atau mengubah suai kelas dan kaedah.

Penampilannya boleh menyelesaikan dua masalah:

• Kaedah perkongsian antara kelas yang berbeza

• Kompilasi perbandingan masa kelas dan kaedah Untuk menukar kelakuan pengubah

, fungsi pembungkus ditulis sebagai @函数名. Ia boleh diletakkan sebelum takrif kelas dan kaedah kelas, dan boleh digunakan untuk menyediakan fungsi tambahan kepada kelas, sifat atau fungsi.

@frozen class Foo {
  @configurable(false)
  @enumerable(true)
  method() {}
 
  @throttle(500)
  expensiveMethod() {}
}

Sebanyak empat penghias digunakan di atas, satu digunakan dalam kelas itu sendiri, dan tiga lagi digunakan dalam kaedah kelas.

Penghias bukan konsep baharu seperti Java dan Python telah lama menggunakannya. Penghias dalam ES7 menggunakan kaedah penulisan bahasa lain kaedah ES5 Object.defineProperty.

Pengubahsuaian kelas

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

@testable ialah penghias, yang mengubah suai gelagat kelas MyTestableClass dan menambahkan atribut statik padanya isTestable. Sasaran parameter bagi fungsi yang boleh diuji ialah kelas MyTestableClass itu sendiri.

@decorator
class A {}

// 等同于

class A {}
A = decorator(A) || A;

Dengan kata lain, penghias ialah fungsi yang memproses kelas. Parameter pertama fungsi penghias ialah kelas sasaran yang akan dihias.

Jika anda ingin menambah berbilang parameter, anda boleh merangkum lapisan fungsi di luar penghias.

function testable(name) {
    return function(target) {
      target.name = name;
    }
  }

@testable('MyTestableClass')
class MyTestableClass {}
MyTestableClass.name // MyTestableClass

@testable('MyClass')
class MyClass {}
MyClass.isTestable // MyClassf

Contoh di atas adalah untuk menambah atribut statik pada kelas.
Jika anda ingin menambah atribut contoh, anda boleh beroperasi melalui objek Prototaip kelas sasaran.

export function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list)
  }
}

// main.js
import { mixins } from './mixins'

const Foo = {
  foo() { console.log('foo') }
};

@mixins(Foo)
class MyClass {}

let obj = new MyClass();
obj.foo() // 'foo'

Dalam pembangunan sebenar, apabila tindak balas 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 {};

Perhatikan bahawa penghias mengubah tingkah laku kelas. Ini berlaku apabila kod disusun, bukan pada masa jalan. Ini bermakna penghias boleh menjalankan kod semasa penyusunan. Dalam erti kata lain, penghias pada dasarnya adalah fungsi yang dilaksanakan pada masa penyusunan.

Pengubahsuaian kaedah

class Person {
  // 用来装饰”类“的 name 方法
  @readonly
  name() { return `${this.first} ${this.last}` }
}

Fungsi penghias baca sahaja boleh menerima sejumlah tiga parameter.

function readonly(target, name, descriptor){
  // descriptor对象原来的值如下
  // {
  //   value: specifiedFunction,
  //   enumerable: false,
  //   configurable: true,
  //   writable: true
  // };
  descriptor.writable = false;
  return descriptor;
}

readonly(Person.prototype, 'name', descriptor);
// 类似于
Object.defineProperty(Person.prototype, 'name', descriptor);

• Parameter pertama penghias ialah objek prototaip kelas. Contoh di atas ialah Person.prototaip , tetapi pada masa ini kejadian itu belum lagi Dijana, jadi anda hanya boleh menghiasi prototaip (ini berbeza daripada hiasan kelas, dalam hal ini parameter sasaran merujuk kepada kelas itu sendiri)
• Parameter kedua ialah nama atribut yang akan dihias
• Parameter ketiga ialah objek perihalan atribut

Penghias juga berfungsi sebagai anotasi bahawa kaedah nama di atas adalah baca sahaja.

Selain komen, penghias juga boleh digunakan untuk semakan jenis. Jadi, untuk kelas, ciri ini agak berguna. Dalam jangka panjang, ia akan menjadi alat penting untuk analisis statik kod JavaScript. Ia disokong sebagai ciri percubaan dalam TypeScript.

Mengapa penghias tidak boleh digunakan untuk majlis

Penghias hanya boleh digunakan untuk kelas dan kaedah kelas, bukan fungsi, kerana ada promosi fungsi.

var counter = 0;

var add = function () {
  counter++;
};

@add
function foo() {}

Kod di atas bermaksud bahawa pembilang adalah sama dengan 1 selepas pelaksanaan, tetapi keputusan sebenar ialah pembilang itu sama dengan 0. Kerana promosi fungsi, kod yang dilaksanakan adalah seperti berikut.

@add
function foo() {
}

var counter;
var add;

counter = 0;

add = function () {
  counter++;
};

Pendek kata, disebabkan wujudnya function lifting, penghias tidak boleh digunakan untuk majlis. Kelas tidak akan dinaikkan pangkat, jadi tiada masalah dalam hal ini.

core-decorators.js

[core-decorators.js]() ialah modul pihak ketiga yang menyediakan beberapa penghias biasa.

• @autobind: Menjadikan objek ini dalam kaedah terikat pada objek asal
• @readonly: Menjadikan sifat atau kaedah tidak boleh ditulis.
• @override: Semak sama ada kaedah subkelas dengan betul mengatasi kaedah nama yang sama bagi kelas induk Jika ia salah, ralat akan dilaporkan.
• @deprecate (alias @deprecated): Memaparkan amaran dalam konsol yang menunjukkan bahawa kaedah itu akan ditamatkan.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Adakah pengubah suai ciri es6 atau es7?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!