|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
'use strict'; console.log(this); // Global nesneyi temsil eder. const calcAge = function (birthYear) { console.log(2037 - birthYear); console.log(this); }; calcAge(2000); // Bu durumda, this değeri global nesneyi temsil eder çünkü fonksiyon bağımsız bir şekilde çağrılmıştır. const calcAgeArrow = birthYear => { console.log(2037 - birthYear); console.log(this); }; calcAgeArrow(2000); // Global nesne // Bu örnekte calcAgeArrow adında bir arrow fonksiyonu tanımlanmıştır. Bu fonksiyon bir doğum yılı parametresi alır, bu doğum yılına göre bir yaş hesaplar ve ardından this değerini ekrana yazdırır. // Burada dikkat edilmesi gereken önemli bir nokta, arrow fonksiyonlarının this değerini oluşturmamasıdır. Arrow fonksiyonları, kendi this bağlamını oluşturmadıkları için, genellikle arrow fonksiyonları içinde kullanılan this, dışındaki kapsayıcı fonksiyonun this değerini miras alır. // Ancak, bu durum arrow fonksiyonları ile normal fonksiyonlar arasındaki temel farklardan biridir. Normal fonksiyonlar, çağrıldıkları bağlama bağlı olarak this değerini değiştirirken, arrow fonksiyonları bu bağlamı değiştirmez ve dışındaki kapsayıcı fonksiyonun this değerini miras alır. // Bu nedenle, calcAgeArrow fonksiyonunun içindeki this değeri arrow fonksiyonunun bağlı olduğu global bağlamı temsil eder. Yani, bu örnekte this değeri, genellikle global nesneyi temsil eden window (tarayıcıda) veya global (Node.js'te) olacaktır. // AÇIKLAMA // myMethod içindeki arrow fonksiyonu, kendi this değerini oluşturmadığı için dışındaki kapsayıcı fonksiyonun (bu durumda global kapsamın) this değerini miras alır. // this.prop ifadesi, arrow fonksiyonu içinde this değerini ifade eder. Ancak, arrow fonksiyonlarının this değeri global bağlamı temsil ettiği için, bu ifade globalde tanımlanan prop değişkenini ifade eder. // Benzer şekilde, this.number ifadesi de globalde tanımlanan number değişkenini ifade eder. var prop = 'a'; // globalde tanımlanan 'prop' değişkeni var number = 12; // globalde tanımlanan 'number' değişkeni const myObject = { prop: 'Hello', // myObject içindeki 'prop' özelliği number: 12, // myObject içindeki 'number' özelliği // Arrow fonksiyonu: this değeri global bağlamı temsil eder myMethod: () => { console.log(this.prop); // globalde tanımlanan 'prop' değişkenini ifade eder ('a') console.log(this.number); // globalde tanımlanan 'number' değişkenini ifade eder (12) }, }; myObject.myMethod(); // Arrow fonksiyonunu çağırma // Bu örnekte, arrow fonksiyonunun this değeri global bağlamı temsil ettiği için, içinde kullanılan this.prop ve this.number ifadeleri globalde tanımlanan değişkenleri ifade eder. Arrow fonksiyonlarının this davranışını anlamak, kullanımdan önce dikkatlice düşünülmesi gereken önemli bir konsepttir. // AÇIKLAMA // 1. myObject2 adında bir nesne oluşturulmuştur. // Bu nesnenin içinde prop ve number adında iki özellik bulunmaktadır. const myObject2 = { prop: 'Hello', number: 12, // 2. myMethodArrow adında bir arrow fonksiyon tanımlanmıştır. // Arrow fonksiyonları kendi this bağlamını oluşturmadığı için, this genellikle global nesneyi ifade eder. // Bu nedenle, this.prop ve this.number ifadeleri muhtemelen undefined olacaktır. myMethodArrow: () => { console.log(this.prop); // 'Hello' değeri beklenir, ancak muhtemelen undefined olacaktır console.log(this.number); // 12 değeri beklenir, ancak muhtemelen undefined olacaktır }, // 3. myMethodFunc adında bir normal fonksiyon tanımlanmıştır. // Normal fonksiyonlar kendi this bağlamını oluştururlar ve genellikle çağrıldıkları nesneyi ifade ederler. // Bu nedenle, this.prop ve this.number ifadeleri myObject2 nesnesini ifade eder. myMethodFunc: function () { console.log(this.prop); // 'Hello' değeri beklenir, çünkü normal fonksiyon çağrıldığı nesneyi temsil eder console.log(this.number); // 12 değeri beklenir, çünkü normal fonksiyon çağrıldığı nesneyi temsil eder }, }; // 4. myObject2 nesnesinin myMethodArrow ve myMethodFunc metodları çağrılmıştır. // myMethodArrow içinde this değeri genellikle global nesneyi ifade eder, bu nedenle this.prop ve this.number muhtemelen undefined olacaktır. // myMethodFunc içinde this değeri myObject2 nesnesini ifade eder, bu nedenle this.prop ve this.number myObject2 nesnesinin değerlerini ifade eder. myObject2.myMethodArrow(); // 'Hello' ve 12 değerleri beklenir, ancak muhtemelen undefined olacaktır myObject2.myMethodFunc(); // 'Hello' ve 12 değerleri beklenir // AÇIKLAMA const myButton = document.getElementById('myButton'); myButton.addEventListener('click', function () { console.log(this); // Button elementini temsil eder }); //AÇIKLAMA // 1. Person adında bir constructor fonksiyonu tanımlanmıştır. // Bu fonksiyon bir 'name' parametresi alır ve 'this' bağlamı içinde 'name' özelliğini tanımlar. // Ayrıca 'this' bağlamı içinde 'greet' adında bir fonksiyon tanımlar. function Person(name) { // 'name' özelliği tanımlanır ve constructor fonksiyonuna geçilen 'name' parametresi ile atanır. this.name = name; // 'greet' fonksiyonu tanımlanır. Bu fonksiyon, 'this' bağlamı içinde tanımlanan 'name' özelliğini kullanarak bir selam mesajı yazdırır. this.greet = function () { console.log(`Hello, I'm ${this.name}`); }; } // 2. Person constructor fonksiyonunu kullanarak bir nesne oluşturulur. // Oluşturulan nesne 'person2' adında bir değişkene atanır ve 'John' ismi ile ilişkilendirilir. const person2 = new Person('John'); // 3. Oluşturulan nesnenin 'greet' metodu çağrılır. // 'greet' metodu, 'this' bağlamı içindeki 'name' özelliğini kullanarak bir selam mesajı yazdırır. person2.greet(); // Hello, I'm John //AÇIKLAMA class Person { // Kurucu fonksiyon (constructor) constructor(name, age) { this.name = name; this.age = age; } // Bir metod ekleyelim greet() { console.log( `Merhaba, benim adım ${this.name} ve ben ${this.age} yaşındayım.` ); } } // Person sınıfından bir örnek oluşturalım const person1 = new Person('Ahmet', 25); // Oluşturulan örnek üzerinden metod çağrısı yapalım person1.greet(); // Merhaba, benim adım Ahmet ve ben 25 yaşındayım. // AÇIKLAMA function NormalFunction() { this.value = 1; // Normal fonksiyon içinde arrow function this.normalMethod = function () { setTimeout(function () { this.value++; console.log('Normal Function - Value:', this.value); // 'this' değeri değişir }, 1000); }; // Arrow function içinde arrow function this.arrowMethod = function () { setTimeout(() => { this.value++; console.log('Arrow Function - Value:', this.value); // 'this' değeri değişmez }, 1000); }; } const obj = new NormalFunction(); obj.normalMethod(); // Normal Function - Value: NaN (this.value, globalde tanımlı değil) obj.arrowMethod(); // Arrow Function - Value: 2 // Bu örnekte, NormalFunction adında bir constructor fonksiyonu var. normalMethod içindeki iç fonksiyon normal bir fonksiyonken, arrowMethod içindeki iç fonksiyon arrow function'dır. normalMethod içindeki normal fonksiyon, kendi this değerini oluşturduğu için içindeki this.value, global bağlamında tanımlı olmadığı için NaN değerini alır. Ancak arrowMethod içindeki arrow function, dışındaki kapsayıcı fonksiyonun this değerini miras alır, bu nedenle this.value doğru bir şekilde güncellenir. |
İlk Yorumu Siz Yapın