zoukankan      html  css  js  c++  java
  • javascript闭包详解

    以前写过一篇关于javascript闭包的随笔,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
    View Code

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

     1 var testObj = (function(){
     2     var value = 10;
     3     return {
     4         add: function(inc){
     5             value += (typeof inc === "number") ? inc : 1;
     6         },
     7         getValue: function(){
     8             return value;
     9         }
    10     };
    11 })();
    12 
    13 testObj.add();
    14 testObj.getValue();    // 11
    15 
    16 testObj.add(2);
    17 testObj.getValue(); // 13
    View Code

     我们可以通用调用一个函数的形式去初始化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"
    View Code

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

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

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

  • 相关阅读:
    js上传Excel文件
    在typescript中import第三方类库clipboard报错
    webpack学习(一)安装和命令行、一次js/css的打包体验及不同版本错误
    querySelector和getElementById之间的区别
    关于js延迟加载(异步操作)的方式
    addEventListener与attachEvent
    ES6 的Object.assign(target, source_1, ..., source_n)方法与对象的扩展运算符
    JS实现生成一个周对应日期数组
    微信小程序之媒体查询@media
    微信小程序之页面引用utils中的js文件
  • 原文地址:https://www.cnblogs.com/ArthurPatten/p/3531965.html
Copyright © 2011-2022 走看看