js 在定义的时候立即执行的函数表达式(function)写法

本文详细解释了JavaScript中立即执行函数的两种常见写法:(function(){...}
(function(){... ...})() or(function(){... ....}())(推荐) 是两种JS 立即执行函数的常见写法。
很可能一开始 大家会像我一样,以为 function(){}() 就会立即执行 函数,但是 浏览器会报错,自己又觉得没问题呀,函数声明后,加() 不就是立即执行的意思么?并且深信不疑。 
好,让我们一点点分析。 
首先,我们来回顾下 几个概念1) 函数声明 2) 函数表达式 3)匿名函数。
函数声明:function test(){... ... } 使用function 关键字声明函数,并且指定函数名,不指定会报错哟(SyntaxError: function statement requires a name)
函数表达式:var Myfunc = function(){... ...} 使用 function 关键字声明函数,常规变量赋值。这种情况下创建的函数叫做匿名函数。
匿名函数(拉姆达函数):function 关键字后面没有标识符,即匿名函数的name 属性是空字符串。匿名函数 作用:创建函数 ,赋予事件则成为事件处理程序或创建闭包等。
闭包:指有权访问另一个函数作用域中的变量的函数。
fnName();
function fnName(){
    ...
}//正常,因为‘提升’了函数声明,函数调用可在函数声明之前

fnName();
var fnName=function(){
    ...
}//报错,变量fnName还未保存对函数的引用,函数调用必须在函数表达式之后

var fnName=function(){
    alert('Hello World');
}();//函数表达式后面加括号,当javascript引擎解析到此处时能立即调用函数

function fnName(){
    alert('Hello World');
}();//会报错

function fnName(){
    alert('Hello World');
}(1);//不会报错

function(){
    console.log('Hello World');   
}();//语法错误,虽然匿名函数属于函数表达式,但是未进行赋值操作,//所以javascript引擎将开头的function关键字当做函数声明,报错:要求需要一个函数名


定义过了一遍,好。
function(){}() //出错
解答: JS 将Function 关键字 当做一个函数声明的开始,而函数声明后面不能跟()函数表达式的后面 可以跟 () ,所以需要将函数声明 转化为 函数表达式。即 可以 
(function (){... ...})()
是不是觉得 还没有 好好理解,只是 觉得 这是规定,好,咱们继续。
函数声明 和 函数表达式 不同之处 在于 :1) JS 引擎 会在解析 JS 代码时,会将函数 声明 提升当前执行环境(作用域)上的函数声明(就像变量声明提前),而函数表达式必须等到JS
引擎执行到它所在行时,才会从上而下一行一行的解析函数表达式。2) 函数表达式 后面 可以加() 立即调用该函数,函数声明不行。
所以 我们想让函数声明 立即执行,就要想办法将函数声明 变成 函数表达式。 
(function(a){
    console.log(a);  //firebug输出123,使用()运算符
})(123);

(function(a){
    console.log(a);  //firebug输出1234,使用()运算符
}(1234));

!function(a){
    console.log(a);  //firebug输出12345,使用!运算符
}(12345);

+function(a){
    console.log(a);  //firebug输出123456,使用+运算符
}(123456);

-function(a){
    console.log(a);  //firebug输出1234567,使用-运算符
}(1234567);

var fn=function(a){
    console.log(a);  //firebug输出12345678,使用=运算符
}(12345678)

()、!、+、-、=等运算符,都可以 将函数声明转换成函数表达式,消除了JS 引擎 识别函数表达式 和函数声明的歧义,来告诉 JS 引擎 ,这是一个函数表达式,不是函数声明。
然后在 后面加() 立即执行函数 的代码。


function sayHello()
{
     alert("hello");
}(1);  //不会报错 ,相当于这样的写法,

function sayHello()
{
     alert("hello");
}
(1); 
<think>嗯,用户想了解JavaScript函数表达式的正确写法。首先,我需要回忆一下函数表达式的基本概念,以及和函数声明的区别。根据引用[1],函数表达式是在表达式或语法结构中创建的,比如赋值语句的右侧。例如,`let sum = function(a, b) { return a + b; };`。这点很重要,用户可能需要区分函数表达式和函数声明的不同使用场景。 接下来,用户可能遇到的常见错误是什么?比如引用[2]提到的语法错误,如`SyntaxError: expected expression, got ';'`或者`SyntaxError: expected expression, got 'if'`,这可能是因为在需要表达式的地方错误地使用了语句。例如,在赋值时使用了if语句,而应该使用函数表达式或者其他表达式。 然后,引用[3]强调了JavaScript中表达式和语句的区别。表达式会返回一个值,而语句执行动作。因此,在需要值的地方,比如函数参数或变量赋值,必须使用表达式。函数表达式作为表达式,可以出现在这些位置,而函数声明则不能。 另外,引用[4]提到jQuery选择器中的语法错误,可能与表达式解析有关。虽然用户的问题是关于函数表达式的,但可能需要提醒注意语法正确性,比如正确的括号和符号使用,避免因为拼写错误导致的语法问题。 现在需要整理函数表达式的正确写法。基本结构是使用`function`关键字,但不像声明那样有函数名(匿名函数),或者可以有命名函数表达式。比如: 匿名函数表达式:`const add = function(a, b) { return a + b; };` 命名函数表达式:`const factorial = function calc(n) { ... };`,这里calc只在函数内部可见,有助于调试。 箭头函数作为函数表达式的一种,更简洁:`const multiply = (a, b) => a * b;` 常见错误点可能包括缺少分号,错误使用函数声明语法在需要表达式的地方,比如在对象字面量中错误地使用函数声明。例如: 错误写法:`const obj = { method: function method() { ... } };` 这里应该是函数表达式,但语法是否正确?其实这样写是对的,但用户可能混淆声明和表达式的位置。 另外,立即执行函数表达式(IIFE)的正确写法:`(function() { ... })();`,这里需要用括号包裹函数体,使其成为表达式,否则解析器会认为是函数声明而报错。 可能还需要提到函数表达式的作用域和提升,函数表达式不会被提升,而函数声明会。因此,函数表达式必须在定义后使用。 最后,总结正确写法,常见错误示例及解决方法,帮助用户避免典型的语法错误,比如分号问题,错误使用关键字等。</think>### JavaScript函数表达式语法规范 #### 一、基本语法结构 函数表达式的核心特征是*作为值存在*,其标准语法为: ```javascript // 匿名函数表达式 const add = function(a, b) { return a + b; }; // 命名函数表达式 const factorial = function calc(n) { return n <= 1 ? 1 : n * calc(n-1); }; ``` 命名函数表达式中的函数名(如`calc`)仅在函数内部可见,外部无法访问[^1]。 #### 二、箭头函数表达式(ES6+) 现代JavaScript支持更简洁的写法: ```javascript const multiply = (a, b) => a * b; const logMessage = msg => console.log(msg); ``` #### 三、常见错误示例 1. **语句位置错误** ```javascript // 错误:在需要表达式的位置使用函数声明 if (true) function foo() {} // SyntaxError // 正确写法 if (true) { const foo = function() {}; } ``` 2. **立即执行函数格式错误** ```javascript // 错误:缺少包裹括号 function(){ console.log('IIFE') }(); // SyntaxError // 正确写法 (function() { console.log('IIFE'); })(); ``` 3. **符号缺失错误** ```javascript // 错误:缺少分号导致后续括号被解析为函数参数 const fn = function(){} (function(){})() // 被解析为 fn()(function(){})() // 正确写法 const fn = function(){}; (function(){})(); ``` #### 四、最佳实践 1. 优先使用箭头函数简化代码 2. 需要函数自引用时使用命名函数表达式 3. 避免在逻辑判断中直接定义函数表达式 4. 使用ESLint进行语法检查(可检测99%的语法错误)
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值