Pertanyaan var functionName = function () {} vs function functionName () {}


Saya baru-baru ini mulai mempertahankan kode JavaScript orang lain. Saya memperbaiki bug, menambahkan fitur dan juga mencoba merapikan kode dan membuatnya lebih konsisten.

Pengembang sebelumnya menggunakan dua cara mendeklarasikan fungsi dan saya tidak dapat mengetahui apakah ada alasan di baliknya atau tidak.

Dua cara tersebut adalah:

var functionOne = function() {
    // Some code
};
function functionTwo() {
    // Some code
}

Apa alasan untuk menggunakan dua metode berbeda ini dan apa pro dan kontranya masing-masing? Adakah yang bisa dilakukan dengan satu metode yang tidak bisa dilakukan dengan metode lain?


6052
2017-12-03 11:31


asal


Jawaban:


Perbedaannya adalah itu functionOne adalah ekspresi fungsi dan hanya ditentukan ketika garis tersebut tercapai, sedangkan functionTwo adalah deklarasi fungsi dan didefinisikan segera setelah fungsi atau skrip di sekitarnya dieksekusi (karena mengangkat).

Misalnya, ekspresi fungsi:

// TypeError: functionOne is not a function
functionOne();

var functionOne = function() {
  console.log("Hello!");
};

Dan, deklarasi fungsi:

// Outputs: "Hello!"
functionTwo();

function functionTwo() {
  console.log("Hello!");
}

Ini juga berarti Anda tidak dapat mendefinisikan fungsi secara kondisional menggunakan deklarasi fungsi:

if (test) {
   // Error or misbehavior
   function functionThree() { doSomething(); }
}

Di atas sebenarnya mendefinisikan functionThree terlepas dari testnilai - kecuali use strict berlaku, dalam hal ini hanya menimbulkan kesalahan.


4489
2017-12-03 11:37



Pertama saya ingin mengoreksi Greg: function abc(){} juga dicakup - nama abc didefinisikan dalam ruang lingkup di mana definisi ini ditemui. Contoh:

function xyz(){
  function abc(){};
  // abc is defined here...
}
// ...but not here

Kedua, dimungkinkan untuk menggabungkan kedua gaya:

var xyz = function abc(){};

xyz akan ditentukan seperti biasa, abc tidak terdefinisi di semua browser, tetapi Internet Explorer - tidak bergantung padanya sedang didefinisikan. Tapi itu akan didefinisikan di dalam tubuhnya:

var xyz = function abc(){
  // xyz is visible here
  // abc is visible here
}
// xyz is visible here
// abc is undefined here

Jika Anda ingin fungsi alias di semua browser, gunakan deklarasi semacam ini:

function abc(){};
var xyz = abc;

Dalam hal ini, keduanya xyz dan abc adalah alias dari objek yang sama:

console.log(xyz === abc); // prints "true"

Salah satu alasan kuat untuk menggunakan gaya gabungan adalah atribut "nama" dari objek fungsi (tidak didukung oleh Internet Explorer). Pada dasarnya ketika Anda mendefinisikan fungsi seperti

function abc(){};
console.log(abc.name); // prints "abc"

namanya secara otomatis ditetapkan. Tetapi ketika Anda mendefinisikannya seperti

var abc = function(){};
console.log(abc.name); // prints ""

namanya kosong - kami membuat fungsi anonim dan menetapkannya ke beberapa variabel.

Alasan bagus lainnya untuk menggunakan gaya gabungan adalah menggunakan nama internal singkat untuk merujuk ke dirinya sendiri, sambil memberikan nama panjang yang tidak bertentangan untuk pengguna eksternal:

// Assume really.long.external.scoped is {}
really.long.external.scoped.name = function shortcut(n){
  // Let it call itself recursively:
  shortcut(n - 1);
  // ...
  // Let it pass itself as a callback:
  someFunction(shortcut);
  // ...
}

Dalam contoh di atas, kita dapat melakukan hal yang sama dengan nama eksternal, tetapi itu akan terlalu berat (dan lebih lambat).

(Cara lain untuk menyebut dirinya adalah menggunakan arguments.callee, yang masih relatif panjang, dan tidak didukung dalam mode ketat.)

Jauh ke dalam, JavaScript memperlakukan kedua pernyataan secara berbeda. Ini adalah deklarasi fungsi:

function abc(){}

abc di sini didefinisikan di mana-mana dalam lingkup saat ini:

// We can call it here
abc(); // Works

// Yet, it is defined down there.
function abc(){}

// We can call it again
abc(); // Works

Juga, mengangkat melalui return pernyataan:

// We can call it here
abc(); // Works
return;
function abc(){}

Ini adalah ekspresi fungsi:

var xyz = function(){};

xyz di sini ditentukan dari titik penugasan:

// We can't call it here
xyz(); // UNDEFINED!!!

// Now it is defined
xyz = function(){}

// We can call it here
xyz(); // works

Deklarasi fungsi vs ekspresi fungsi adalah alasan sebenarnya mengapa ada perbedaan yang ditunjukkan oleh Greg.

Fakta menarik:

var xyz = function abc(){};
console.log(xyz.name); // Prints "abc"

Secara pribadi, saya lebih memilih deklarasi "ekspresi fungsi" karena cara ini saya dapat mengontrol visibilitas. Ketika saya mendefinisikan fungsi seperti

var abc = function(){};

Saya tahu bahwa saya mendefinisikan fungsi tersebut secara lokal. Ketika saya mendefinisikan fungsi seperti

abc = function(){};

Saya tahu bahwa saya mendefinisikannya secara global dengan ketentuan bahwa saya tidak mendefinisikannya abc di mana saja di rantai lingkup. Gaya definisi ini tahan bahkan ketika digunakan di dalam eval(). Sementara definisinya

function abc(){};

tergantung pada konteks dan mungkin meninggalkan Anda menebak di mana ia sebenarnya didefinisikan, terutama dalam kasus eval() - jawabannya adalah: Itu tergantung pada browser.


1804
2017-12-03 17:43



Berikut rundown pada formulir standar yang membuat fungsi: (Awalnya ditulis untuk pertanyaan lain, tetapi diadaptasi setelah dipindahkan ke pertanyaan kanonik.)

Ketentuan:

Daftar cepat:

  • Deklarasi Fungsi

  • "Anonim" function Ekspresi (yang meskipun istilahnya, terkadang membuat fungsi dengan nama)

  • Bernama function Ekspresi

  • Accessor Function Initializer (ES5 +)

  • Ekspresi Fungsi Panah (ES2015 +) (yang, seperti ekspresi fungsi anonim, tidak melibatkan nama eksplisit, namun dapat membuat fungsi dengan nama)

  • Deklarasi Metode di Object Initializer (ES2015 +)

  • Deklarasi Konstruktor dan Metode di class (ES2015 +)

Deklarasi Fungsi

Bentuk pertama adalah a deklarasi fungsi, yang terlihat seperti ini:

function x() {
    console.log('x');
}

Deklarasi fungsi adalah a pernyataan; itu bukan pernyataan atau ekspresi. Dengan demikian, Anda tidak mengikutinya dengan ; (meskipun melakukannya tidak berbahaya).

Deklarasi fungsi diproses ketika eksekusi memasuki konteks di mana ia muncul, sebelum setiap kode langkah demi langkah dijalankan. Fungsi yang dibuat diberi nama yang tepat (x dalam contoh di atas), dan nama itu diletakkan dalam ruang lingkup di mana deklarasi itu muncul.

Karena ini diproses sebelum kode langkah demi langkah dalam konteks yang sama, Anda dapat melakukan hal-hal seperti ini:

x(); // Works even though it's above the declaration
function x() {
    console.log('x');
}

Hingga ES2015, spesifikasi tidak mencakup apa yang harus dilakukan oleh mesin JavaScript jika Anda menempatkan deklarasi fungsi di dalam struktur kontrol seperti try, if, switch, while, dll., seperti ini:

if (someCondition) {
    function foo() {    // <===== HERE THERE
    }                   // <===== BE DRAGONS
}

Dan karena mereka sudah diproses sebelum kode langkah demi langkah dijalankan, sangat sulit untuk mengetahui apa yang harus dilakukan ketika mereka berada dalam struktur kontrol.

Meskipun melakukan ini bukan ditentukan sampai ES2015, itu adalah sebuah ekstensi yang diizinkan untuk mendukung deklarasi fungsi dalam blok. Sayangnya (dan tidak dapat dihindari), mesin yang berbeda melakukan hal yang berbeda.

Pada ES2015, spesifikasi mengatakan apa yang harus dilakukan. Faktanya, ini memberikan tiga hal terpisah untuk dilakukan:

  1. Jika dalam mode longgar tidak di browser web, mesin JavaScript seharusnya melakukan satu hal
  2. Jika dalam mode bebas di browser web, mesin JavaScript seharusnya melakukan hal lain
  3. Jika dalam ketat mode (browser atau tidak), mesin JavaScript seharusnya melakukan hal lain lagi

Aturan untuk mode longgar sangat sulit, tetapi di ketat mode, deklarasi fungsi dalam blok mudah: Mereka lokal ke blok (mereka punya lingkup blok, yang juga baru di ES2015), dan mereka dikibarkan di bagian atas blok. Begitu:

"use strict";
if (someCondition) {
    foo();               // Works just fine
    function foo() {
    }
}
console.log(typeof foo); // "undefined" (`foo` is not in scope here
                         // because it's not in the same block)

"Anonim" function Ekspresi

Bentuk umum kedua disebut an ekspresi fungsi anonim:

var y = function () {
    console.log('y');
};

Seperti semua ekspresi, itu dievaluasi ketika mencapai dalam langkah demi langkah pelaksanaan kode.

Di ES5, fungsi yang dibuat ini tidak memiliki nama (itu anonim). Di ES2015, fungsi diberikan nama jika memungkinkan dengan menyimpulkannya dari konteks. Dalam contoh di atas, namanya adalah y. Sesuatu yang serupa dilakukan ketika fungsi adalah nilai dari initializer properti. (Untuk detail tentang kapan ini terjadi dan aturannya, cari SetFunctionName dalam spesifikasi- itu muncul seluruh tempat.)

Bernama function Ekspresi

Bentuk ketiga adalah a ekspresi fungsi bernama ("NFE"):

var z = function w() {
    console.log('zw')
};

Fungsi yang dibuat ini memiliki nama yang tepat (w pada kasus ini). Seperti semua ekspresi, ini dievaluasi ketika tercapai dalam eksekusi kode langkah demi langkah. Nama fungsi ini tidak ditambahkan ke ruang lingkup di mana ekspresi muncul; nama aku s dalam ruang lingkup dalam fungsi itu sendiri:

var z = function w() {
    console.log(typeof w); // "function"
};
console.log(typeof w);     // "undefined"

Perhatikan bahwa NFE sering menjadi sumber bug untuk implementasi JavaScript. IE8 dan sebelumnya, misalnya, menangani NFE sepenuhnya salah, menciptakan dua fungsi berbeda pada dua waktu yang berbeda. Safari versi awal juga memiliki masalah. Kabar baiknya adalah versi peramban saat ini (IE9 dan yang lebih baru, Safari saat ini) tidak memiliki masalah itu lagi. (Tapi pada tulisan ini, sayangnya, IE8 masih digunakan secara luas, dan dengan demikian menggunakan NFE dengan kode untuk web pada umumnya masih bermasalah.)

Accessor Function Initializer (ES5 +)

Terkadang fungsi dapat menyelinap di sebagian besar tanpa disadari; itu yang terjadi fungsi pengakses. Inilah contohnya:

var obj = {
    value: 0,
    get f() {
        return this.value;
    },
    set f(v) {
        this.value = v;
    }
};
console.log(obj.f);         // 0
console.log(typeof obj.f);  // "number"

Perhatikan bahwa ketika saya menggunakan fungsi itu, saya tidak menggunakannya ()! Itu karena ini sebuah fungsi pengakses untuk sebuah properti. Kami mendapatkan dan mengatur properti dengan cara normal, tetapi di belakang layar, fungsi ini disebut.

Anda juga dapat membuat fungsi accessor dengan Object.defineProperty, Object.defineProperties, dan argumen kedua yang kurang dikenal Object.create.

Ekspresi Fungsi Panah (ES2015 +)

ES2015 membawa kita fungsi panah. Inilah satu contoh:

var a = [1, 2, 3];
var b = a.map(n => n * 2);
console.log(b.join(", ")); // 2, 4, 6

Lihat itu n => n * 2 hal yang bersembunyi di map() panggilan? Itu fungsi.

Beberapa hal tentang fungsi panah:

  1. Mereka tidak punya milik sendiri this. Sebaliknya, mereka tutup itu this konteks di mana mereka didefinisikan. (Mereka juga tutup arguments dan, jika relevan, super.) Ini berarti bahwa this di dalamnya sama dengan this di mana mereka dibuat, dan tidak dapat diubah.

  2. Seperti yang Anda ketahui dengan yang di atas, Anda tidak menggunakan kata kunci function; sebagai gantinya, Anda gunakan =>.

Itu n => n * 2 Contoh di atas adalah salah satu bentuknya. Jika Anda memiliki beberapa argumen untuk meneruskan fungsi, Anda menggunakan parens:

var a = [1, 2, 3];
var b = a.map((n, i) => n * i);
console.log(b.join(", ")); // 0, 2, 6

(Ingat bahwa Array#map melewati entri sebagai argumen pertama, dan indeks sebagai yang kedua.)

Dalam kedua kasus, tubuh fungsi hanyalah sebuah ekspresi; nilai kembalian fungsi akan secara otomatis menjadi hasil dari ekspresi tersebut (Anda tidak menggunakan eksplisit return).

Jika Anda melakukan lebih dari sekadar satu ekspresi, gunakan {} dan eksplisit return (jika Anda perlu mengembalikan nilai), seperti biasa:

var a = [
  {first: "Joe", last: "Bloggs"},
  {first: "Albert", last: "Bloggs"},
  {first: "Mary", last: "Albright"}
];
a = a.sort((a, b) => {
  var rv = a.last.localeCompare(b.last);
  if (rv === 0) {
    rv = a.first.localeCompare(b.first);
  }
  return rv;
});
console.log(JSON.stringify(a));

Versi tanpa { ... } disebut fungsi panah dengan tubuh ekspresi atau tubuh ringkas. (Juga sebuah ringkas fungsi panah.) Yang satu dengan { ... } mendefinisikan tubuh adalah fungsi panah dengan tubuh fungsi. (Juga sebuah verbose fungsi panah.)

Deklarasi Metode di Object Initializer (ES2015 +)

ES2015 memungkinkan bentuk pendek mendeklarasikan properti yang mereferensi fungsi; terlihat seperti ini:

var o = {
    foo() {
    }
};

yang setara di ES5 dan sebelumnya adalah:

var o = {
    foo: function foo() {
    }
};

Deklarasi Konstruktor dan Metode di class (ES2015 +)

ES2015 membawa kita class sintaksis, termasuk konstruktor dan metode yang dinyatakan:

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    getFullName() {
        return this.firstName + " " + this.lastName;
    }
}

Ada dua deklarasi fungsi di atas: Satu untuk konstruktor, yang mendapat nama Person, dan satu untuk getFullName, yang merupakan fungsi yang ditugaskan untuk Person.prototype.


544
2018-03-04 13:35



Berbicara tentang konteks global, keduanya, the var pernyataan dan a FunctionDeclaration pada akhirnya akan menciptakan tidak bisa dihapus properti pada objek global, tetapi nilai keduanya dapat ditimpa.

Perbedaan halus antara dua cara adalah ketika Instansiasi Variabel proses berjalan (sebelum eksekusi kode aktual) semua pengidentifikasi dinyatakan dengan var akan diinisialisasi dengan undefined, dan yang digunakan oleh FunctionDeclarationakan tersedia sejak saat itu, misalnya:

 alert(typeof foo); // 'function', it's already available
 alert(typeof bar); // 'undefined'
 function foo () {}
 var bar = function () {};
 alert(typeof bar); // 'function'

Penugasan dari bar  FunctionExpression berlangsung hingga waktu proses.

Properti global yang dibuat oleh a FunctionDeclaration dapat ditimpa tanpa masalah sama seperti nilai variabel, misalnya:

 function test () {}
 test = null;

Perbedaan lain yang jelas antara dua contoh Anda adalah fungsi pertama tidak memiliki nama, tetapi yang kedua memiliki itu, yang dapat benar-benar berguna ketika melakukan debugging (yaitu memeriksa panggilan stack).

Tentang contoh pertama yang diedit (foo = function() { alert('hello!'); };), ini adalah tugas yang tidak dideklarasikan, saya akan sangat mendorong Anda untuk selalu menggunakan var kata kunci.

Dengan tugas, tanpa var pernyataan, jika identifier yang direferensikan tidak ditemukan dalam rantai lingkup, itu akan menjadi a bisa dihapus milik objek global.

Juga, tugas yang tidak diumumkan melempar a ReferenceError pada ECMAScript 5 di bawah Mode Ketat.

A harus membaca:

Catatan: Jawaban ini telah digabungkan dari pertanyaan lain, di mana keraguan utama dan kesalahpahaman dari OP adalah bahwa pengidentifikasi menyatakan dengan FunctionDeclaration, tidak dapat ditimpa yang tidak terjadi.


133
2017-08-08 19:32



Kedua cuplikan kode yang Anda posting di sana akan, untuk hampir semua tujuan, berperilaku dengan cara yang sama.

Namun, perbedaan dalam perilaku adalah bahwa dengan varian pertama (var functionOne = function() {}), fungsi itu hanya bisa dipanggil setelah titik itu di kode.

Dengan varian kedua (function functionTwo()), fungsi ini tersedia untuk kode yang berjalan di atas di mana fungsi tersebut dideklarasikan.

Ini karena dengan varian pertama, fungsi ditugaskan ke variabel foo pada waktu berjalan. Di yang kedua, fungsi ditugaskan ke identifier itu, foo, pada waktu parse.

Informasi teknis lebih lanjut

JavaScript memiliki tiga cara untuk mendefinisikan fungsi.

  1. Cuplikan pertama Anda menunjukkan ekspresi fungsi. Ini melibatkan penggunaan operator "berfungsi" untuk membuat fungsi - hasil dari operator itu dapat disimpan dalam variabel atau properti objek. Ekspresi fungsi sangat kuat seperti itu. Ekspresi fungsi sering disebut "fungsi anonim", karena tidak harus memiliki nama,
  2. Contoh kedua Anda adalah a deklarasi fungsi. Ini menggunakan Pernyataan "fungsi" untuk membuat suatu fungsi. Fungsi ini tersedia saat parse dan dapat dipanggil di mana saja dalam lingkup itu. Anda masih bisa menyimpannya dalam variabel atau properti objek nanti.
  3. Cara ketiga mendefinisikan fungsi adalah Konstruktor "Function ()", yang tidak ditampilkan di posting asli Anda. Tidak disarankan untuk menggunakan ini karena cara kerjanya sama eval(), yang memiliki masalah.

111
2018-04-20 04:54



Penjelasan yang lebih baik untuk Jawaban Greg

functionTwo();
function functionTwo() {
}

Kenapa tidak ada kesalahan? Kami selalu diajarkan bahwa ekspresi dieksekusi dari atas ke bawah (??)

Karena:

Deklarasi fungsi dan deklarasi variabel selalu dipindahkan (hoisted) Tidak terlihat ke bagian atas ruang lingkup mereka yang mengandung oleh juru bahasa JavaScript. Parameter fungsi dan nama yang ditentukan bahasa jelas sudah ada. ben cherry

Ini berarti kode seperti ini:

functionOne();                  ---------------      var functionOne;
                                | is actually |      functionOne();
var functionOne = function(){   | interpreted |-->
};                              |    like     |      functionOne = function(){
                                ---------------      };

Perhatikan bahwa porsi tugas dari deklarasi tidak dikibarkan. Hanya nama yang dikibarkan.

Tetapi dalam kasus dengan deklarasi fungsi, seluruh fungsi tubuh akan dikibarkan juga:

functionTwo();              ---------------      function functionTwo() {
                            | is actually |      };
function functionTwo() {    | interpreted |-->
}                           |    like     |      functionTwo();
                            ---------------

91
2017-08-09 02:45



Komentator lainnya telah membahas perbedaan semantik dari dua varian di atas. Saya ingin mencatat perbedaan gaya: Hanya variasi "tugas" yang dapat mengatur properti dari objek lain.

Saya sering membuat modul JavaScript dengan pola seperti ini:

(function(){
    var exports = {};

    function privateUtil() {
            ...
    }

    exports.publicUtil = function() {
            ...
    };

    return exports;
})();

Dengan pola ini, semua fungsi publik Anda akan menggunakan tugas, sementara fungsi pribadi Anda menggunakan deklarasi.

(Perhatikan juga bahwa tugas harus membutuhkan titik koma setelah pernyataan, sementara deklarasi melarangnya.)


83
2018-03-03 19:19



Ilustrasi tentang kapan harus memilih metode pertama untuk yang kedua adalah ketika Anda perlu menghindari untuk mengesampingkan definisi sebelumnya dari suatu fungsi.

Dengan

if (condition){
    function myfunction(){
        // Some code
    }
}

, definisi ini myfunction akan mengesampingkan definisi sebelumnya, karena itu akan dilakukan pada parse-time.

Sementara

if (condition){
    var myfunction = function (){
        // Some code
    }
}

Apakah pekerjaan yang benar mendefinisikan myfunction hanya bila condition bertemu.


68
2018-03-29 13:26



Alasan penting adalah menambahkan satu dan hanya satu variabel sebagai "Root" dari namespace Anda ...

var MyNamespace = {}
MyNamespace.foo= function() {

}

atau

var MyNamespace = {
  foo: function() {
  },
  ...
}

Ada banyak teknik untuk pengaturan nama. Ini menjadi lebih penting dengan banyaknya modul JavaScript yang tersedia.

Juga lihat Bagaimana cara mendeklarasikan namespace di JavaScript?


55
2017-08-08 19:44



Mengangkat  adalah tindakan penerjemah JavaScript untuk memindahkan semua deklarasi variabel dan fungsi ke bagian atas cakupan saat ini. 

Namun, hanya deklarasi sebenarnya yang dikibarkan. dengan meninggalkan tugas di mana mereka berada.

  • Variabel / Fungsi yang dideklarasikan di dalam halaman adalah global dapat mengakses di mana saja di halaman itu.
  • Variabel / Fungsi yang dideklarasikan di dalam fungsi memiliki lingkup lokal. berarti mereka tersedia / diakses di dalam badan fungsi (ruang lingkup), mereka tidak tersedia di luar badan fungsi.

Variabel

Javascript disebut bahasa yang diketik secara longgar. Yang berarti variabel Javascript dapat menyimpan nilai apa pun Tipe data. Javascript secara otomatis menangani perubahan tipe-variabel berdasarkan nilai / literal yang disediakan selama waktu proses.

global_Page = 10;                                               var global_Page;      « undefined
    « Integer literal, Number Type.   -------------------       global_Page = 10;     « Number         
global_Page = 'Yash';                 |   Interpreted   |       global_Page = 'Yash'; « String
    « String literal, String Type.    «       AS        «       global_Page = true;   « Boolean 
var global_Page = true;               |                 |       global_Page = function (){          « function
    « Boolean Type                    -------------------                 var local_functionblock;  « undefined
global_Page = function (){                                                local_functionblock = 777;« Number
    var local_functionblock = 777;                              };  
    // Assigning function as a data.
};  

Fungsi

function Identifier_opt ( FormalParameterList_opt ) { 
      FunctionBody | sequence of statements

      « return;  Default undefined
      « return 'some data';
}
  • fungsi-fungsi yang dideklarasikan di dalam halaman dikosongkan ke atas halaman yang memiliki akses global.
  • fungsi yang dideklarasikan di dalam blok fungsi dikibarkan ke atas blok.
  • Nilai default dari fungsi adalah 'tidak terdefinisi', Variabel nilai default deklarasi juga 'tidak terdefinisi'

    Scope with respect to function-block global. 
    Scope with respect to page undefined | not available.
    

Deklarasi Fungsi

function globalAccess() {                                  function globalAccess() {      
}                                  -------------------     }
globalAccess();                    |                 |     function globalAccess() { « Re-Defined / overridden.
localAccess();                     «   Hoisted  As   «         function localAccess() {
function globalAccess() {          |                 |         }
     localAccess();                -------------------         localAccess(); « function accessed with in globalAccess() only.
     function localAccess() {                              }
     }                                                     globalAccess();
}                                                          localAccess(); « ReferenceError as the function is not defined

Ekspresi Fungsi

        10;                 « literal
       (10);                « Expression                (10).toString() -> '10'
var a;                      
    a = 10;                 « Expression var              a.toString()  -> '10'
(function invoke() {        « Expression Function
 console.log('Self Invoking');                      (function () {
});                                                               }) () -> 'Self Invoking'

var f; 
    f = function (){        « Expression var Function
    console.log('var Function');                                   f ()  -> 'var Function'
    };

Fungsi ditugaskan ke variabel Contoh:

(function selfExecuting(){
    console.log('IIFE - Immediately-Invoked Function Expression');
}());

var anonymous = function (){
    console.log('anonymous function Expression');
};

var namedExpression = function for_InternalUSE(fact){
    if(fact === 1){
        return 1;
    }

    var localExpression = function(){
        console.log('Local to the parent Function Scope');
    };
    globalExpression = function(){ 
        console.log('creates a new global variable, then assigned this function.');
    };

    //return; //undefined.
    return fact * for_InternalUSE( fact - 1);   
};

namedExpression();
globalExpression();

javascript diartikan sebagai

var anonymous;
var namedExpression;
var globalExpression;

anonymous = function (){
    console.log('anonymous function Expression');
};

namedExpression = function for_InternalUSE(fact){
    var localExpression;

    if(fact === 1){
        return 1;
    }
    localExpression = function(){
        console.log('Local to the parent Function Scope');
    };
    globalExpression = function(){ 
        console.log('creates a new global variable, then assigned this function.');
    };

    return fact * for_InternalUSE( fact - 1);    // DEFAULT UNDEFINED.
};

namedExpression(10);
globalExpression();

Anda dapat memeriksa deklarasi fungsi, uji ekspresi melalui penggunaan browser yang berbeda jsperf Test Runner


Kelas Fungsi Pembuat ES5: Benda fungsi dibuat menggunakan Function.prototype.bind

Memperlakukan JavaScript berfungsi sebagai objek kelas satu, jadi sebagai objek, Anda bisa menetapkan properti ke suatu fungsi.

function Shape(id) { // Function Declaration
    this.id = id;
};
    // Adding a prototyped method to a function.
    Shape.prototype.getID = function () {
        return this.id;
    };
    Shape.prototype.setID = function ( id ) {
        this.id = id;
    };

var expFn = Shape; // Function Expression

var funObj = new Shape( ); // Function Object
funObj.hasOwnProperty('prototype'); // false
funObj.setID( 10 );
console.log( funObj.getID() ); // 10

ES6 diperkenalkan Fungsi panah: Sebuah ekspresi fungsi panah memiliki sintaks yang lebih pendek, mereka paling cocok untuk fungsi non-metode, dan mereka tidak dapat digunakan sebagai konstruktor.

ArrowFunction : ArrowParameters => ConciseBody.

const fn = (item) => { return item & 1 ? 'Odd' : 'Even'; };
console.log( fn(2) ); // Even
console.log( fn(3) ); // Odd

47
2018-01-25 14:46



Saya menambahkan jawaban saya sendiri hanya karena orang lain telah menutupi bagian pengangkatan secara menyeluruh.

Saya bertanya-tanya tentang cara mana yang lebih baik untuk waktu yang lama sekarang, dan terima kasih kepada http://jsperf.com sekarang saya tahu :)

enter image description here

Deklarasi fungsi lebih cepat, dan itulah yang benar-benar penting dalam web dev, kan? ;)


33
2018-05-01 15:06