Bind() Fonksiyonu

Merhaba !

Son haftalarda sürekli olarak React JS üzerine yoğunlaşıyorum ve kendimi bu alanda geliştirmeye devam ediyorum. React JS dokümantasyonunu okurken dikkatimi çeken konuları da araştırıyorum. React JS hakkında az çok bilgisi olanlar, aşağıdaki kodu (*) anlayacaktırlar.

class Foo extends Component {
	constructor(props) {
		super(props);
	}
	handleClick() {
		console.log("Click happened");
	}
	render() {
		return <button onClick={this.handleClick}>Click Me</button>;
	}
}

* Kod örneği React JS sitesinden alınmış ve değiştirilmiştir.

Burada butona tıklandığında handleClick() fonksiyonunun çalışması isteniyor fakat hata verecektir. Bu hatayı gidermek için buton ile fonksiyonu birbirine bind fonksiyonuyla bağlamamız gerekiyor.

Bunu gerçekleştirmek için çeşitli yöntemler mevcut. constructor() fonksiyonunun içerisinde

constructor(props) {
	super(props);
	this.handleClick = this.handleClick.bind(this);
}

şeklinde fonksiyon ile this elementini birbirine bağlayabildiğimiz gibi, bunu butonun içerisinde

<button onClick={this.handleClick.bind(this)}>Click Me</button>;

yöntemi ile bind edebiliriz.

Bind() Fonksiyonu

Bind fonksiyonun mantığını anlamak için örnek bir kod (*) inceleyelim.

var checkNumericRange = function (value) {
	if (typeof value !== "number") return false;
	else return value >= this.minimum && value <= this.maximum;
};

* Kod örneği Microsoft sitesinden alınmıştır.

Yukarıdaki checkNumericRange adlı fonksiyon, parametre olarak aldığı değeri kontrol ediyor. Eğer number değişken türünde değilse false return edecek; eğer değişken türü number ise this.minumum ve this.maximum değerleri arasında olup olmadığını boolean olarak (true yada false) return edecek. Fakat bu fonksiyonun içerisinde maximum ve minumum değişkenleri tanımlı değil. Haliyle fonksiyonu bu haliyle kullanmaya çalıştığımızda sürekli false return edilecek.

İçerisinde minumum ve maximum değişkenlerini barındıran bir obje oluşturalım.

var range = { minimum: 10, maximum: 20 };

range objesi ile checkNumericRange fonksiyonunu birbirine bağlamak için bind fonksiyonundan faydalanacağız.

var checkNumericRange = checkNumericRange.bind(range);

Artık range objesi ile checkNumericRange fonksiyonumuz birbirine bağlandığı için, fonksiyon içerisinde bulunmayan minumum ve maximum değişkenlerini range objesinden alacak ve fonksiyonumuz doğru sonuçlar verecektir.

Haliyle React JS'de onClick ve onChange fonksiyonlarını kullanırken bu butonları (this elementini) fonksiyonlar ile sürekli bind etmenin sebebini kafamızda daha iyi oturtmuş oluyoruz.

this.handleClick = this.handleClick.bind(this);