利用javaScript闭包做到函数的私有性和公开性

╰+攻爆jí腚メ 2022-08-20 12:27 13阅读 0赞

关于javaScript的闭包我在另一篇博客中[实现javaScript对象的”继承”的两种方法(prototype与闭包) ][javaScript_prototype_]中提到过。

闭包也就是说在函数内部定义的函数，在外部使用的现象。可以使用闭包来完成对象的继承，可以做到函数的私有性和公开性。

#### js中的自调函数: ####

(function(形参)\{\}) (实参);

(function(name){
        alert("my name is"+name);
    })("hello world");

需求: 定义一个类，该类有age和name属性。生成实例可以对该类的这两个属性初始化之后可以获取其值，但不允许修改。

(function(){
      /**
      *专门存放两个属性的json
      **/
      var data = {
        name:"",
        age:""
        };
    /**
     *私有的方法
     **/   
     function setName(name){
       data.name= name;  
     }
    function setAge(age){
      data.age = age;
    }
    /**
     *公开的方法
     */
    function getName(){
       return data.name;
    }
    function getAge(){
       return data.age;
    }
    function init(name,age){
      setName(name);
      setAge(age);
    }
    //将要公开的API封装起来
    function Person(){
    return {
      init:init,
      getName:getName,
      getAge:getAge
    };
    }
    //将方法Person赋值给window。这样在外部就能访问了
    window.Person = Person;
    })();
    
    var p = Window.Person();
    p.init("wx","20");
    alert(p.getName());
    alert(p.getAge());

这样就利用闭包做到函数的私有性和公开性。  
为了更加美观,增加阅读性,重构上面代码:

(function(){
        
      /**
       *Person模块
       **/
      var Person = {
      //数据部分
        data:{
        name:"",
        age:""},
        //操作部分
        opt:{
           setName:function(name){
        
              Person.data.name=name;     
             },
           setAge:function(age){
        
            Person.data.age=age;
             },
            getName:function(){
        
             return Person.data.name; 
             },
             getAge:function(){
        
             return Person.data.age; 
            },
            init:function(name,age){
        
             Person.opt.setName(name);
             Person.opt.setAge(age);
             }
          },
          /**
          *公开的API
          **/
          openAPI:function(){
        
          return {
             init:Person.opt.init,
             getName:Person.opt.getName,
             getAge:Person.opt.getAge
        };
           }
        };
        window.Person = Person;
    })()
    var p = window.Person.openAPI();
    p.init("wx","20");
    alert(p.getName());
    alert(p.getAge());

如上写js的方式就是把所以的内容写在一个大大的json中，数据就对应key为data，操作看对于key为opt。这样写个人感觉比较直观一点。

说到这里了就再简单说一下jQuery的源码，其实整个jQuery其实就是一个自调函数:

(function(window){
        
        //jQuery是一个函数，一个对象，一个构造器函数
     var jQuery = function( selector, context ) {
        
      return new jQuery.fn.init( selector, context );
     },
     //定义了jQuery的prototype的内容
     //fn=prototype
     //加在jQuery的prototype上的方法可以通过选择器创建出来的对象调用
     jQuery.fn = jQuery.prototype = {        对象方法
      ready:function(){
        
    
      },
      each:function(){
        
    
      }
     },
     //post方法和extend方法直接加在了jQuery对象上     全局方法
     jQuery.post = function(){
        
    
     },
     jQuery.extend = function(){
        
    
     }
     //程序员在用jQuery的时候，是window的一个属性
     //jQuery=$
     window.jQuery = window.$ = jQuery;
     $.fn=jQuery.prototype=window.$.prototype=window.$.fn=window.jQuery.fn=window.jQuery.prototype
    
     加在jQuery的prototype上的方法和加在jQuery对象上的方法称为jQuery的插件开发
    })(window);
    
    window.jQuery.fn=$.prototype=window.$.fn=jQuery.prototype=window.jQuery.prototype

[javaScript_prototype_]: http://blog.csdn.net/canot/article/details/50760470

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript（函数，作用域和闭包）

目录一，什么是函数 1.1，常用系统函数 1.2，函数声明 1.3，函数表达式二，预解析 2.1，函数自调用

矫情吗；*/ 2023年10月15日 13:20/ 0 赞/ 34 阅读

相关 javascript闭包和立即执行函数的作用

转自：[https://www.cnblogs.com/carriezhao/p/7237095.html][https_www.cnblogs.com_carriezhao_

╰+哭是因爲堅強的太久メ/ 2023年10月09日 10:03/ 0 赞/ 36 阅读

相关 JavaScript中的匿名函数、闭包和BOM

1、匿名函数匿名函数就是没有名字的函数。 // 普通函数 function box() { // 函数名是 box return '

末蓝、/ 2022年12月10日 08:49/ 0 赞/ 124 阅读

相关 JavaScript函数闭包

文章目录函数闭包导引什么是闭包闭包的例子示例1：示例2：

淩亂°似流年/ 2022年10月21日 03:51/ 0 赞/ 176 阅读

相关【JavaScript】匿名函数和闭包

一、匿名函数就是没有名字的函数，闭包是可访问一个函数作用域里变量的函数。 1、普通函数： <span style="font-size:18p

桃扇骨/ 2022年09月26日 02:29/ 0 赞/ 242 阅读

相关利用javaScript闭包做到函数的私有性和公开性

关于javaScript的闭包我在另一篇博客中[实现javaScript对象的”继承”的两种方法(prototype与闭包) ][javaScript_prototype_]中

╰+攻爆jí腚メ/ 2022年08月20日 12:27/ 0 赞/ 14 阅读

相关【JavaScript】——匿名函数和闭包

前提通过最近一段时间对JavaScript视频的学习，接触到一种新的函数——匿名函数，也是通过对新鲜事物的学习，进而接触到新的一个名词——闭包。首先还是从基础的

蔚落/ 2022年07月24日 05:27/ 0 赞/ 241 阅读

相关闭包性和回调函数

/\\ 2016-11-10. \/ /\\ \ Date: 12-3-24 \ \ 说明: 这个例程说明闭包性和回调函数的原理 \ 执行

深碍√TFBOYSˉ_/ 2022年07月15日 08:49/ 0 赞/ 170 阅读

相关 JavaScript函数闭包

1、为什么会有闭包 > 由于作用域的原因，我们无法在函数外访问函数里面定义的变量，但有时候我们又会有这样的需求，这个时候我们就需要使用闭包了。 2、什么是闭包 > 在函数

红太狼/ 2022年01月27日 11:41/ 0 赞/ 284 阅读

相关【JS】JavaScript中的匿名函数和闭包

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] // 匿名函数 function () { // 匿名函数，会报错

心已赠人/ 2022年01月15日 11:23/ 0 赞/ 268 阅读