jinzh notes
jinzh notes

js中的自执行匿名函数

js中的自执行匿名函数
内容纲要

js中的自执行匿名函数 (function(){})()

JS函数有两种命名方式

1、声明式

声明式会导致函数提升,function会被解释器优先编译。即我们用声明式写函数,可以在任何区域声明,不会影响我们调用。

function XXX(){}

2、函数表达式

函数表达式我们经常使用,而函数表达式中的function则不会出现函数提升。而是JS解释器逐行解释,到了这一句才会解释。

因此如果调用在函数表达式之前,则会调用失败。

var k = function(){}
fn1();
function fn1(){}//可以正常调用

fn2();
var fn2 = function(){}//无法调用

产生的原因

对函数表达式加上(),是可以直接调用的 ,但是如果是对声明式的后部加上()则是会被编译器忽略。

var fn2 = function(){}();//这里就执行了
function fn1(){}();//会编译器被忽略

自执行匿名函数

自执行函数,即定义和调用合为一体。

自执行函数在调用上与普通函数一样,可以匿名,可以传参。

只不过是在声明的时候自调用了一次,即我们创建了一个匿名的函数,并立即执行它,由于外部无法引用它内部的变量,因此在执行完后很快就会被释放,关键是这种机制不会污染全局对象。

常见格式:

// 1.第一种方式: 两个()() ,function写在第一个()里面
(function(){})()

// 2.第二种方式: 一个() ,里面写 function(){}()
(function(){}())
  • 解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数。
  • 作用:可以用它创建命名空间,只要把自己所有的代码都写在这个特殊的函数包装内,那么外部就不能访问,除非你允许(变量前加上window,这样该函数或变量就成为全局).
  • 各JavaScript库的代码也基本是这种组织形式。

实现方法:

只要让浏览器识别函数为表达式即可,此时匿名函数就会自动执行了

//方法一,调用函数,得到返回值,强制运算符使函数调用执行
(function(x,y){
    return x+y
}(3,4))
//方式2,调用函数,得到返回值,强制函数返回一个引用,引用再去调用执行
//注意:此处返回的是function对象,然后加上参数列表,变成了普通的函数调用形式
(function(x,y){
    return x+y
})(3,4)
//方式3,使用void
void function(x) {
    x = x-1
}(9)
//方式4,使用-/+运算符
-function(x,y){
    return x+y
}(3,4)

+function(x,y){
    return x+y
}(3,4)

--function(x,y){
    return x+y
}(3,4)

++function(x,y){
    return x+y
}(3,4);
//方式5,使用波浪符(~)
~function(x, y) {
    return x+y
}(3, 4)
//方式6,匿名函数执行放在中括号内
[function(x, y) {
    return x+y
}(3, 4)] 
//方式7,匿名函数前加typeof
typeof function(x, y) {
    return x+y
}(3, 4)
//方式8,使用&& || , 等操作符在函数表达式和函数声明上消除歧义
var i = function(x,y){
    return x+y
}(3,4) 
true && function(x,y){
    return x+y
}(3,4) 
0, function(x,y){
    return x+y
}(3,4)
true || function(x,y){
    return x+y
}(3,4)
//方法9,new关键字实现,不确定效率
new function(x,y){
    return x+y
}(3,4)

VUE3示例

watch(messages.value, () => {
  // 当 count.value 更新,会触发此回调函数 
  (async function () {
    //自执行匿名函数
    //使用await nextTick推迟到在Dom更新完成后,更新视图
    await nextTick()
    if (!fo.value) {
      test()
    }
  }())
})

如果这里不使用自执行匿名函数来延迟test()函数执行,那么test()所修改的虚拟DOM为messages变化前的虚拟DOM,使用了await推迟到DOM重新渲染结束后,test()进行操作的虚拟DOM为最新的

影翼

文章作者

发表回复

textsms
account_circle
email

jinzh notes

js中的自执行匿名函数
js中的自执行匿名函数 (function(){})() JS函数有两种命名方式 1、声明式 声明式会导致函数提升,function会被解释器优先编译。即我们用声明式写函数,可以在任何区域声明,不会影响我们…
扫描二维码继续阅读
2022-01-03