美文网首页
立即执行函数、函数作用域链、闭包

立即执行函数、函数作用域链、闭包

作者: 林立镇 | 来源:发表于2017-08-16 23:13 被阅读0次
    函数表达式
    var fn = function(){
    var a = 1
    console.log(a)
    };
    fn()
    
    1
    undefined
    
    立即执行函数
    function(){
    var a = 1
    console.log(a)
    }()
    
    Uncaught SyntaxError
    

    会出现语法错误的提示
    javascript提供的执行函数的语法

    (function(){
    var a = 1
    console.log(a)
    }())
    
    1
    undefined
    

    函数会直接执行,打出1
    语句的返回值为undefined
    除此之外,还有其它的使用立即执行函数的语法

    (function(){
    var a = 1
    console.log(a)
    })()
    
    1
    undefined
    

    直接在函数添加前缀‘+’或‘-’
    会在控制台打出

    1
    NaN
    

    前缀为‘~’

     1
    -1
    

    前缀为‘!’

    1
    true
    

    如果函数不是从第一行开始,可能会出现错误

    var a = 2
    (function(){
    var a = 1
    console.log(a)
    })()
    

    会出现未知错误
    上面提到的立即执行函数
    只有在函数前面添加前缀‘~’或‘!’
    不会出现错误

    var a = 2
    !function(){
    var a = 1
    console.log(a)
    }()
    
    1
    true
    
    按值传递和地址传递
    image.png
    !function outer(){
        var outerA = 1
        function inner(){
            var innerA = 1
            setInterval(function(){
                innerA = innerA + 1
                console.log("innerA的值是:" + innerA)
            },1000)
    
            var temp   = {
                ref:innerA //2
            }
            return temp
        }
        var tempRef = inner()
        setInterval(function(){
            console.log(tempRef)
        },1000)
    }()
    
    innerA的值是:2
     {ref: "2"}
     innerA的值是:3
     {ref: "2"}
    . . . . . . . . . . . . . .//一秒打出一次
    

    innerA是按值传递的。
    上例中,可以看出在inner函数里的innerA,值是一直变化的
    但是在执行了inner函数之后返回的包含innerA的对象里
    innerA的值却是不变的。
    因为tempRef是只执行了一次inner函数返回的值,
    执行时,innerA的值是‘1’,
    之后innerA的值再变化就和tempRef没有关系了,

    !function outer(){
        var outerA = 1
        function inner(){
            var innerA = {name:1}
            setInterval(function(){
                innerA.name = innerA.name + 1
                console.log("innerA的值是:" + innerA.name)
            },1000)
    
            var temp   = {
                ref:innerA //2
            }
            return temp
        }
        var tempRef = inner()
        setInterval(function(){
            console.log(JSON.stringify(tempRef))
        },1000)
    }()
    
    innerA的值是:2
    {"ref":{"name":2}}
    innerA的值是:3
    {"ref":{"name":3}}
    . . . . . . . . . . . . . .//一秒打出一次
    

    因为innerA是按地址传递的

    函数作用域链

    这里简单介绍一下作用域
    当函数被调用时,
    会创建一个执行环境以及相应的作用域链。
    在作用域链中,
    函数内的arguments和其它命名参数作为初始化函数的活动对象,处于第一位。
    外部函数的活动对象处于第二位,
    外部函数的外部函数的活动对象处于第三位,
    直到作用域链重点的全局执行环境。
    compare()函数为例

    function compare(value1,value2){
        if(value1<value2){
          return -1;
        } else if(value1>value2){
          return 1;
        } else {
          return 0;
        }
    }
    var result = compare(5,10)
    

    执行compare()时,
    compare函数内会创建一个包含arguments数组、value1变量、value2变量的活动对象。
    因为是在全局作用域中执行了函数,
    在全局作用域内会创建一个包含result变量、compare函数的全局变量对象。

    常见函数的作用域链.png

    在函数执行之后,做产生一个作用域链,分别是全局作用域以及局部作用域,在全局作用域里可获取全局变量对象compare和result,在局部作用域里可获取compare函数里的局部活动变量对象arguments,value1,value2

    什么是变量对象

    后台的每个执行环境都有一个表示变量的对象——变量对象。
    全局环境的变量对象始终存在,
    函数的局部环境的变量对象只在执行的过程中存在,执行完之后就销毁了。
    在创建compare()函数时,
    会创建一个预先包含全局变量对象的作用域链,在这个作用域链被保存在内部的[[Scope]]属性中。
    调用函数时,
    会为函数创建一个执行环境,然后复制内部属性中的对象构建执行环境的作用域链。
    同时,
    有一个活动对象被创建并推入执行环境作用域链的前端。
    这个作用域链中包含两个变量对象:
    本地活动对象和全局变量对象。
    作用域链本质:
    指向变量对象的指针列表,只包含指针地址来对变量对象的引用。
    函数内的内部函数会将它的外部函数的活动对象添加进它的作用域链。

    探索闭包

    闭包是指有权访问另一个函数作用域中的变量的函数
    创建闭包的常见方式,
    就是在一个函数内部创建另一个函数,

    function createComparisonFunction(propertyName){
      return function(object1,object2){
        var value1 = object1[property];
        var value2 = object2[property];
        
        if(value1<value2){
          return -1;
        } else if(value1>value2){
          return 1;
        } else {
          return 0;
        }
    
      }
    }
    

    执行函数

    var compare = createComparisonFunction("name");
    //创建函数
    var result = compare({name:"Jack"},{name:"Rose"});
    //调用函数
    compareNames = null
    //解除对匿名函数的引用(以便释放内存)
    
    闭包的作用域链.png

    相关文章

      网友评论

          本文标题:立即执行函数、函数作用域链、闭包

          本文链接:https://www.haomeiwen.com/subject/iomurxtx.html