JavaScript 自动执行函数工作原理

        自动执行函数有多种叫法:立即执行方法、立即调用表达式、自动匿名函数等等。

        自动执行函数 Immediately Invoked Function Expressions (IIFEs) 是 存在于JavaScript 文件头部和尾部的函数的一种包裹函数。比如:

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

        我们可以通过查看一般方法和表达式的调用方式来理解自动执行函数的工作原理。

首先看一个普通的方法及其调用方式:

function print(){
    console.log("hello")
}
print(); //方法通过方法名调用执行

        再看值和表达式:

66;  //66  值
(66); //66  加上括号将数值转换为表达式
(66).toString(); // "66" 表达式调用ok

66.toString(); //VM223:1 Uncaught SyntaxError: Invalid or unexpected token
                //数值调用toString()报错
"66".toString();  //"66" 字符串值调用ok

        可以发现,有时候,值和表达式的的行为方式相同,涉及方法调用时表达式调用的方式更安全。

        接下来,尝试将上诉的print()方法及其调用改为匿名方法:

function (){
    console.log("hello")
}();

        浏览器控制台运行代码会提示错误:

        参考值和表达式调用示例,改为采用表达式调用的方式,将匿名方法的定义部分使用括号括起来转为表达式: 

(function (){
    console.log("hello")
})();

        再在控制台运行,就发现可以正确打印了:

        当然,转换为表达式的方式有很多种,加括号或者进行加减乘除与或非运算都是可以的: 

        自动执行函数最常见的应用是一些公用的三方库的引入,基本都是采用非运算表达式调用的方式实现自动执行:

!function (win) {
    "use strict";
    /....
}(window)

           一般都是通过非运算或者直接加括号实现表达式方式的调用。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_老杨_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值