this Anahtar Kellimesi Kullanımı
this nedir ?
JavaScript'te ` this as` anahtar kelimesi bir nesneyi ifade eder .Anahtar kelime , kullanım şekline bağlı olarak farklı nesneleri
this ifade eder :
Yalnızca, küresel nesneyithis ifade eder . |
Bir fonksiyonda, global nesneyethis atıfta bulunur . |
Bir fonksiyonda, katı modda this, undefined. |
Bir nesne yönteminde, nesneyethis atıfta bulunur . |
Bir olayda, bu olaya maruz kalan öğeyithis ifade eder . |
call(), apply()ve gibi yöntemlerde herhangi bir nesneye atıfta bulunulabilir bind().this |
this, ok fonksiyonlarında yer almaktadır.
Ok fonksiyonlarının kendilerine ait bir `this` özelliği yoktur . Bu özelliği çevreleyen kapsamdan devralırlar .Normal fonksiyonlarda `this` anahtar kelimesi, fonksiyonu çağıran nesneyi temsil eder; bu nesne pencere, belge, düğme veya her neyse olabilir.
Ok fonksiyonlarında `this` anahtar kelimesi her zaman ok fonksiyonunu tanımlayan nesneyi temsil eder.
Not
thisDeğişken değildir.thisbir anahtar kelimedir.- . değerini değiştiremezsiniz
this. - Ok fonksiyonlarında `this`'in herhangi bir bağlaması yoktur .
- Nesne yöntemlerini tanımlamak için pek uygun değiller .
Örnek
<input type="text" name="test" id="ben" onblur="Fonksiyon(this)" />
<script>
function Fonksiyon(Gelen) {
document.write(Gelen.value);
}
</script>
Örnek
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
body,html{
height: 100%;
}
#kutu{
height: 100px;
width: 100px;
background-color: black;
}
</style>
</head>
<body id="vucud" onload="divOlustur()">
</body>
<script>
function rastgeleRenk(){
const renkler = "0123456789abcdef";
let i;
let sonuc = "";
for(i=0;i<6;i++){
sonuc += renkler[Math.floor(Math.random() * 16)];
}
return sonuc;
}
kacTane = prompt("Kaç tane");
function divOlustur(){
for(let i = 0;i<kacTane;i++){
let rengi = rastgeleRenk();
// alert(rengi);
yeniDiv = document.createElement("div");
yeniDiv.classList.add("kutu");
yeniDiv.style.width = "100px";
yeniDiv.style.height = "100px";
yeniDiv.style.backgroundColor = `#${rengi}`;
yeniDiv.style.position = "absolute";
yeniDiv.style.left = Math.floor(Math.random() * 1920)+"px";
yeniDiv.style.top = Math.floor(Math.random() * 900)+"px";
yeniDiv.addEventListener("click",function(){
this.style.display = "none";
})
document.getElementById("vucud").appendChild(yeniDiv);
}
}
</script>
</html>
Kaynak
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
body,html{
height: 100%;
}
#kutu{
height: 100px;
width: 100px;
background-color: black;
}
</style>
</head>
<body id="vucud" onload="divOlustur()">
</body>
<script>
function rastgeleRenk(){
const renkler = "0123456789abcdef";
let i;
let sonuc = "";
for(i=0;i<6;i++){
sonuc += renkler[Math.floor(Math.random() * 16)];
}
return sonuc;
}
kacTane = prompt("Kaç tane");
function divOlustur(){
for(let i = 0;i<kacTane;i++){
let rengi = rastgeleRenk();
// alert(rengi);
yeniDiv = document.createElement("div");
yeniDiv.classList.add("kutu");
yeniDiv.style.width = "100px";
yeniDiv.style.height = "100px";
yeniDiv.style.backgroundColor = `#${rengi}`;
yeniDiv.style.position = "absolute";
yeniDiv.style.left = Math.floor(Math.random() * 1920)+"px";
yeniDiv.style.top = Math.floor(Math.random() * 900)+"px";
yeniDiv.addEventListener("click",function(){
this.style.display = "none";
})
document.getElementById("vucud").appendChild(yeniDiv);
}
}
</script>
</html>
Kaynak
