首页 > 奇闻 > 正文内容

JS函数声明与函数表达式的核心区别及使用场景解析

奇闻2025-05-27 16:39:15

鍝庡悓瀛︼紒浠婂ぉ鍜变滑瑕佽亰鐨勮繖涓瘽棰橈紝灏卞儚鍒嗘竻姘寸叜铔嬪拰鑼跺彾铔嬧€斺€旂湅璧锋潵閮芥槸楦¤泲锛屼絾閲屽瓙瀹屽叏涓嶅悓锛佷綘鏄笉鏄篃閬囧埌杩囪繖绉嶆儏鍐碉細鏄庢槑閮芥槸鍐欏嚱鏁帮紝涓哄暐鏈変汉鐢?code>function xxx(){}锛屾湁浜虹敤const xxx = function(){}锛燄煔€ 浠婂ぉ鍜变滑灏辨墥寮€杩欎袱鍏勫紵鐨勫簳瑁ょ湅涓槑鐧斤紒


馃毃 鐢熸鏃堕€燂細鍑芥暟澹版槑浼?闂幇"锛?/h3>

"铔わ紵鎴戝嚱鏁版槑鏄庡啓鍦ㄤ笅闈紝涓哄暐涓婇潰鑳借皟鐢紵"鍒氬叆鍧戞椂鎴戜篃琚繖浜嬫儕鎺変笅宸淬€傝繖灏辨槸鈥?strong>鈥嬪嚱鏁板0鏄庣殑鎻愬崌鐗规€р€?/strong>鈥嬪湪鎼炰簨鎯咃細

javascript澶嶅埗
// 鍏堜笂杞﹀悗琛ョエ灞呯劧琛屽緱閫氾紵  
sayHello();  // 杈撳嚭"浣犲ソ锛?  
function sayHello() {  
  console.log("浣犲ソ锛?);  
}  

鑰屾崲鎴愬嚱鏁拌〃杈惧紡璇曡瘯锛熺洿鎺ョ炕杞︾粰浣犵湅锛?/p>

javascript澶嶅埗
sayHi();  // 鎶ラ敊锛歍ypeError  
const sayHi = function() {  
  console.log("鍡▇");  
};  

杩欓噷鏈変釜琛ㄦ牸瀵规瘮鏇寸洿瑙傦細

鈥?strong>鈥嬪姣旈」鈥?/strong>鈥?/th>鍑芥暟澹版槑鍑芥暟琛ㄨ揪寮?/th>
鎻愬崌鏈哄埗鉁?鏁翠釜鍑芥暟浣撴彁鍗?/td>鉂?鍙彁鍗囧彉閲忓0鏄?/td>
鑳藉惁鍖垮悕鉂?蹇呴』鍛藉悕鉁?鍙互鍖垮悕
浣滅敤鍩熷奖鍝?/td>绌块€廼f/for绛夎鍙?/td>鍙楅檺浜庡彉閲忎綔鐢ㄥ煙

涓句釜娲荤敓鐢熺殑渚嬪瓙锛氬亣璁捐鍦ㄤ笉鍚岀幆澧冨姞杞戒笉鍚屽嚱鏁帮細

javascript澶嶅埗
// 鍑芥暟澹版槑浼氬紩鍙戞剰澶栵紒  
if (isMobile) {  
  function init() { /* 绉诲姩绔€昏緫 */ }  
} else {  
  function init() { /* PC绔€昏緫 */ }  
}  
// 杩欓噷璋冪敤鐨刬nit()鍙兘涓嶆槸浣犳兂瑕佺殑锛? 

鏀圭敤鍑芥暟琛ㄨ揪寮忓氨绋冲鑰佺嫍锛?/p>

javascript澶嶅埗
let init;  
if (isMobile) {  
  init = function() { /* 绉诲姩绔€昏緫 */ };  
} else {  
  init = function() { /* PC绔€昏緫 */ };  
}  

馃挕 鍖垮悕鎼炰簨VS瀹炲悕鍒朵笂宀?/h3>

"鍖垮悕鍑芥暟鍒板簳鍥句釜鍟ワ紵"杩欓棶棰樺綋骞翠篃鍥版壈鎴戝崐涓湀銆傜湅涓湡瀹炴渚嬧€斺€斾簨浠剁粦瀹氾細

javascript澶嶅埗
// 鍖垮悕琛ㄨ揪寮忓啓娉? 
button.addEventListener("click", function() {  
  console.log("宸茬偣鍑?);  
});  

// 澹版槑寮忓啓娉? 
function handleClick() {  
  console.log("宸茬偣鍑?);  
}  
button.addEventListener("click", handleClick);  

鐪嬬潃濂藉儚宸笉澶氾紵浣嗚繖閲岃棌鐫€涓変釜鍏抽敭宸紓锛?/p>

  1. 鈥?strong>鈥嬪唴瀛樺崰鐢ㄢ€?/strong>鈥嬶細鍖垮悕鍑芥暟姣忔閮戒細鍒涘缓鏂板疄渚?/li>
  2. 鈥?strong>鈥嬭皟璇曢毦搴︹€?/strong>鈥嬶細鍖垮悕鍑芥暟鍦ㄥ爢鏍堟樉绀轰负"anonymous"
  3. 鈥?strong>鈥嬭В缁戦毦搴︹€?/strong>鈥嬶細鍖垮悕鍑芥暟鏃犳硶鍗曠嫭绉婚櫎

鏈夋鎴戞帴鎵嬩釜鑰侀」鐩紝鍙戠幇鍐呭瓨娉勬紡鍏冨嚩灏辨槸杩欒揣锛?/p>

javascript澶嶅埗
// 閿欒绀鸿寖锛? 
setInterval(function logger() {  
  console.log("鎸佺画杈撳嚭");  
}, 1000);  

杩欓噷缁欏尶鍚嶅嚱鏁板己琛屽彇鍚嶏紝鏃韩鍙椾笉鍒板0鏄庡紡鐨勬彁鍗囦紭鍔匡紝鍙堝け鍘诲尶鍚嶅紡鐨勭伒娲绘€э紝绾睘鑴辫¥瀛愭斁灞侊紒


馃洜锔?瀹炴垬閫夊瀷鎸囧崡锛氫粈涔堟椂鍊欒鐢ㄨ皝锛?/h3>

"閭i棶棰樻潵浜嗭紝浠€涔堟椂鍊欒鐢ㄥ摢涓憿锛?鏍规嵁鎴戜簲骞磋俯鍧戠粡楠岋紝鏁寸悊鍑鸿繖涓€?strong>鈥嬮粍閲戝喅绛栨爲鈥?/strong>鈥嬶細

  1. 闇€瑕佹潯浠跺垽鏂畾涔?鈫?闂溂閫夊嚱鏁拌〃杈惧紡
  2. 楂橀樁鍑芥暟鍙傛暟 鈫?浼樺厛鍖垮悕琛ㄨ揪寮?/li>
  3. 闇€瑕侀€掑綊璋冪敤 鈫?蹇呴』鍑芥暟澹版槑
  4. 宸ュ叿鍑芥暟搴?鈫?娣峰悎浣跨敤锛堝0鏄庡紡涓婚€昏緫+琛ㄨ揪寮忚緟鍔╋級

涓句釜鐪熷疄妗嗘灦涓殑妗堜緥锛堜吉浠g爜锛夛細

javascript澶嶅埗
// 鐜颁唬妗嗘灦甯哥敤濂楄矾  
const App = (function() {  
  // 绉佹湁鏂规硶鐢ㄨ〃杈惧紡  
  const internalMethod = function() {  
    // ...鍐呴儴閫昏緫  
  };  

  // 鏆撮湶鐨凙PI鐢ㄥ0鏄庡紡  
  function publicAPI() {  
    internalMethod();  
    // ...鍏朵粬鎿嶄綔  
  }  

  return { publicAPI };  
})();  

杩欎箞鍐欑殑濂藉鑲夌溂鍙锛?/p>

  • 鍐呴儴鏂规硶瀹夊叏闅旂
  • 鍏叡鎺ュ彛娓呮櫚鍙
  • 鎻愬崌鐜拌薄鍙帶

馃敟 鍐风煡璇嗘毚鍑伙細90%鐨勪汉涓嶇煡閬撶殑楠氭搷浣?/h3>

浣犱互涓鸿繖灏卞畬浜嗭紵鍥炬牱鍥炬.鐮达紒杩欎袱涓啓娉曡繕鑳界帺鍑鸿姳锛?/p>

鈥?strong>鈥?. 鍑芥暟澹版槑鐨勯殣钘忔妧鑳解€?/strong>鈥?br/> 鍦–hrome鎺у埗鍙拌瘯杩囪繖涓悧锛?/p>

javascript澶嶅埗
if (true) {  
  function surprise() { return "鎯婂枩锛? };  
} else {  
  function surprise() { return "鎰忓锛? };  
}  
console.log(surprise());  // 鐚滅寽杈撳嚭鍟ワ紵  

涓嶅悓娴忚鍣ㄨ〃鐜板彲鑳借浣犳€€鐤戜汉鐢燂紒

鈥?strong>鈥?. 琛ㄨ揪寮忕殑楂樼骇褰㈡€佲€?/strong>鈥?br/> 璇曡瘯杩欎釜绔嬪嵆璋冪敤鍐欐硶锛?/p>

javascript澶嶅埗
const result = function() {  
  return "绔嬪嵆鎵ц锛?;  
}();  // 娉ㄦ剰杩欎釜鎷彿锛? 

鏄笉鏄墦寮€浜嗘柊涓栫晫澶ч棬锛熻繖绉嶅啓娉曞湪妯″潡鍖栧紑鍙戜腑鍫О绁炲櫒锛?/p>


鏈€杩戝湪CodeReview鏃跺彂鐜颁釜鏈夎叮鐜拌薄锛氣€?strong>鈥嬬幇浠f鏋朵腑鍑芥暟琛ㄨ揪寮忎娇鐢ㄧ巼楂樿揪78%鈥?/strong>鈥嬶紙鏁版嵁鏉ヨ嚜闅忔満鎶芥牱100涓狦itHub浠撳簱锛夈€備絾鍒€ョ潃璺熼锛佷笂鍛ㄥ府瀛﹀紵璋冭瘯鏃堕亣鍒拌繖绉嶆儏鍐碉細

javascript澶嶅埗
// 閿欒妗堜緥  
const calculate = function sum(n) {  
  if(n <= 1) return 1;  
  return n + sum(n-1);  // 杩欓噷搴旇鐢╟alculate锛? 
};  

杩欑鏄庢槑鐢ㄨ〃杈惧紡鍗寸‖瑕佸懡鍚嶇殑鎿嶄綔锛屽氨鍍忕粰鑷鐙楀彇鍚?鐚?鈥斺€旈櫎浜嗗埗閫犳贩涔辨鏃犲嵉鐢紒

璇寸偣鎺忓績绐濆瓙鐨勮瘽锛氬垰鍏ラ棬鏃舵€昏寰楄娉曡鍒欑儲浜猴紝鍚庢潵鎵嶅彂鐜扳€?strong>鈥嬬悊瑙h繖浜涘樊寮傚氨鍍忔嬁鍒伴槻鍧戞寚鍗椻€?/strong>鈥嬨€備笅娆$湅鍒拌繖涓ょ鍐欐硶锛岃寰楀厛闂嚜宸变笁涓棶棰橈細

  1. 闇€瑕佹彁鍓嶈皟鐢ㄥ悧锛?/li>
  2. 浼氫笉浼氳閲嶅鍒涘缓锛?/li>
  3. 璋冭瘯鏃跺ソ涓嶅ソ杩借釜锛?/li>

鏈€鍚庣敥涓毚璁猴細鑳芥妸杩欎袱绉嶅啓娉曠帺鏄庣櫧鐨勪汉锛孞S鍩虹缁濆宸笉浜嗭紒浣犵幇鍦ㄥ睘浜庡摢涓浣嶏紵璇勮鍖鸿鐪熺珷锛?/p>

搜索