zoukankan      html  css  js  c++  java
  • JavaScript闭包小窥

    众所周知,JavaScript没有块级作用域,只有函数作用域。那就意味着定义在函数中的参数和变量在函数外部是不可见的,而在一个函数内部任何位置定义的变量,在该函数内部任何地方都可见。这带来的好处是内部函数可以访问定义它们的外部函数的参数和变量

    首先,我们来构造一个简单的对象。

     1 var testObj = {
     2     value: 10,
     3     add: function(inc){
     4         this.value += (typeof inc === "number") ? inc : 1;
     5     }
     6 };
     7 
     8 testObj.add();
     9 testObj.value; // 11
    10 
    11 testObj.add(2);    
    12 testObj.value; // 13

    这样写就有一个问题,value值不能保证不会被非法修改,可以按如下的方法进行修改。

    var testObj = (function(){
        var value = 10;
        return {
            add: function(inc){
                value += (typeof inc === "number") ? inc : 1;
            },
            getValue: function(){
                return value;
            }
        };
    })();
    
    testObj.add();
    testObj.getValue(); // 11
    
    testObj.add(2);
    testObj.getValue(); // 13

    我们可以通用调用一个函数的形式去初始化testObj,该函数会返回一个对象字面量,函数里定义了一个value变量,该变量对add和getValue方法总是可用的,但函数的作用域使得它对其他的程序来说是不可见的。同时,我们还可以得出一个结论,内部函数拥有比它的外部函数更长的生命周期

    我们再继续看一个构造函数调用的例子。

    var MyObj = function(str){
        this.status = str;
    };
    
    MyObj.prototype.getStatus = function(){
        return this.status;
    };
    
    var obj = new MyObj("javascript");
    obj.getStatus(); // "javascript"

    这样写并没有错,但是会有一点“多此一举”,为什么要用一个getStatus方法去访问一个本可以直接访问到的属性呢?如果status是私有属性,那当然才有意义。

    var obj = function(status){
        return {
            getStatus: function(){
                return status;
            }
        };
    };
    
    var myObj = obj("javascript");
    myObj.getStatus(); // "javascript"

    这里当我们调用obj的时候,它返回包含getStatus方法的一个新对象,该对象的一个引用保存在myObj中,即使obj已经返回了,但getStatus方法仍然享有访问obj对象的status属性的特权。getStatus方法并不是访问该参数的一个副本,它访问的就是该参数本身。这是可能的,因为该函数可以访问它被创建时所处的上下文环境,这被称为闭包

    Stay Hungry,Stay Foolish!
  • 相关阅读:
    设计模式 : Template method 模板方法模式 -- 行为型
    设计模式:Strategy 策略模式 -- 行为型
    没有评审的技术都是扯淡
    TCP/IP 协议大致的概念
    HTTP 2.0 与 tomcat
    相对URL拼接为绝对URL的过程
    URI与URL区别
    《淘宝首页性能优化实践》文章阅读
    第一章 Linux内核简介
    vim中执行shell命令小结
  • 原文地址:https://www.cnblogs.com/stay-9527/p/4087062.html
Copyright © 2011-2022 走看看