Conquer Javascript - Topik Lanjutan #Proksi dan Reflect API

Pengenalan

Dalam bidang pembangunan JavaScript, Proksi dan Reflect API ialah alat berkuasa yang membolehkan anda memintas dan mengubah suai operasi objek. API ini menyediakan cara yang fleksibel dan cekap untuk melanjutkan dan menyesuaikan gelagat objek dalam aplikasi anda.

Dalam catatan blog ini, kami akan menyelidiki selok-belok Proksi dan Reflect, meneroka konsep teras, kes penggunaan dan contoh praktikal mereka.

Apakah itu Proksi dan Reflect?

Proksi ialah objek yang bertindak sebagai perantara untuk objek lain, memintas operasi yang dilakukan pada objek tersebut. Ia membolehkan anda menentukan gelagat tersuai untuk operasi seperti akses harta benda, tugasan, panggilan fungsi dan banyak lagi.

API Reflect, sebaliknya, menyediakan satu set kaedah statik yang mencerminkan tingkah laku pengendali bahasa. Ia membolehkan anda mengakses operasi ini secara pengaturcaraan, menjadikannya lebih mudah untuk melaksanakan pengendali Proksi tersuai dan bekerja dengan objek dengan cara yang lebih standard.

Konsep Teras

• Objek Proksi:
  • Mencipta objek proksi yang memintas operasi pada objek sasaran.
  • Mengambil dua hujah: sasaran (objek yang akan diproksikan) dan pengendali (objek yang mengandungi fungsi perangkap).
• Fungsi Perangkap:
  • Fungsi yang ditakrifkan dalam objek pengendali yang digunakan apabila operasi tertentu dilakukan pada proksi.
  • Fungsi perangkap biasa termasuk:
    • dapatkan: Memintas akses harta benda.
    • set: Memintas tugasan harta.
    • mempunyai: Memintas pemeriksaan kewujudan harta.
    • deleteProperty: Memintas pemadaman harta.
    • memohon: Memintas panggilan fungsi.
    • binaan: Memintas penciptaan objek menggunakan baharu.
    • ownKeys: Memintas panggilan ke Object.getOwnPropertyNames dan Object.getOwnPropertySymbols.
    • getOwnPropertyDescriptor: Memintas panggilan ke Object.getOwnPropertyDescriptor.
    • defineProperty: Memintas panggilan ke Object.defineProperty.
    • preventExtensions: Memintas panggilan ke Object.preventExtensions.

Kes Penggunaan

Proksi dan Reflect menawarkan pelbagai jenis aplikasi dalam pembangunan JavaScript:

Pengesahan Data

const target = {};
const handler = {
    set(target, property, value) {
        if (typeof value !== 'string') {
            throw new Error('Value must be a string');
        }
        target[property] = value;
        return true;
    }
};

const proxy = new Proxy(target, handler);

proxy.name = 'Alice'; // Valid
proxy.age = 42; // Throws an error

Dalam contoh ini, kami mencipta proksi yang mengesahkan jenis nilai yang diberikan kepada sifatnya. Jika percubaan dibuat untuk menetapkan nilai bukan rentetan, ralat akan dilemparkan.

Caching

const target = {};
const handler = {
    set(target, property, value) {
        if (typeof value !== 'string') {
            throw new Error('Value must be a string');
        }
        target[property] = value;
        return true;
    }
};

const proxy = new Proxy(target, handler);

proxy.name = 'Alice'; // Valid
proxy.age = 42; // Throws an error

Di sini, kami mencipta proksi yang menyimpan cache hasil pengiraan yang mahal. Fungsi get trap menyemak sama ada harta itu wujud pada objek sasaran. Jika tidak, ia mengira nilai dan menyimpannya pada objek sasaran. Akses seterusnya kepada harta yang sama akan mengembalikan nilai cache.

Melog dan Menyahpepijat

const target = {};
const handler = {
    get(target, property) {
        if (!target.hasOwnProperty(property)) {
            target[property] = computeValue(property);
        }
        return target[property];
    }
};

const proxy = new Proxy(target, handler);

console.log(proxy.expensiveCalculation); // Caches the result

Contoh ini menunjukkan cara merekod akses dan tugasan harta benda. Dapatkan dan tetapkan mesej log perangkap ke konsol apabila sesuatu harta diakses atau diubah suai.

Keselamatan

const target = {};
const handler = {
    get(target, property) {
        console.log(`Getting property: ${property}`);
        return target[property];
    },
    set(target, property, value) {
        console.log(`Setting property ${property} to ${value}`);
        target[property] = value;
        return true;
    }
};

const proxy = new Proxy(target, handler);

proxy.name = 'Bob';
console.log(proxy.name);

Dalam contoh ini, kami mencipta proksi yang menutup sifat kata laluan. Perangkap get memintas akses kepada sifat kata laluan dan mengembalikan '******' dan bukannya nilai sebenar.

Gelagat Objek Tersuai

const target = {
    username: 'secret',
    password: 'password123'
};

const handler = {
    get(target, property) {
        if (property === 'password') {
            return '******';
        }
        return target[property];
    }
};

const proxy = new Proxy(target, handler);

console.log(proxy.username); // Output: secret
console.log(proxy.password); // Output: ******

Contoh ini menunjukkan cara membuat getter tersuai untuk sifat nama penuh. Perangkap get memintas akses kepada sifat nama penuh dan mengembalikan gabungan sifat nama pertama dan nama akhir.

Reflection API

API Reflect menyediakan kaedah statik yang mencerminkan gelagat pengendali bahasa. Ia boleh digunakan bersama-sama dengan Proksi untuk melaksanakan gelagat tersuai dan untuk memajukan operasi ke objek sasaran apabila perlu.

const target = {};
const handler = {
    get(target, property) {
        if (property === 'fullName') {
            return `${target.firstName} ${target.lastName}`;
        }
        return target[property];
    }
};

const proxy = new Proxy(target, handler);

proxy.firstName = 'John';
proxy.lastName = 'Doe';

console.log(proxy.fullName); // Output: John Doe

Dalam contoh ini, perangkap get menggunakan Reflect.get untuk memajukan akses sifat kepada objek sasaran. Ini membolehkan kami melaksanakan gelagat tersuai sebelum atau selepas akses harta sebenar.

Kesimpulan

Proksi dan Reflect ialah alatan berkuasa yang boleh meningkatkan keupayaan pembangunan JavaScript anda dengan ketara. Dengan memahami konsep teras dan aplikasi praktikal mereka, anda boleh mencipta kod yang lebih fleksibel, cekap dan selamat.

Ingat untuk menggunakan API ini dengan bijak, kerana ia boleh memperkenalkan kerumitan kepada kod anda. Walau bagaimanapun, apabila digunakan dengan berkesan, ia boleh membuka kunci kemungkinan baharu dan meningkatkan projek JavaScript anda ke tahap yang baharu.

Atas ialah kandungan terperinci Conquer Javascript - Topik Lanjutan #Proksi dan Reflect API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!