JavaScript Academy · Ders

Proxy Oluşturma

İşlemleri yakalamak için nesneleri sarın.

Proxy Oluşturma, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Vekil Nedir

Vekil, bir nesneyi sarar ve özellikleri okuma, yazma ve silme gibi temel işlemleri araya girerek yakalamanızı sağlar.

Bir vekili new Proxy(target, handler) ile oluşturursunuz; işleyici, davranışı özelleştiren tuzakları tanımlar.

Boş Bir İşleyici

Boş bir işleyiciyle vekil, target ile tamamen aynı şekilde davranır. Her işlem doğrudan iletilir.

const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});

console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);

target ve Vekil Durumu Paylaşır

Vekil, target'ın kopyasını oluşturmaz. İkisi de aynı temel nesneye referans verir; bu nedenle herhangi biri üzerinden yapılan değişiklik her ikisinde de görülür.

const target = { count: 0 };
const proxy = new Proxy(target, {});

proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);

get Tuzağı Ekleme

get tuzağı, özellik okumalarını araya girerek yakalar. Burada her okuma, değer döndürülmeden önce günlüklenir.

const proxy = new Proxy({ name: 'Ada' }, {
  get(target, prop) {
    console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.name);

Tuzak Parametreleri

get tuzağı; target, property adı ve receiver (vekil) değerlerini alır. Döndürülecek değere siz karar verirsiniz.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    return prop in target ? target[prop] : 'missing';
  }
});

console.log(proxy.a);
console.log(proxy.b);

Okuma Sırasında Hesaplanan Özellikler

Bir get tuzağı, target'ın gerçekte saklamadığı değerleri anında hesaplayarak döndürebilir.

const proxy = new Proxy({ first: 'Ada', last: 'Lovelace' }, {
  get(target, prop) {
    if (prop === 'full') return target.first + ' ' + target.last;
    return target[prop];
  }
});

console.log(proxy.full);

set Tuzağı Ekleme

set tuzağı, yazma işlemlerini araya girerek yakalar. Başarıyı belirtmek için true döndürmeniz gerekir; aksi halde atama başarısız kabul edilir.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    console.log('setting ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

proxy.score = 42;
console.log(proxy.score);

has Tuzağı

has tuzağı, in işlecini araya girerek yakalar ve üyelik denetimlerini özelleştirmenizi sağlar.

const proxy = new Proxy({ a: 1 }, {
  has(target, prop) {
    console.log('checking ' + prop);
    return prop in target;
  }
});

console.log('a' in proxy);
console.log('b' in proxy);

deleteProperty Tuzağı

deleteProperty tuzağı, delete işlemini araya girerek yakalar. Başarı için true döndürün.

const proxy = new Proxy({ secret: 'x', ok: 'y' }, {
  deleteProperty(target, prop) {
    console.log('deleting ' + prop);
    delete target[prop];
    return true;
  }
});

delete proxy.secret;
console.log(Object.keys(proxy));

Kullanılabilen Pek Çok Tuzak

Vekiller, get ve set'in yanı sıra has, deleteProperty, ownKeys, apply (işlevler için), construct ve daha fazlası için tuzakları destekler. Yalnızca ihtiyacınız olanları uygularsınız.

const proxy = new Proxy({ x: 1, y: 2 }, {
  ownKeys(target) {
    console.log('listing keys');
    return Object.keys(target);
  }
});

console.log(Object.keys(proxy));

Vekiller Neden Önemli

Vekiller, target nesnesini değiştirmeden doğrulama, günlükleme, varsayılan değerler ve tepkisellik eklemenizi sağlar. Vue gibi çerçevelerin tepkisellik sistemlerine güç verirler. Sırada get ve set tuzaklarını daha derinlemesine inceleyeceksiniz.

const logged = new Proxy({ v: 0 }, {
  get: (t, p) => { console.log('get ' + p); return t[p]; },
  set: (t, p, val) => { console.log('set ' + p); t[p] = val; return true; }
});
logged.v = 9;
console.log(logged.v);

Kısa Kontrol

new Proxy(target, handler) ne oluşturur?

Özet: Vekil Oluşturma

Nesne işlemlerini araya girerek yakalamayı öğrendiniz:

new Proxy(target, handler), bir nesneyi tuzaklarla sarar.
Boş bir işleyici her şeyi doğrudan iletir; vekil ile target durumu paylaşır.
Yaygın tuzaklar: get, set, has, deleteProperty, ownKeys.
set ve delete tuzakları, başarı durumunda true döndürmelidir.

Sıkça Sorulan Sorular

“Proxy Oluşturma” dersi ücretsiz mi?

Evet — “Proxy Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Proxy Oluşturma” dersinde ne öğreneceğim?

İşlemleri yakalamak için nesneleri sarın. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Proxy Oluşturma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön