JavaScript Academy · Ders

get ve set Tuzakları

Özellik okumalarını ve yazmalarını özelleştirin.

get ve set Tuzakları, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. 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.

get ve set Tuzakları

get ve set tuzakları, en çok kullanılan vekil kancalarıdır. Özelliklerin okunmasını ve yazılmasını araya girerek yakalar; değerleri dönüştürmenizi, girdiyi doğrulamanızı veya erişimi günlüklemenizi sağlar.

get Tuzağının İmzası

get(target, property, receiver), her özellik okumasında çalışır. Çağıranın görmesini istediğiniz her şeyi döndürebilirsiniz.

const proxy = new Proxy({ price: 10 }, {
  get(target, prop) {
    return target[prop];
  }
});

console.log(proxy.price);

get ile Varsayılan Değerler

Bir get tuzağı, undefined döndürmek yerine eksik özellikler için bir geri dönüş değeri sağlayabilir.

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

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

Okuma Değerlerini Dönüştürme

Get tuzağı, değerleri dışarı aktarırken yeniden şekillendirebilir; örneğin dizeleri büyük harfe dönüştürebilir.

const proxy = new Proxy({ name: 'ada' }, {
  get(target, prop) {
    const value = target[prop];
    return typeof value === 'string' ? value.toUpperCase() : value;
  }
});

console.log(proxy.name);

set Tuzağının İmzası

set(target, property, value, receiver), her yazma işleminde çalışır. Başarı için true döndürmelidir; aksi halde katı kip bir hata fırlatır.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = value;
    return true;
  }
});

proxy.x = 5;
console.log(proxy.x);

set İçinde Doğrulama

Bir set tuzağının klasik kullanım amacı doğrulamadır: geçersiz değerleri target'a ulaşmadan önce reddetmek.

const person = new Proxy({}, {
  set(target, prop, value) {
    if (prop === 'age' && (typeof value !== 'number' || value < 0)) {
      throw new TypeError('age must be a non-negative number');
    }
    target[prop] = value;
    return true;
  }
});

person.age = 30;
console.log(person.age);
try { person.age = -5; } catch (e) { console.log(e.message); }

set İçinde Değerleri Dönüştürme

Bir set tuzağı, reddetmenin ötesinde girdiyi normalleştirebilir; örneğin dizeleri saklamadan önce baştaki ve sondaki boşlukları kaldırabilir.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = typeof value === 'string' ? value.trim() : value;
    return true;
  }
});

proxy.name = '   Ada   ';
console.log('[' + proxy.name + ']');

Her İki İşlemi Günlükleme

Her erişimi izlemek için get ve set'i birleştirin. Bu, bir nesnenin nasıl kullanıldığını hata ayıklarken çok değerlidir.

const proxy = new Proxy({ v: 1 }, {
  get(target, prop) {
    console.log('GET ' + prop);
    return target[prop];
  },
  set(target, prop, value) {
    console.log('SET ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

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

Salt Okumayı Zorunlu Kılma

Yazma işlemlerini her zaman reddeden bir set tuzağı, vekili target'ın salt okunur bir görünümüne dönüştürür.

const readonly = new Proxy({ pi: 3.14 }, {
  set() {
    console.log('writes are blocked');
    return false;
  }
});

try {
  'use strict';
  readonly.pi = 0;
} catch (e) {
  console.log(e.name);
}
console.log(readonly.pi);

Symbol Anahtarları ve İç İşleyiş

Tuzaklar Symbol anahtarları için de çalışır. Dahili Symbol'ler dahil her özelliği günlüklemek gürültülü sonuçlar verebileceğinden dikkatli olun; gerektiğinde filtreleyin.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    if (typeof prop === 'string') console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.a);

get ve set Neden Önemli

Bu tuzaklar birlikte, target'ı değiştirmeden doğrulama, hesaplanan özellikler, varsayılanlar, günlükleme ve tepkisellik sağlar. Ancak tuzakların içinde elle target[prop] = value yazmanın bazı özel durumları vardır. Sırada ele alınacak Reflect API'si bunları doğru şekilde işler.

const tracked = new Proxy({ total: 0 }, {
  set(target, prop, value) {
    console.log(prop + ' changed to ' + value);
    target[prop] = value;
    return true;
  }
});
tracked.total = 100;
console.log(tracked.total);

Kısa Kontrol

Başarılı bir atamayı belirtmek için bir set tuzağı ne döndürmelidir?

Özet: get ve set Tuzakları

Temel vekil tuzaklarını öğrendiniz:

get(target, prop, receiver) okumaları araya girerek yakalar; istediğiniz değeri döndürebilirsiniz.
set(target, prop, value, receiver) yazmaları araya girerek yakalar; başarı durumunda true döndürür.
Bunları varsayılanlar, dönüşümler, doğrulama ve günlükleme için kullanın.
Tuzakların içindeki işlemleri doğru şekilde yürütmek için sırada ele alınacak Reflect'i kullanın.

Sıkça Sorulan Sorular

“get ve set Tuzakları” dersi ücretsiz mi?

Evet — “get ve set Tuzakları” 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.

“get ve set Tuzakları” dersinde ne öğreneceğim?

Özellik okumalarını ve yazmalarını özelleştirin. 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 2. dersidir.

“get ve set Tuzakları” 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