zoukankan      html  css  js  c++  java
  • JavaScript 【函数表达式】私有变量

    以下大部分为学习《JavaScript 高级程序设计》》(第 3 版) 所做笔记。

    目录:

      1、了解私有变量

      2、静态私有变量

      3、模块模式

      4、增强的模块模式

    了解私有变量

      JS 没有私有成员的概念,但是有私有变量的概念。任何在函数中定义的变量都可以认为是私有变量,因为不能在函数外部访问这些变量,私有变量包括函数的参数、局部变量和在函数内部定义的其他函数。

      如下,函数内部有 3 个私有变量:num1、num2、sum。在函数内部可以访问这几个变量,在函数外部不能访问这几个变量。

    1 <script>
    2     function add( num1, num2 ){
    3         var sum = num1 + num2;
    4         return sum;
    5     }
    6     //在函数外部不可以访问私有变量
    7     console.log( sum ); //报错:test2.html:6 Uncaught ReferenceError: sum is not defined
    8 </script>

    怎 么 在 函 数 外 部 访 问 私 有 变 量 ?

      创建特权方法可以实现在函数外部访问私有变量。我们把有权访问私有变量和私有函数的公有方法称为特权方法。思路是在函数内部创建一个闭包的话闭包可以通过自己的作用域链访问这些变量。

      有 2 种创建特权方法的方式:1、在构造函数中定义特权方法  2、通过私有作用域中定义私有变量或函数来创建特权方法。

      第一种创建方式在构造函数中定义特权方法缺点是必须使用构造函数模式来达到目的,而构造函数的缺点是针对每个实例都会创建同样一组新方法。

      下面是在构造函数中定义特权方法的一个例子:

     1 <script>
     2     function MyObject(){
     3         //私有变量和私有函数
     4         var privateVariable = 1;
     5         function privateFn(){
     6             return privateVariable;
     7         }
     8         //特权方法
     9         //特权方法作为闭包有权访问在构造函数中定义的所有变量和函数
    10         this.publicMethod = function(){
    11             privateVariable++;
    12             return privateFn();
    13         }
    14     }
    15     //创建 MyObject 的实例
    16     //创建 MyObject 的实例后,除了通过 publicMethod() 这一个途径外,没有任何办法可以直接访问 privateVariable 和 privateFn()
    17     var fn1 = new MyObject();
    18     console.log( fn1.publicMethod() );  //输出:2
    19 </script>

      利用私有和特权成员,可以隐藏那些不应该被直接修改的数据,例如:

     1 <script>
     2     function Person( name ){
     3         //定义特权方法
     4         this.getName = function(){
     5             return name;
     6         }
     7         //定义特权方法
     8         this.setName = function( value ){
     9             name = value;
    10         };
    11     }
    12     //特权方法 getName() 跟 setName() 都可以在构造函数外部使用,而且有权访问私有变量 name
    13     //getName() 跟 setName() 作为闭包能够通过作用域链访问 name
    14     //在构造函数 Person 外部,没有任何方法访问 name
    15     var person = new Person( "xiaoxu" );
    16     console.log( person.getName() );    //输出:xiaoxu
    17     person.setName( "nana" );
    18     console.log( person.getName() );    //输出:nana
    19     //私有变量 name 在 Person中的每一个实例中都不相同,因为每次调用构造函数都会重新创建这 2 个方法
    20 </script>

    静态私有变量

      通过在私有作用域中定义私有变量和函数,同样也可以创建特权方法,其基本模式如下:

     1 <script>
     2     //创建一个私有作用域
     3     (function(){
     4         //私有变量和私有函数
     5         var privateVariable = 10;
     6         function privateFn(){
     7             return false;
     8         }
     9         //构造函数
    10         MyObject = function(){};
    11         //公有/特权方法
    12         MyObject.prototype.publicMethod = function(){
    13             privateVariable++;
    14             return privateFn();
    15         };
    16     })();
    17 </script>

      需要注意的是,这个模式在创建构造函数时,没有使用函数声明,而是使用了函数表达式。函数声明只能创建局部函数,那不是我们想要的。出于同样原因,在声明 MyObject 时没有使用 var 关键字。因为初始化未经声明的变量,总是会创建一个全局变量(在严格模式下给未经声明的变量赋值会导致错误),所以, MyObject就成了一个全局变量,能够在私有作用域之外被访问到。

    ( 不使用 var 关键字声明变量的相关笔记 : https://www.cnblogs.com/xiaoxuStudy/p/12535960.html#twoone )

    在 私 有 作 用 域 中 定 义 特 权 方 法 与 在 构 造 函 数 中 定 义 特 权 方 法 有 什 么 不 同 呢 ?

      在私有作用域中定义的私有变量和函数是由实例共享的,因为特权方法是在原型上定义的,所以所有实例都使用同一个函数。而这个特权方法,作为一个闭包,总是保存着对包含作用域的引用。以这种方式创建静态私有变量会因为使用原型而增加代码复用,但每个实例都没有自己的私有变量。

     1 <script>
     2     //创建私有作用域
     3     (function(){
     4         //私有变量
     5         var name = "";
     6         //构造函数
     7         Person = function(value){
     8             name = value;
     9         };
    10         //公有/特权方法
    11         Person.prototype.getName = function(){
    12             return name;
    13         };
    14         Person.prototype.setName = function(value){
    15             name = value;
    16         };
    17     })();
    18     
    19     //创建实例
    20     var p1 = new Person( "xiaoxu" );
    21     console.log( p1.getName() );    //输出:xiaoxu
    22     p1.setName( "nana" );
    23     console.log( p1.getName() );    //输出:nana
    24     
    25     var p2 = new Person( "mona" );
    26     //在私有作用域中定义的私有变量和函数是由实例共享的
    27     console.log( p1.getName() );    //输出: mona
    28     console.log( p2.getName() );    //输出:mona
    29 </script>

      多查找作用域链上的一个层次,就会在一定速度上影响查找速度,这正是使用闭包和私有变量的一个显明的一个不足之处

    模块模式

      前面的模式是为了自定义类型创建私有变量和特权方法的。而模块模式( module pattern )则是为了单例创建私有变量和特权方法。单例( singleton )指的是只有一个实例的对象。

      按照惯例,JS 是以对象字面量的方式来创建单例对象的。模块模式通过为单例添加私有变量和特权方法能使其增强,其语法形式如下:

     1 <script>
     2     //这个模块模式使用了一个返回对象的匿名函数
     3     var singleton = function(){
     4         //私有变量和私有函数
     5         var privateVariable = 1;
     6         function privateFn(){
     7             return false;
     8         }
     9         //特权/公有方法和属性
    10         /* 返回的对象字面量只包含可以公开的属性和方法,该对象是在匿名函数内部定义的,
    11         所以它的公有方法有权访问私有变量和函数 */
    12         //从本质上来讲,这个对象字面量定义的是单例的公共接口。
    13         return{
    14             publicProperty : true,
    15             publicMethod : function(){
    16                 privateVariable++;
    17                 return privateFn();
    18             }
    19         }
    20     }();
    21 </script>

      这种模式在需要对单例进行某些初始化,同时又需要维护其私有变量时是非常有用的。在 Web 应用程序中,经常需要使用一个单例来管理应用程序级的信息,例如:

     1 <script>
     2     //创建一个用于管理组件的 application 对象
     3     var application = function(){
     4         //私有变量和函数
     5         var components = new Array();
     6         //初始化
     7         components.push( new BaseComponent );
     8         //公共
     9         //返回对象的 getComponentCount 和 registerComponent 都是有权访问数组 components 的特权方法
    10         return{
    11             //返回已注册的组件数目
    12             getComponentCount : function(){
    13                 return components.length;  
    14             },  
    15             //用于注册新组件 
    16             registerComponent : function( component ){
    17                 if( typeof component == "object" ){
    18                     components.push( component );
    19                 }
    20             } 
    21         }
    22     }();
    23 </script>

      如果必须创建一个对象并以某些数据对其进行初始化,同时还要公开一些能够访问这些私有数据的方法,那么就可以使用模块模式。以这种模式创建的每个单例都是 Object 的实例,因为最终要通过一个对象字面量来表示它。单例通常是作为全局对象存在的,不会将它传给一个函数。因此,没有什么必要使用 instanceof 操作符来检查其对象类型。

    增强的模块模式

       对模块模式进行了改进就有了增强的模块模式,具体是在返回对象之前加入对其增强的代码。

      这种增强的模块模式适合那些单例必须是某种类型的实例,同时必须添加某些属性(或)方法对其加以增强的情况。

     1 <script>
     2     function CustomType(){};
     3     var singleton = function(){
     4         //私有变量和私有函数
     5         var privateVariable = 1;
     6         function privateFn(){
     7             return false;
     8         }
     9         //创建对象
    10         //增强的模块模式适合那些单例必须是某种类型的单例 
    11         var object = new CustomType();
    12         //添加特权/公有属性和方法
    13         object.publicProperty = true;
    14         object.publicMethod = function(){
    15             privateVariable++;
    16             return privateFn();
    17         }
    18         object.sayPrivateVariable = function(){
    19             return privateVariable;
    20         }
    21         //返回这个对象
    22         return object;
    23     }();
    24     
    25     console.log( singleton.publicProperty );        //输出:true
    26     console.log( singleton.publicMethod() );        //输出:false
    27     console.log( singleton.sayPrivateVariable() );  //输出:2
    28 </script>

      如果前面演示模式的例子中的 application 对象必须是 BaseComponent 的实例,那么就可以使用以下代码:

     1 <script>
     2     function BaseComponent(){};
     3     //创建一个用于管理组件的 application 对象
     4     var application = function(){
     5         //私有变量和函数
     6         var components = new Array();
     7         //初始化
     8         components.push( new BaseComponent() );
     9         //创建 application 的一个局部变量
    10         var app = new BaseComponent();
    11         //公共接口
    12         app.getComponent = function(){
    13             return components.length;
    14         };
    15         app.registerComponent = function( component ){
    16             if( typeof component == "object" ){
    17                 components.push( component );
    18             }
    19         }
    20         //返回这个副本
    21         return app;
    22     }();
    23 
    24     //在函数外部调用 getComponent() 方法返回已注册的组件数目
    25     console.log( application.getComponent() );        //输出:1
    26     var obj = new Object();
    27     //在函数外部调用 registerComponent() 方法注册新组件
    28     application.registerComponent( obj );
    29     //返回已注册的组件数目可以看到注册成功了
    30     console.log( application.getComponent() );        //输出:2
    31 </script>

    .

  • 相关阅读:
    九度oj 题目1465:最简真分数
    九度oj 题目1083:特殊乘法 清华大学2010年机试题目
    九度oj 题目1084:整数拆分 清华大学2010年机试题目
    九度oj 题目1085:求root(N, k) 清华2010年机试题目
    九度oj 题目1460:Oil Deposit
    九度oj 题目1459:Prime ring problem
    九度oj 题目1458:汉诺塔III
    九度oj 题目1457:非常可乐
    题目1451:不容易系列之一
    移动端滚动不流畅,添加-webkit-overflow-scrolling属性 值为touch
  • 原文地址:https://www.cnblogs.com/xiaoxuStudy/p/12564252.html
Copyright © 2011-2022 走看看