• 从function前面的!想到的


    最近没事喜欢看看,一些js库的源码,结果发现库前不是加一个!就是加+或者一个(),心中猜出个大概知道这个是让函数自动执行,可是这么多符号达到同一个目的,原理是什么呢,下面做一下剖析:

    先从IIFE开始介绍

    IIFE(Imdiately Invoked Function Expression 立即执行的函数表达式)

    function(){
        alert('IIFE');
    }

    把这个代码放在console中执行会报错

    image

    因为这个是一个匿名函数,要想让它正常运行就必须给个函数名,然后通过函数名调用。

    好了这下知道为啥我们看到很多类库写的时候也是匿名函数结果不报错了吧,就是因为这些前面加的符号的原因。

    其实在匿名函数前面加上这些符号后,就把一个函数声明语句变成了一个函数表达式,是表达式就会在script标签中自动执行。

    运算符

    ①为什么加上了这些运算符后就能让一个匿名函数变成一个不会报错的函数表达式呢?

    我们自然会想到javascript的解析器到底是怎么工作识别的呢,js解析器执行js表达式这个肯定是没有问题的。其实无论是括号,还是感叹号,让整个语句合法做的事情只有一件,就是让一个函数声明语句变成了一个表达式。所以我们让一个函数定义变成一个函数表达式来执行就不会报错。

    ②原理

    这样是一个函数声明
    function a(){
        alert('IIFE');
    }
    这样是一个函数调用
    a();
    理解一下就是在一个声明了的函数后面加上一个()就可以调用函数了
    function a(){
        alert('IIFE');
    }()
    就这样

    但是我们按上面在console中执行发现出错了

    image

    因为这样的代码混淆了函数声明和函数调用,以这种方式声明的函数 a,就应该以 a(); 的方式调用。

    但是括号则不同,它将一个函数声明转化成了一个表达式,解析器不再以函数声明的方式处理函数a,而是作为一个函数表达式处理,也因此只有在程序执行到函数a时它才能被访问。所以,任何消除函数声明和函数表达式间歧义的方法,都可以被解析器正确识别。所以,赋值,逻辑,甚至是逗号,各种操作符都可以告诉解析器,这个不是函数声明,它是个函数表达式。并且,对函数一元运算可以算的上是消除歧义最快的方式,感叹号只是其中之一,如果不在乎返回值,这些一元运算都是有效的

    !function(){alert('iifksp')}()        // true
    +function(){alert('iifksp')}()        // NaN
    -function(){alert('iifksp')}()        // NaN
    ~function(){alert('iifksp')}()        // -1

    性能

    针对这些一元运算符,到底用哪个好呢,测试发现()的性能最优越,但是差别都不是特明显,所以对于一个库来说用几个这样的符号来说看不出什么影响,所以平常用! + -都可以,就看个人的代码习惯,当然最好还是用()。

    参考:

    http://swordair.com/function-and-exclamation-mark/

    http://suqing.iteye.com/blog/1981591

  • 相关阅读:
    【学习】reactjs(一)——使用npm创建react项目并整合elementUI
    【学习】整合springboot2.0 和 mybatis,实现基本的CRUD
    macos monterey 系统升级后 go build 错误
    [R语言]关联规则2---考虑items之间严格的时序关系
    [R语言]关联规则1---不考虑items之间的时序关系
    [python]使用python实现Hadoop MapReduce程序:计算一组数据的均值和方差
    [机器学习笔记]奇异值分解SVD简介及其在推荐系统中的简单应用
    [机器学习笔记]主成分分析PCA简介及其python实现
    [游戏数据分析]WAU模型简介及WAU预测
    [R语言]读取文件夹下所有子文件夹中的excel文件,并根据分类合并。
  • 原文地址:https://www.cnblogs.com/yichengbo/p/3794515.html
Copyright © 2020-2023  润新知