Pelbagai kaedah definisi fungsi biasa dalam petua JavaScript_javascript

Artikel ini memperincikan pelbagai kaedah definisi fungsi biasa dalam JavaScript dan berkongsi dengan anda untuk rujukan anda. Analisis khusus adalah seperti berikut:

Pertama, mari kita lihat empat takrifan fungsi yang paling biasa dalam JavaScript:

Fungsi yang ditakrifkan menggunakan pembina Fungsi, kodnya adalah seperti berikut:

var multiply = new Function('x', 'y', 'return x * y;');

Pengisytiharan fungsi, kaedah ini juga yang paling biasa:

function multiply(x, y) {
  return x * y;
}

Ungkapan fungsi, diisytiharkan sebagai fungsi tanpa nama dan kemudian ditugaskan kepada pembolehubah, cara yang sangat biasa:

var multiply = function(x, y) {
  return x * y;
}

Ungkapan fungsi, tetapi fungsi itu diisytiharkan sebagai fungsi bernama dan kemudian ditetapkan kepada pembolehubah Ia kelihatan sama seperti kaedah sebelumnya:

var multiply = function multi(x, y) {
  return x * y;
}

Mula-mula, mari kita bandingkan hubungan langsung antara nama fungsi dan pembolehubah fungsi yang diberikan fungsi itu benar-benar mengelirukan... Untuk lebih intuitif, mari kita bincangkan mengenainya dari Contoh 4 tadi antara pembolehubah fungsi darab dan nama fungsi berbilang :

Nama fungsi tidak boleh diubah suai, sebaliknya, pembolehubah fungsi boleh ditetapkan semula. Seharusnya mudah untuk memahami bahawa pembolehubah fungsi boleh ditetapkan semula Pembolehubah darab yang baru kami takrifkan dalam contoh keempat kami tidak menyenangkan mata, jadi ia boleh ditetapkan semula sebagai:

multiply = function(x, y) {
  return x + y;
}

Segera berubah daripada pendaraban kepada penambahan. Tetapi adalah mustahil untuk menukar multi fungsi Definisi fungsi sudah ada selagi rujukan kepadanya, ia tidak akan berubah teruskan membaca. Anda seharusnya dapat memahaminya secara beransur-ansur.

Nama fungsi tidak boleh digunakan di luar fungsi Ia hanya boleh dilihat di dalam badan fungsi. Contoh yang sangat mudah:

var foo = function bar() {
  alert('hello');
}
foo(); // 提示“hello”字符串
bar(); // 执行报错，bar未定义

Jelas sekali, bar di sini sememangnya nama fungsi, tetapi ia tidak boleh dipanggil secara luaran. Pada masa ini, pasti ada kanak-kanak bertanya mengapa contoh ini masih kelihatan baik seperti Contoh 4. Mengapa tidak menggunakan kaedah Contoh 2? Soalan yang bagus, biar saya pecahkan perlahan-lahan.

Bersambung dengan Contoh 4, kita dapat melihat bahawa nama fungsi (berbilang) dan pembolehubah fungsi (darab) adalah tidak sama Malah, mereka tidak mempunyai hubungan langsung, jadi tidak perlu mengekalkannya. Bercakap mengenainya, saya rasa empat contoh di atas boleh dikurangkan kepada tiga Contoh 2 dan 4 pada dasarnya adalah sama. Apa, tidak percaya? Hee hee, saya kena teruskan kebenaran~teruskan membaca~~

Kami mendapati bahawa dibandingkan dengan Contoh 4, Contoh 2 hanya kekurangan pembolehubah fungsi var, dan dibandingkan dengan Contoh 4, Contoh 3 hanya kekurangan nama fungsi Dari perspektif fenomena, Contoh 2 dan Contoh 4 Intipatinya sama, bukti kuku besi adalah seperti berikut:

function foo() {}
alert(foo); // 提示包含“foo”的函数名
var bar = foo;
alert(bar); // 提示依然只包含“foo”的函数名，和bar半毛钱关系都没有

Adakah ianya memang bukti yang tidak boleh disangkal? Bolehkah kod yang serupa dengan Contoh 2 di atas digabungkan dan ditulis dengan cara yang sama seperti Contoh 4? Betul, ini yang saya katakan Intipati kedua-duanya sepatutnya sama. Cuma apabila menentukan fungsi dalam kes penggunaan 2, enjin JS melakukan beberapa perkara untuk kita, seperti mengisytiharkan fungsi yang dinamakan multiply. secara senyap-senyap mentakrifkan fungsi yang dipanggil darab, dan kemudian berikannya kepada pembolehubah ini saya keliru~ Sejujurnya, saya juga keliru~ ~Ringkasnya, apabila kita memanggil, kita sebenarnya menggunakan pembolehubah fungsi untuk memanggil, dan nama fungsi tidak boleh dipanggil secara luaran, jadi saya mempunyai inferens di atas.

Tetapi terdapat perbezaan kecil yang perlu disebutkan di sini Perbezaan antara fungsi yang ditakrifkan dalam mod pengisytiharan fungsi dan pengisytiharan pembina atau pengisytiharan fungsi ialah fungsi dalam mod pengisytiharan fungsi boleh dipanggil sebelum fungsi ditakrifkan tidak akan bercakap lagi, mari kita lihat kod:

foo(); // 提示Foo
function foo() {
  alert('Foo');
}
bar(); // 哥们，和上面确实不一样，就不要逞能，这不报错了？提示bar未定义
var bar = function() {
  alert('Bar');
}

Mari kita bincangkan tentang fungsi yang diisytiharkan oleh pembina Fungsi yang diisytiharkan dengan cara ini tidak akan mewarisi skop kedudukan pengisytiharan semasa Ia hanya akan mempunyai skop global secara lalai kaedah pengisytiharan, seperti berikut :

function foo() {
  var hi = 'hello';
  //return function() {
  //  alert(hi);
  //};
  return Function('return hi;');
}
foo()(); // 执行效果大家自己跑一下看看

可以想见，用构造函数声明返回的这个函数执行必然报错，因为其作用域（即全局作用域）中没有hi这个变量。

还有一点，就是往往大家要说构造函数方式声明的函数效率要低，这是为什么呢？今天从文档是得知是因为另外3种方式申明的函数只会被解析一次，其实他们存在于闭包中，但是那也只与作用域链有关，函数体是只会被解析一次的。但是构造函数方式呢，每次执行函数的时候，其函数体都会被解析一次，我们可以想想这样声明的函数是一个对象，其中存放了参数以及函数体，每次执行的时候都要先解析一次，参数和函数体，才会执行，这样必然效率低下。具体实验不知道如何做？

最后说一个大家都不怎么注意的地方，什么时候看似函数声明方式的方式却不是函数生命方式（还是这么绕~简单点儿说，就是例2的方式什么时候在不经意间就成其他方式了）：

当成为表达式的一部分，就如同例3和例4。
不再是脚本本身或者函数的“源元素”（source element）。什么是源元素呢？即在脚本中的非嵌套语句或者函数体（A "source element" is a non-nested statement in the script or a function body），例如：

var x = 0;        // source element 
if (x == 0) {      // source element 
  x = 10;        // not a source element, 因为嵌套在了if语句里
  function boo() {}   // not a source element, 因为嵌套在了if语句里
} 
function foo() {     // source element 
  var y = 20;      // source element 
  function bar() {}   // source element 
  while (y == 10) {   // source element 
   function blah() {} // not a source element, 因为嵌套在了while语句里
   y++;        // not a source element, 因为嵌套在了while语句里
  } 
}

源元素的概念大概有了理解，继续刚刚说的函数声明，请看：

// 函数声明
function foo() {} 
  
// 函数表达式
(function bar() {}) 
  
// 函数表达式
x = function hello() {} 
 
if (x) { 
  // 函数表达式
  function world() {} 
}
 
// function statement 
function a() { 
  // function statement 
  function b() {} 
  if (0) { 
   // 函数表达式
   function c() {} 
  } 
}

最后这里说一下我自己的理解，之所以要区分函数声明与非函数声明，因为在我看了，函数声明方式的函数定义，在JS解析引擎执行的时候会将其提前声明，也就是像我们刚刚上面说的那样，可以在函数定义之前使用，实际上是解析引擎在我们使用前已经将其解析了，但是非函数声明式，就像表达式函数声明，JS解析引擎只会把var声明的变量提前定义，此时变量值为undefined，而真正对这个变量的赋值是在代码实际所在位置，因此上述提到报错都是undefined，实际变量已经定义了，只是还没有赋值，JS解析引擎不知道它为函数。

相信本文所述对大家javascript WEB程序设计的有一定的借鉴价值。