Ext JS - Learning Center

Tutorial:What is that Scope all about (Turkish)

From Learn About the Ext JavaScript Library

Jump to: navigation, search
Summary: Bu eğitsel Javascript'te kapsam(scope)kavramının temellerini ve değişkenlerin görünürlüğünü açıklar.
Author: Jozef Sakalos Çeviren : Melih OKURSOY
Published: August 23, 2007 Çeviri Tarihi:21/07/2008
Ext Version: 1.1+ / 2.0+
Languages: tr.png Turkish en.png English cn.png Chinese kr.png Korean fr.png French it.png Italian

Contents

Başlamadan Önce

Bu eğitseli çalışmak için en iyi yol elinizin altında Firebug plugin'i yüklü Firefox bulunmasıdır. Bu şekilde eğitsel örneklerini hemen test edebilirsiniz.

Her ikisinide yükleyin,tabi şimdiye kadar yapmadıysanız.

Tanım

Kapsam(scope)
1. (isim) birşeyin üzerinden hareket ettiği,işlem yaptığı,üzerinde güç veya konrolü olduğu alan [1]
2. (isim) Programlamada, programdaki değişkenlerin görünürliğü ; örnek olarak, bir fonksiyonun bir başka fonksşiyon içinde oluşturulan değişkeni görüp görememesi. [2]

öyleyse bununla ilgili ne yapıyoruz? fonsiyonları çalıştırdığıomızda bir değişkenin kullanılabilir olup olmadığını ve nerede kullanılabilir olduğunu bulacağız ve birisi bize "kapsamla ilgili bir sorun" veya "yanlış kapsamda çalışıyor" veya benzer birşey söylediğinde bunun ne demek olduğunu öğreneceğiz.

Hadi Başlayalım

JavaScript'te tanımladığınız her fonksiyon bir nesnenin metodudur. Bu şekilde yazsanız bile:

function fn() {
    alert(11);
}

Şaka yapıyor olmalı diyorsunuzdur. Bunun doğru olduğunu kanıtlamak için çok basit bir ispat yapabilirsiniz.Bunu yapmak için herhangibibir javascript dosyası,server veta HTML sayfasına ihtiyacınız olmayacak. Sadece Firefox'u açın, sonra Firebug'ın alt pencerresini açın ve konsol tabına basın. Firefox'un durum çubuğunun hemen üstünde >>> ile başlayan yazabileceğiniz bir satır göreceksiniz . Eğer konsol tabının altında >>> ile başlayan satırı görmüyorsanız, Seçenekleri açın ve Larger Command Line seçimini kaldırın.

Oraya aşağıdaki kod parçacığını yazın:

function fn() { alert(11); };

ve Enter'a tıklayın. Hiçbirşey olmadı, evet? Aslında yaptığınız sadece fn fonksiyonunu tanımlamak oldu. Şimdi şunu deneyelim:

fn();

ve Enter'a basın. 11 diye alert aldınız? Şimdiye kadar iyi. Şimdi şunu deneyelim:

window.fn();
this.fn();

Sonuç aynı? Bunun nedeni fn fonksiyonunu aslında window nesnesinin bir metodu olması. ikinci satır size this değişkenin window nesenesine eşit olduğunu kanıtlar.Bütün fonksiyonlarınızı window.myFunction(...) şeklinde çağrmak zorunda değilsiniz, bu sadece uygunluk ve tembel kullanıcıların işini kolaylaştırmak içindir.

Window Nesnesi

window nesnesi hep ordadır--onu browser penceresi olarak düşünebilirsiniz.document nesnesi gibi diğer bütün nesneleri ve tüm global tanımlanmış değişkenleri kapsar.

Firebug'ı açabilirsiniz,Script tabına geçin,Firebugun sağ tarafındaki "New watch expression..." kutusuna window yazın ve enter'a basın. window nesnesinin içinde neler olduğuna dair ipuçları yakalamak için inceleyebilirsiniz. Alternatif olarak sadece DOM tabına tıklayıp window nesnesi hakkında aynı bilgiye ulaşabilrsiniz.

Özellikle önceden tanımladığımız fn fonksiyonunu bulun.

Her frame veya iframe kendi window nesnesine,kendi global alanına sahiptir.

Kapsamı Anlamak

Şİmdi biraz güçleştirelim. Firebug'da Console tabına geri dönün ve aşağıdaki kod parçacığını yazın:

var o1 = {testvar:22, fun:function() { alert('o1: ' + this.testvar); }};
var o2 = {testvar:33, fun:function() { alert('o2: ' + this.testvar); }};

Ne yaptık? o1 veo2 nesnelerini tanımladık. İkiside aynı özellik ve metodlara sahip ama özellikler farklı değerlere sahip.

Şimdi şunu deneyelim:

fun();
window.fun();
this.fun();

Hata, evet? window nesnesinin (burada this'e karşılık gelen) fun diye bir metodu yok . Aşağıdakini deneyelim:

o1.fun();
o2.fun();

22 ve 33 değerlerini aldık? Çok güzel!

Şİmdi son güçlüğümüze gelelim. burada her nesne için yazmak istemediğimiz primitif fonsiyonlarımız var. Diyelim ki o1.fun son bir haftadır geliştirdiğiniz çok akıllı ve uzun bir fonksiyon ve sonunda çalışıyor.Kodun üzerinde dağılmış 100 kadar this değişkeni içeren satır olduğunu hayal edelim. o1.fun fonksiyonunu this değişkenini o2yi gösterecek şekilde nasıl çağıracaksın? Aşağıdaki kod parçacığını deneyelim:

o1.fun.call(o2);

o1'in fun metodunu çalıştırırken 'this değişkeni o2'yi gösterecek şekilde zorladık, Diğer bir deyişle, daha bilimsel: o1.fun metodu o2 nesnesinin kapsamında çalışıyor.

bir fonksiyon,bir nesenenin metodunu çalıştırırken Kapsamı value of variable this olarak düşünebilirsiniz.

Değişkenlerin Görünürlüğü

Değişkenlerin görünürlüğü konusu kapsam konusu ile sıkı sıkıya ilişkilidir. Değişkenlerin ne olduğunu zaten biliyoruz (fonksiyonlar da değikendir) herhangibi bir nesnenin veya fonksiyonun dışında tanımlanan global veya teknik olarak global window nesnesinin özellikleridir.

Global değişkenler heryerde görülebilirdirler ;bütün fonksiyonların içinde veya dışında.eğer bir fonsiyonun içinden bir global değişkeni değiştirirseniz diğer fonksiyonlarda değiştirilen yeni değeri görür.

Ayrıca nesnelerin kendi özellikleri olabileceğini biliyoruz (yukardaki testvar gibi)bunlar nesnenin hem içinden hem dışından görülebilir. Şunu deneyelim:

alert(o1.testvar); // accessing o1 property testvar from outside

içerden erişim her iki nesnenin fun metdunda da gösterildi.

Bulmacanın son parçası fonksiyonların içinde var anahtar kelimesi ile tanımlanan yerel değişkenler

i = 44; 
function fn2() { 
    var i = 55; 
    alert(i); 
}
fn2();

Ne olacak? Evet, 55. fn2'de tanımlanan i değişkeni fn2 fonksiyonu için yerel değişkeni ve 44'e eşit olan i global değiken ile hiçbir ilgisi yok

Fakat:

alert(i);

44 değerini verecektir şu anda global i değişkenine erişiyorsunuz.

Umarım kapsam ve değişken görünürlüğü konusuna biraz ışık tutmuştur.

ilave okuma:

  • This page was last modified on 15 August 2008, at 16:32.
  • This page has been accessed 1,781 times.