NiceLeeのBlog 用爱发电 bilibili~

关于某些常见js结构的半吊子理解

2020-05-27
nIceLee

阅读:


老是碰见这些类型,是时候理顺一下思路了。
(function (){…}())
(function (){…})()
!function (){…}()

需要简单了解的一些概念

闭包

为了不与其它变量相混淆,缩小作用域,避免暴露一些不需要的细节,这是这种写法要实现的主要目的。

函数声明

像这种:

function test1(){
    alert('Hello World');
}

函数表达式

像这种:

var test2 = function(){
    alert('Hello World');
}

执行一个函数

像这种:

var test3 = function(){
    alert('Hello World');
}
test3();

或者这种:

function test4(){
    alert('Hello World');
}
test4();

匿名函数

  • 它不能单独存在,否则会报语法错误。
    js引擎会将开头的function关键字当做函数声明,会报错需要一个函数名。

  • 它可以是函数表达式var a=b;右边的b那一部分。
  • 它也可以是其它表达式的一部分,比如(a)!a+a
  • 像这种:
    function(){
      alert('Hello World');
    }
    

一步一步慢慢认识

  • 首先,我们要认识到我们的目的,将某些实现放在匿名函数里面,实现闭包
    function(){
      alert('hello');
    }
    
  • 然后,我们要让这个函数马上跑起来
    function(){
      alert('hello');
    }()
    
  • 为了方便外部调用,可以传个参数进去
    var module = {};
    function(exports){
      exports.alert = function(){alert('hello')};
    }(module)
    // 如果一切顺利,module.alert()可以实现警报方法
    module.alert();
    
  • 但是问题来了,因为语法问题,浏览器无法好好地识别匿名函数和函数声明,它会报错。所以我们需要加料。
    以下是几种实现:
    var module = {};
    !function(exports){
      exports.alert = function(){alert('hello')};
    }(module);
    

    或者

      var module = {};
      ~function(exports){
          exports.alert = function(){alert('hello')};
      }(module);
    

    或者

      var module = {};
      (function(exports){
          exports.alert = function(){alert('hello')};
      })(module);
    

    或者

      var module = {};
      (function(exports){
          exports.alert = function(){alert('hello')};
      }(module));
    

    等等


相似文章

内容
隐藏