JavaScript İşlevleri

JavaScript işlevleri, aramanın yürütülmesini beklerken yalnızca bir sürü kodu içermekten daha fazlasını yapabilir. İşlevler zaman içinde yeni tanımlara, uygulama yöntemlerine ve sözdizimlerine yol açan evrim geçirmiştir. Bu gönderi şu ana kadar JavaScript işlevlerinin oynadığı rollerin bir kısmını kapsayacak.

İşlevleri ifade etmenin ve tanımlamanın farklı yollarını bilmek, bir mantığı daha optimal bir şekilde uygulamak JavaScript’te. Ayrıca görüşme sorularına daha kolay cevap verebileceksiniz..

İşlev İfadeleri

Sadece bir işlevi belirttiğinizde fonksiyon anahtar kelime, isteğe bağlı parametreler ve kod gövdesi fonksiyon deklarasyon.

Bu bildirimi bir JavaScript ifadesine koyun (atama veya aritmetik ifadedeki gibi), fonksiyon ifade.

// İşlev bildirimi işlevi function_name () ; // İşlev ifadesi var function_name = function () ; 

Değerlendirme sırasında tüm JavaScript bildirimleri yükseltilmiştir (kapsamda yukarı kaydırılmıştır). Bu nedenle, işlev bildirimi tamamlanmadan önce bir işlev çağrısı yazmak (bildirim yine de taşınacağından).

function_name (); // function call [WORKS] function_name () ; 

Bununla birlikte, işlev ifadeleri, işlevler ifadelerin bir parçası haline geldiğinden ve tek başına bildirimler olmadığından kaldırılmaz.

function_name (); // işlev çağrısı [WON'T WORK] var function_name = function () ; 

Hemen Çağrılan İşlev İfadesi (IIFE)

Bu, kodu derhal yerine getirilen bir işlev ifadesidir (yalnızca bir kez değerlendirildiğinde). Sadece ekleyerek bir tane oluşturabilirsiniz. () (bir işlevi çağırmak için kullanılan sözdizimi) hemen bir işlev ifadesinden sonra. İsimsiz olabilirler (arayacak isim yok).

Aşağıda IIFE'yi oluşturmak için en yaygın kullanılan iki sözdizimi bulunmaktadır:

(function isteğe bağlı_işlev_adı () // body ()); 

ve

(function isteğe bağlı_işlev_ismi () // body) (); 

İşlev bildirimi etrafındaki parantez, onu bir ifadeye dönüştürür ve ekler. () işlevi çağırdıktan sonra. Eklemek istediğin sürece IIFE oluşturmak için başka yollar kullanabilirsin () Bir işlev ifadesinden sonra (aşağıdaki gibi), ancak tercih edilen yöntemler yukarıdaki ikidir..

// IIFEs yaratmanın yollarından bazıları! Function () / *… * / (); + function () / *… * / (); yeni işlev () / *… * /; 

IIFE, yalnızca bir kez çalıştırması gereken kod yazmak, ad aralığı, kapatma, özel değişkenler oluşturmak ve daha fazlası için idealdir. Aşağıda IIFE kullanımına bir örnek.

var page_language = (function () var lang; // Sayfanın dilini döndürecek kod lang;) (); 

Sayfanın dilini alma kodu yalnızca bir kez yürütülür (tercihen sayfa yüklendikten sonra). Sonuç saklanır page_language daha sonra kullanmak için.

Yöntemler

Bir işlev bir nesnenin özelliği olduğunda, buna yöntem denir. Bir işlev aynı zamanda bir nesne olduğu için, başka bir işlevin içindeki bir işlev de bir yöntemdir. Aşağıda nesnenin içindeki bir yönteme örnek verilmiştir.

var calc = add: function (a, b) return a + b, sub: function (a, b) return a-b console.log (calc.add (1,2)); // 3 konsol.log (calc.sub (80,2)); // 78 

eklemek ve alt fonksiyonlar metotlardır kalk nesne.

Şimdi fonksiyon örneği içindeki bir fonksiyon için:

function add (a) return işlevi (b) return a + b; console.log (add (1) (2)); // Çıktı 3 

Döndürülen anonim işlev bir işlev yöntemidir eklemek.

Not: Parametreden beri (birişlevinin eklemek Yukarıdaki örnekte, aşağıdaki fonksiyon çağrısı için kullanılabilir. tımar.

Kurucular

Ne zaman eklersin yeni Bir işlevden önce anahtar kelime ve aramak, bu örnekleri yaratan bir kurucu olur. Aşağıda, yapıcıların örneklerini oluşturmak için kullanıldığı bir örnek verilmiştir. Meyve ve her birine değerler eklenir Meyveözellikleri.

işlevi Fruit () var adı, aile; // Bilimsel ad ve aile this.getName = function () return name;; this.setName = function (value) name = değer; this.getFamily = function () return family;; this.setFamily = function (value) family = value;  var elma = yeni Meyve (); apple.setName ("Malus domestica"); apple.setFamily ( "Rosaceae"); var portakal = yeni Meyve (); orange.setName ("Citrus à ??  ?? âA ?? a ?? sinensis "); orange.setFamily (" Rutaceae "); console.log (orange.getName ()); //" Citrus à ??  ?? âA ?? a ?? sinensis "console.log (apple.getName ()); //" Malus domestica "console.log (orange.getFamily ()); //" Rutaceae " 

Ok İşlevleri (ES6 Standardı) [Sadece Firefox'ta]

ES6 Standard'tan yeni bir fonksiyon tanımı, fonksiyon ifadesi için daha kısa bir sözdizimi sağlar. Sözdizimi

() => / * vücut * / 

Bu örnek fonksiyon:

var sing = function () console.log ('şarkı…'); 

aynıdır:

var sing = () => console.log ('şarkı söylüyor ...'); 

Ok işlevleri anonimdir ve kendine ait değildir. bu değer, bu içinde aynı olacak bu ekli kodda. Ayrıca, bir kurucu ile değiştiremezsiniz. yeni anahtar kelime.

İstediğiniz zaman için kullanışlıdırlar bu Bir fonksiyonun içinde, dış ile aynı olması ve kısa sözdizimi, fonksiyonun özünde yazma fonksiyonunun kodunu oluşturur (aşağıdaki gibi).

setInterval (function () console.log ('message'), 1000); 

içine

setInterval (() => console.log ('message'), 1000); 

Jeneratör İşlevleri (ES6 Standardı) [Sadece Firefox'ta]

ES6 Standard'ın bir diğer yeni fonksiyon tanımı, Jeneratör Fonksiyonudur. Jeneratör işlevleri, yürütmeyi durdurabilir ve devam ettirebilir. Sözdizimi:

function * function_name ()  

veya

function * function_name ()  

Jeneratör işlevleri yineleyiciler oluşturur. Yineleyici Sonraki yöntem daha sonra jeneratör işlevinin içindeki kodu çalıştırmak için kullanılana kadar kullanılır. Yol ver anahtar kelimeye ulaşıldı. Bundan sonra, tarafından belirtilen yinelenen değer Yol ver anahtar kelime jeneratör işlevi tarafından döndürülür ve yürütme durdurulur.

Jeneratör işlevi, Sonraki yöntem bir sonrakine kadar çağrılır. Yol ver anahtar kelimeye ulaşıldı. Bir kez hepsi Yol ver İfadeler yürütülür, elde edilen değer döner Tanımsız.

Aşağıda basit bir örnek:

function * generator_func (count) için (var i = 0; i 
İşte başka bir örnek:
 
function * randomIncrement (i) verim i + 3; verim + 5; verim + 10; verim +6;  var itr = randomIncrement (4); console.log (. itr.next () değeri); // 7 console.log (itr.next (). Value); // 9 console.log (itr.next (). Value); // 14 
 
Bir de var Yol ver* değeri başka bir jeneratör fonksiyonuna ileten ifade
 
fonksiyon * meyveler (meyve) verim * sebzeler (meyve); verim "Üzüm";  function * veggies (fruit) verim meyvesi + "ve Ispanak"; meyve + "ve Brokoli" verimi; meyve verimi + "ve Salatalık";  var itr = meyveler ("Elma"); console.log (. itr.next () değeri); // "Elma ve Ispanak" console.log (itr.next (). Value); // "Elma ve Brokoli" console.log (itr.next (). Value); // "Elma ve Salatalık" console.log (itr.next (). Value); // "Grapes" console.log (itr.next (). Value); //Tanımsız 
 
Jeneratör işlevleri, bir dizi içinde döngüde olduğu gibi gitmek yerine, kodu duraklatmak suretiyle tercih ettiğiniz noktada birer birer ilerlemek istiyorsanız kullanışlıdır..
 
Sonuç
 
Farklı konularda derinlemesine ilerleyen referanslara ve makalelere bağlantılar bulabileceğiniz aşağıdaki referansların bir listesini ekledim.. Her iki ES6 standart işlevi şu anda yalnızca Firefox'ta çalışacaktır.
 
Referanslar
 
ECMAScript Dili: İşlevler ve Sınıflar
 
Hemen Çağrılan İşlev İfadesi (IIFE)
 
ES6 Jeneratörlerinin Temelleri
 
Ok İşlevleri
 
fonksiyon - Mozilla Geliştirici Ağı