计划和完成这个例子中,音符的顺序如下:

  1. Java程序猿的JavaScript学习笔记(1——理念)
  2. Java程序猿的JavaScript学习笔记(2——属性复制和继承)
  3. Java程序猿的JavaScript学习笔记(3——this/call/apply)
  4. Java程序猿的JavaScript学习笔记(4——this/闭包/getter/setter)
  5. Java程序猿的JavaScript学习笔记(5——prototype)
  6. Java程序猿的JavaScript学习笔记(6——面向对象模拟)
  7. Java程序猿的JavaScript学习笔记(7——jQuery基本机制)
  8. Java程序猿的JavaScript学习笔记(8——jQuery选择器)
  9. Java程序猿的JavaScript学习笔记(9——jQuery工具方法)
  10. Java程序猿的JavaScript学习笔记(10——jQuery-在“类”层面扩展)
  11. Java程序猿的JavaScript学习笔记(11——jQuery-在“对象”层面扩展)
  12. Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)
  13. Java程序猿的JavaScript学习笔记(13——jQuery UI)
  14. Java程序猿的JavaScript学习笔记(14——扩展jQuery UI)

这是笔记的第4篇,聊聊闭包/getter/setter。看看JavaScript中的变量作用域和实现封装的方法。

作者博客:http://blog.csdn.net/stationxp

作者微博:http://weibo.com/liuhailong2008

转载请取得作者允许

1、闭包

闭包是JavaScript一项简单有用的语言特性。通过闭包:

弥补了函数没有public/private等訪问訪问权限控制符的缺陷。保护了函数内部变量的安全。

使得函数对象在作为參数传递时,不只传递运算逻辑,同一时候也传递了相关变量。

使得函数“类”的不同实例。独享自己的属性。

以下逐个来看。

1.1、保护私有变量

1.1.1、原理

闭包最基本的特性是:当函数作为返回值时,连同函数定义时的环境(包含函数外部,函数能够訪问到的变量)一起返回,确保这些变量不因其依附的对象销毁而被销毁。

有点儿绕,详细什么意思呢?看以下的代码:

// 代码段1

 function UiObject() {

     var childCount = 0; // 函数内部变量,  

     return 0;

 }

 

 var funcReturnValue = UiObject();  // 调用函数,返回0

 console.log(UiObject.childCount);   // 输出:undefined,因为函数调用完毕。内部变量已经被销毁

 

 childCount随着UiObject函数的调用结束而销毁,从还有一个角度看。保护了函数内部的变量。

 在这个基础上,假设我们有一种办法能够确保函数的内部变量不被销毁。并且提供方法对其訪问操作。也就实现了通过public方法訪问 private 变量。

代码例如以下:

 // 代码段2

 function UiObject() {

     var childCount = 0; // 函数内部变量

     function getChildCount(){

         childCount = 6;

         return childCount;

     }

     return getChildCount;

 }

 var funcReturnFObject = UiObject();  // 调用函数,返回 getChildCount 函数,返回值是一个闭包

 console.log(funcReturnFObject());   // 输出:6

 以下我们就看看,假设利用闭包的这一特性实现对私有属性的保护。

1.1.2、语法

在代码段2的基础上改进,代码段3展示的代码。能够同一时候提供多个方法,对私有属性訪问。

 //代码段3

 function UiObject() {

     var childCount = 0; // 函数内部变量

     

     return {

         getChildCount : function (){

             return childCount;

         },

         setChildCount : function (cnt){

             childCount = cnt;

         }

     };

 }

 

 var o = UiObject();  // 调用函数,返回 getChildCount 函数,返回值是一个闭包

 o.setChildCount(6);

 console.log(o.getChildCount());   // 输出:6

 

 思考: 假设 var childCount = 0 ; 改为 this.childCount = 0; 呢?

 我们之前研究过this,“ this.childCount = 0; ”语句是将childCount附加为调用者的属性,this.childCount的将生命周期与调用者同样。

这与闭包不冲突。

 

 代码段3还能够写成代码段4的形式。

// 代码段4

 function UiObject() {

     var childCount =  0; // 函数内部变量

     this.setChildCount = function(cnt){

         childCount = cnt;

     };

     this.getChildCount = function(){

         return childCount;

     };

 }

 

 var ui = new  UiObject();          // 调用函数,返回retObj

 console.log(ui.childCount);       // 输出:undefined,因为函数调用完毕,局部变量已经被销毁

 ui.setChildCount(3);                  // 因为闭包的作用。ui仍然保存着变量childCount,并对其操作

 console.log(ui.getChildCount()); // 输出:3

 

 “this.setChildCount = function(cnt){       childCount = cnt;   };” 这个语句相当于在UiObject内部定义了函数并“传递”了给ui对象。相同产生了闭包。

1.2、传递函数时。同一时候传递上下文

通过上面的样例,我们已经看到了这点特性。

在详细的应用场景中可对其大加利用。

1.3、不同实例,独享自己的变量

我们已经知道了。函数在传递过程中,会产生一个闭包。对于同一方法产生的闭包,是同样的,还是为每次传递创建了不同的拷贝呢?

看以下的代码:

//代码段5

 function UiObject() {

     var childCount = 0; // 函数内部变量

     

     return {

         getChildCount : function (){

             return childCount;

         },

         setChildCount : function (cnt){

             childCount = cnt;

         }

     };

 }

 

 var ui1 = UiObject();

 var ui2 = UiObject();

 

 ui1.setChildCount(1);

 ui2.setChildCount(2);

 

 console.log(ui1.getChildCount()); // output : 1

 console.log(ui2.getChildCount()); // output : 2

 

 每次生成闭包是不同的拷贝。

 

 思考:对照Java。加深理解。

2、getter/setter

JavaScript

 //代码段6

 var uiPanel ={

     _type  : 'Panel',

     _width : -1,

     _height: -1,

     

     get type(){ return this._type;},

     

     get width(){ return this._width; },

     set width(v){this._width = v;},

     

     get height(){ return this._height; },

     set height(v){this._height = v;}

 };

 

uiPanel.type = 'TextField';          // does not work

console.log('type:'+uiPanel.type); // ouput :         type:Panel

 

 uiPanel.width = 800;                 //

 console.log('width:'+uiPanel.width); // ouput :         width:800



语法上越发有面向对象的范儿了。

除了在定义时通过set/setkeyword控制属性的读写权限。还能够在执行期通过 Object.defineProperty()函数动态加入属性。并提供更精细的控制。

代码例如以下(下面代码均未经实验):

var o = {};

Object.defineProperty(o,'propName',{

            value:1,  //属性的值,也能够通过   get:function(){retun x。}的方法设定

            writeable:true,//能否够通过o.propName  = newValue ; 的方法设置属性的值

            enumerable:false,//能否够通过被枚举

            configurable:true//能否够通过defineProperty配置

    });

另外,另一系列API能够完毕对属性的配置、检測。例如以下:

Object.getOwnPropertyDescriptor{{x:1},"x"}

Object.keys(obj);    // 获得对象上全部可枚举的“实例属性”

Object.getOwnPropertyNames(obj) ;//获得对象上全部的“实例属性”

obj.hasOwnProperty(‘id’); //仅仅要该对象obj拥有属性id, 不管id是否可枚举,都返回true

3、小结

当大多数人已经习惯了面向对象的思维和方法,语言就要从特性方面予以满足。这不合理,也不美。但世界就是如此不完美。

JavsScript天生丽质。非要把她改造成机甲战士,那以后谁来负责倾国倾城呢?

ECMAScript 5不是革命性创新,也不是救命稻草。这个世界本来能够更好的。

版权声明:本文博客原创文章。博客,未经同意,不得转载。

Java程序猿JavaScript学习笔记(4——关闭/getter/setter)的更多相关文章

  1. Java程序猿JavaScript学习笔记(2——复制和继承财产)

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  2. Java程序猿JavaScript学习笔记(14——扩大jQuery UI)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  3. Java程序猿的JavaScript学习笔记(汇总文件夹)

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  4. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  5. Java程序猿的JavaScript学习笔记(3——this/call/apply)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  6. Java程序猿的JavaScript学习笔记(1——理念)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  7. Java程序猿的JavaScript学习笔记(10—— jQuery-在“类”层面扩展)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  8. Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  9. Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. PV、EV、AC、BAC、EAC、ETC等计算公式含义

    PV.EV.AC.BAC.EAC.ETC等计算公式含义 PV Planned Value:计划值 应该完成多少工作, (按照计划截止目前应该花费的预算) AC Actual Cost:实际成本, 完成 ...

  2. 编程轶事-java中的null-遁地龙卷风

    1.null是个奇妙的东西,可以理解为对象占位符 User user = null; System.out.println(user.getCredits()); 可以通过编译, User user; ...

  3. C语言:链表实现的一个实例

    问题:写一个程序输入你一年看过的所有电影以及每部电影的各种信息(简化问题:每部电影只要求输入片名和评价) 链表实现: #include<stdio.h> #include<stdli ...

  4. Code笔记之:CSS+HTML display 属性

    display属性值:none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-bl ...

  5. popular net

    陈皓<跟我一起写makefile>http://blog.csdn.net/haoel/article/details/2886/

  6. 我的acm vim 备忘

    一.從命令到編輯模式 a :当前单词后面插入Appendi :当前位置插入Inserto :当前行下新开一行插入Open new lineA :当前行尾插入AppendI :当前行首插入InsertO ...

  7. HTTP库Axios

    前面的话 本文将详细介绍HTTP库Axios 概述 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 [安装] 在Vue中使用,最好安装两个模块axios ...

  8. 谈谈关键字new

    1.在情人节那天,无意间看到空间有人说,没有对象就new一个,然后就可以........ 程序中我们常用到X a=new X(), new在这里是创建一个对象,也可以叫做创建一个实例,我们先谈谈后半部 ...

  9. Dynamics CRM CRM Explorer missing from Visual Studio 2012

    CRMSDK中提供的develop toolkit工具比较适合初级开发者或者是多人团队的开发,在代码版本控制及部署上均有明显的优势. 但今天在装完这个工具后,打开vs2012可以新建一个package ...

  10. jquery中attr属性操作