溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

javascript匿名函數(shù)中的'return function()'作用

發(fā)布時(shí)間：2020-09-20 13:56:44 來源：腳本之家 閱讀：438 作者：代碼日志 欄目：web開發(fā)

我最近看到很多javascript代碼,看起來我錯了.在這種情況下,我應(yīng)該建議哪種更好的代碼模式？我將重現(xiàn)我所看到的代碼和每個代碼的簡短說明：

代碼塊#1

該代碼不應(yīng)該評估內(nèi)部函數(shù).程序員會因?yàn)榇a應(yīng)該運(yùn)行而感到困惑.

$(document).ready( function() { 
 return function() { 
  /* NOPs */
 }
});

代碼塊#2

程序員可能打算實(shí)現(xiàn)一個自調(diào)用功能.他們沒有完全完成實(shí)現(xiàn)(他們在嵌套括號的末尾缺少一個().另外,由于它們在外部函數(shù)中沒有做任何事情,所以嵌套的自調(diào)用函數(shù)可以剛剛嵌入到外部功能定義.

其實(shí)我不知道他們打算使用自調(diào)用函數(shù),因?yàn)榇a仍然是錯誤的.但似乎他們想要一個自我調(diào)用的功能.

$(document).ready( (function() { 
 return function() { 
  /* NOPs */
 }
}));

代碼塊#3

再次,程序員似乎試圖使用自調(diào)用函數(shù).但是,在這種情況下,它是過度的.

$(document).ready( function() { 
 (return function() { 
  /* NOPs */
 })()
});

代碼塊#4

一個示例代碼塊

$('#mySelector').click( function(event) { 
 alert( $(this).attr('id') );

 return function() { 
  // before you run it, what's the value here?
  alert( $(this).attr('id') );
 }
});

評論：

我想我只是沮喪,因?yàn)樗鼤?dǎo)致人們不明白的蠕蟲,更改范圍界定,他們不是grokking,并通常使真正奇怪的代碼.這些都是來自某些教程的地方嗎？如果我們要教人們?nèi)绾尉帉懘a,我們可以教他們正確的方法嗎？

你會建議什么作為一個準(zhǔn)確的教程向他們解釋為什么他們使用的代碼是不正確的？你會建議他們學(xué)習(xí)什么模式？

我看到的所有使我提出這個問題的樣本都是這樣的問題.這是我遇到的最新的特征片段,展示了這種行為.你會注意到,我沒有發(fā)布一個鏈接的問題,因?yàn)橛脩羲坪跏窍喈?dāng)新手.

$(document).ready(function() {
 $('body').click((function(){
 return function()
 {
  if (counter == null) {
  var counter = 1;
  }
  if(counter == 3) {
   $(this).css("background-image","url(3.jpg)");
   $(this).css("background-position","10% 35%");
   var counter = null;
  }
  if(counter == 2) {
   $(this).css("background-image","url(2.jpg)");
   $(this).css("background-position","10% 35%");
   var counter = 3;
  }
  if(counter == 1) {
   $(this).css("background-image","url(1.jpg)");
   $(this).css("background-position","40% 35%");
   var counter = 2;
  }
 }
 })());
});

以下是我建議他們重寫代碼的方法：

var counter = 1;
$(document).ready(function() {
  $('body').click(function() {
    if (counter == null) {
      counter = 1;
    }
    if (counter == 3) {
      $(this).css("background-image", "url(3.jpg)");
      $(this).css("background-position", "10% 35%");
      counter = 1;
    }
    if (counter == 2) {
      $(this).css("background-image", "url(2.jpg)");
      $(this).css("background-position", "10% 35%");
      counter = 3;
    }
    if (counter == 1) {
      $(this).css("background-image", "url(1.jpg)");
      $(this).css("background-position", "40% 35%");
      counter = 2;
    }
  });
});

請注意,我并不是說我的代碼在任何方面都更好.我只是刪除匿名中介功能.我實(shí)際上知道為什么這個代碼最初沒有做他們想要的,而且我并沒有重寫大家的代碼,但是我確實(shí)想要這個代碼至少有可用的代碼.

我認(rèn)為一個真正的代碼示例將不勝感激.如果你真的想要這個特定問題的鏈接,請給我這個昵稱.他得到了幾個非常好的答案,其中我的中檔最好.

你的第一個例子是奇怪的.我甚至不知道這是否會以作者可能打算的方式工作.第二個簡單地將第一個包裝在不必要的括號中.第三個使用自調(diào)用函數(shù),盡管由于匿名函數(shù)創(chuàng)建了自己的范圍(可能還有一個閉包),我不知道它有什么好處(除非作者在閉包中指定了其他變量 – 讀取).

自調(diào)用函數(shù)采用模式(函數(shù)f(){/ * do stuff * /}()),并且被立即評估,而不是調(diào)用它.所以這樣的事情

var checkReady = (function () {
  var ready = false;
  return {
    loaded: function () { ready = true; },
    test: function () { return ready; }
  };
}())
$(document).ready(checkReady.loaded);

創(chuàng)建一個封裝,將返回的對象作為checkready返回到變量ready(它從閉包之外的一切隱藏).這將允許您通過調(diào)用checkReady.test()來檢查文檔是否已加載(根據(jù)jQuery).這是一個非常強(qiáng)大的模式,并且具有很多合法用途(命名空間,記憶,元編程),但在您的示例中并不是必需的.

編輯：阿爾,我誤解了你的問題.沒有意識到你正在呼吁不好的做法,而不是要求澄清模式.更多關(guān)于您詢問的最終形式的問題：

(function () { /* woohoo */ }())
(function () { /* woohoo */ })()
function () { /* woohoo */ }()

總結(jié)

以上所述是小編給大家介紹的javascript匿名函數(shù)中的'return function()'作用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手