Meneroka Proksi dalam JavaScript: Kefungsian Lanjutan dengan Contoh Praktikal

JavaScript menawarkan banyak ciri menarik, dan salah satu yang paling berkuasa dan kurang biasa ialah objek Proksi. Alat ini membolehkan anda mencipta objek yang boleh memintas operasi pada objek lain, seperti mengakses atau mengubah suai sifat. Dalam siaran ini, kami akan meneroka cara Proksi berfungsi, kegunaannya dan cara ia berbeza daripada fungsi lain yang serupa seperti getter dan setter.

---

Apa itu Proksi?

Proksi bertindak sebagai perantara untuk objek lain (dipanggil "sasaran"). Anda boleh menentukan cara proksi harus berkelakuan untuk operasi yang berbeza melalui "pengendali." Ini membolehkan anda menyesuaikan cara anda berinteraksi dengan objek asas.

---

Sintaks Asas

const target = {}; // The original object
const handler = { /* definitions of operations */ };
const proxy = new Proxy(target, handler);

---

Penggunaan 1: Memintas Akses Harta

Andaikan kami mempunyai objek yang mewakili pengguna dan kami ingin menyediakan gelagat tersuai apabila mengakses sifatnya:

const user = {
    name: 'Gabriel',
    age: 30
};

const handler = {
    get: function(target, prop) {
        if (prop in target) {
            return target[prop];
        } else {
            return 'Property not found';
        }
    }
};

const userProxy = new Proxy(user, handler);

console.log(userProxy.name); // Gabriel
console.log(userProxy.age); // 30
console.log(userProxy.email); // Property not found

Anda mungkin mempertimbangkan untuk menggunakan pengambil untuk mencapai gelagat yang serupa:

const userWithGetters = {
    name: 'Gabriel',
    age: 30,
    getProperty(prop) {
        return this[prop] || 'Property not found';
    }
};

console.log(userWithGetters.getProperty('name')); // Gabriel
console.log(userWithGetters.getProperty('email')); // Property not found

Perbezaannya ialah dengan Proksi, anda boleh memintas sebarang operasi pada objek, bukan hanya akses harta benda, yang memberikan lebih fleksibiliti.

---

Penggunaan 2: Pengesahan Harta

Bayangkan kami ingin memastikan bahawa apabila menetapkan umur pengguna, hanya nilai yang sah dibenarkan. Di sinilah Proksi bersinar:

const person = {
    name: 'Ana'
};

const handler = {
    set: function(target, prop, value) {
        if (prop === 'age' && (value < 0 || value > 120)) {
            throw new Error('Age must be between 0 and 120');
        }
        target[prop] = value;
        return true;
    }
};

const personProxy = new Proxy(person, handler);

personProxy.name = 'María'; // Works fine
console.log(personProxy.name); // María

try {
    personProxy.age = -5; // Will throw an error
} catch (e) {
    console.log(e.message); // Age must be between 0 and 120
}

Anda boleh menggunakan penetap untuk mengesahkan nilai:

const personWithSetters = {
    _age: 0,
    name: 'Ana',
    set age(value) {
        if (value < 0 || value > 120) {
            throw new Error('Age must be between 0 and 120');
        }
        this._age = value;
    },
    get age() {
        return this._age;
    }
};

try {
    personWithSetters.age = -5; // Will throw an error
} catch (e) {
    console.log(e.message); // Age must be between 0 and 120
}

Perbezaan dengan Proksi ialah anda boleh menggunakan pengesahan secara lebih umum pada mana-mana harta, tanpa perlu mentakrifkan getter dan setter untuk setiap satu.

---

Penggunaan 3: Memantau Perubahan

Bayangkan anda ingin menjejaki perubahan yang dibuat pada objek. Dengan Proksi, ini mudah dicapai:

const data = {};

const handler = {
    set: function(target, prop, value) {
        console.log(`Changing ${prop} from ${target[prop]} to ${value}`);
        target[prop] = value;
        return true;
    }
};

const dataProxy = new Proxy(data, handler);

dataProxy.name = 'Pedro'; // Changing name from undefined to Pedro
dataProxy.age = 25; // Changing age from undefined to 25

Dalam sistem yang boleh diperhatikan, anda perlu menentukan corak tertentu untuk memberitahu perubahan. Dengan Proksi, anda hanya memintas operasi:

// Simulating a basic observable
class Observable {
    constructor(data) {
        this.data = data;
        this.listeners = [];
    }

    addListener(listener) {
        this.listeners.push(listener);
    }

    notify() {
        this.listeners.forEach(listener => listener(this.data));
    }
}

Perbezaannya ialah menggunakan Proksi membolehkan pendekatan yang lebih langsung dan kurang bertele-tele untuk memintas dan bertindak balas terhadap perubahan. Dengan pemerhatian, anda perlu mengurus pemberitahuan secara manual.

---

Kesimpulan

Objek Proksi dalam JavaScript ialah alat yang sangat berkuasa yang membolehkan anda memintas dan mentakrifkan semula operasi pada objek. Tidak seperti getter dan setter, yang lebih ketat dan memerlukan lebih banyak kod, Proxy menyediakan fleksibiliti dan pendekatan yang lebih bersih untuk mengesahkan, memantau dan memanipulasi objek.

Jika anda ingin meningkatkan keupayaan anda untuk bekerja dengan objek dalam JavaScript, meneroka Proksi pastinya berbaloi!

Atas ialah kandungan terperinci Meneroka Proksi dalam JavaScript: Kefungsian Lanjutan dengan Contoh Praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!