JavaScript İşlev Çağırma

İçindekiler

Bir JavaScript işlevi içindeki kod, "bir şey" onu çağırdığında yürütülür.

Bir JavaScript İşlevini Çağırmak

İşlev tanımlandığında, işlevin içindeki kod yürütülmez.

Bir işlevin içindeki kod, işlev çağrıldığında yürütülür.

"Çağırmak yerine "bir işlevi çağırmak" teriminin kullanılması yaygındır. bir işlev".

Ayrıca "bir işlevi çağırmak", "bir işlevi başlatmak" veya "bir işlevi başlatmak" gibi ifadeler de yaygındır. "bir işlevi yürüt".

Bu eğitimde çağır'ı kullanacağız çünkü JavaScript işlevi çağrılmadan çağrılabilir.

Bir Fonksiyonu Fonksiyon Olarak Çağırmak

Örnek

function myFunction(a, b) {
  
  return a * b;
}
myFunction(10, 2);           // 
  Will return 20

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>The global function (myFunction) returns the product of the arguments (a ,b):</p>

<p id="demo"></p>

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2); 
</script>

</body>
</html>

Yukarıdaki fonksiyon herhangi bir nesneye ait değildir. Ama JavaScript'te orada her zaman varsayılan bir global nesnedir.

HTML'de varsayılan global nesne HTML sayfasının kendisidir, dolayısıyla yukarıdaki işlev HTML sayfasına "aittir". HTML sayfası.

Bir tarayıcıda sayfa nesnesi tarayıcı penceresidir. Yukarıdaki fonksiyon otomatik olarak bir pencere işlevi haline gelir.

Not

Bu, bir JavaScript işlevini çağırmanın yaygın bir yoludur, ancak pek iyi bir uygulama değildir.
Genel değişkenler, yöntemler veya işlevler, genel nesnede kolayca ad çakışmaları ve hatalar oluşturabilir.

myFunction() ve window.myFunction() aynı işlevdir:

Örnek

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);     // Will also return 20

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>Global functions automatically become window methods. Invoking myFunction() is the same as invoking window.myFunction().</p>

<p id="demo"></p>

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = window.myFunction(10, 2); 
</script>

</body>
</html>

Bu nedir?

JavaScript'te, this anahtar kelimesi bir nesneye karşılık gelir.

Hangi nesne, bunun'un nasıl çağrıldığına (kullanıldığına veya çağrıldığına) bağlıdır.

this anahtar sözcüğü, nasıl kullanıldığına bağlı olarak farklı nesneleri ifade eder:

Bir nesne yönteminde, bu, nesneyi ifade eder.
Tek başına bu, global nesneyi ifade eder.
Bir işlevde, bu, global nesneyi ifade eder.
Bir işlevde, katı modda, bu, tanımsız'dır.
Bir etkinlikte, bu, etkinliği alan öğeyi ifade eder.
call(), apply() ve bind gibi yöntemler(), bunu herhangi bir nesneye yönlendirebilir.

Not

bu bir değişken değil. Bu bir anahtar kelimedir. this'in değerini değiştiremezsiniz.

Ayrıca bakınız:

JavaScript bu Eğitimi

Küresel Nesne

Bir işlev, sahip nesnesi olmadan çağrıldığında this'in değeri küresel nesne haline gelir.

Bir web tarayıcısında genel nesne tarayıcı penceresidir.

Bu örnek, pencere nesnesini bunun değeri olarak döndürür:

Örnek

let x = myFunction();
           // x will be the window object

function myFunction() {
  return this;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>In HTML the value of <b>this</b>, in a global function, is the window object.</p>

<p id="demo"></p>

<script>
let x = myFunction();
function myFunction() {
  return this;
}
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>

Bir işlevin genel işlev olarak çağrılması, this değerinin genel nesne olmasına neden olur.
Pencere nesnesini değişken olarak kullanmak programınızın kolayca çökmesine neden olabilir.

Bir Fonksiyonu Yöntem Olarak Çağırmak

JavaScript'te işlevleri nesne yöntemleri olarak tanımlayabilirsiniz.

Aşağıdaki örnek, iki nesneden oluşan bir nesne (myObject) oluşturur. özellikler (firstName ve lastName) ve yöntem (fullName):

Örnek

const myObject = {
  firstName:"John",
    lastName: "Doe",
    fullName: function () {
    return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // Will return "John Doe"

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>myObject.fullName() will return John Doe:</p>

<p id="demo"></p>

<script>
const myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
document.getElementById("demo").innerHTML = myObject.fullName(); 
</script>

</body>
</html>

fullName yöntemi bir işlevdir. İşlev şuna aittir: nesne. myObject işlevin sahibidir.

bu adı verilen şey, JavaScript kodunun "sahibidir". Bu durumda this'in değeri myObject'tir.

Dene! bunun değerini döndürmek için fullName yöntemini değiştirin:

Örnek

const myObject = {
  firstName:"John",
    lastName: "Doe",
    fullName: function () {
      return this;
    }
}

// This will return [object Object] (the owner object)
myObject.fullName();

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>The value of <b>this</b>, in an object method, is the owner object.</p>

<p id="demo"></p>

<script>
const myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this;
  }
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>

</body>
</html>

Bir işlevi nesne yöntemi olarak çağırmak, bunun değerine neden olur nesnenin kendisi olmak.

Fonksiyon Oluşturucuyla Fonksiyon Çağırma

Bir işlev çağrısından önce new anahtar sözcüğü geliyorsa, bu bir yapıcı çağrısıdır.

Yeni bir işlev oluşturmuşsunuz gibi görünüyor, ancak JavaScript işlevleri aslında yeni bir nesne yarattığınız nesneler:

Örnek

// This is a function constructor:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
  this.lastName  = arg2;
}

// This creates a new object
const myObj = new myFunction("John", "Doe");

// This will return "John"
myObj.firstName;

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>In this example, myFunction is a function constructor:</p>

<p id="demo"></p>

<script>
function myFunction(arg1, arg2) {
  this.firstName = arg1;
  this.lastName  = arg2;
}

const myObj = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = myObj.firstName; 
</script>

</body>
</html>

Bir yapıcı çağrısı yeni bir nesne yaratır. Yeni nesne şunları devralır: özellikleri ve yöntemleri yapıcısından alır.

Yapıcıdaki this anahtar sözcüğünün bir değeri yok.
this'in değeri, işlev çağrıldığında oluşturulan yeni nesne olacaktır.