折腾自己的js闭包(一)

闭包是什么鬼?

15年10月份初到现在的公司时,有天晚上加班后临下班时,当时的组长问我知道闭包不,由于我是半路出家来做程序的,几乎很少用到闭包这个东东,并不是很了解这个概念,组长写出了这么段代码。

var temp = {

  data: [],

  totalRecords: 0

};

(function(dm){

  for(var i=0;i<10;i++){

    dm.data.push(i*i);

    dm.totalRecords += 1;

  }
})(temp);

console.log(temp); //结果得到 object{data:Array[10],totalRecords:10}

我当时就觉得很神奇了,函数内部的dm变量,经过这么一折腾,在外面也就可以访问到其变化之后的值了,原因何在?于是乎,后来我花了时间来研究这个闭包,到底是什么鬼?到底会有什么时候需要用到?

首先来说我们平常遇到的一个很普遍的变量的作用域的问题,例如有如下js代码:

var strA = "xiangxiao's weekend";

function f1(){

  var strB = strA + " is writing code."

  document.write(strB);

}

f1(); //结果当然是2个字符串拼接起来 xiangxiao's weekend is writing code.

这个无需多解释,因为在js函数内部肯定是可以访问并使用在函数体外面的变量的嘛;

再来看另一段js代码:

function f1(){

  var strA = "xiangxiao's weekend";

  var strB = strA + " is writing code."

};

document.write(strB); //此处报错

报错的原因就是这个strA和strB是函数f1 的局部变量,它 的作用域仅限于f1函数体内部,外部是访问不了的,这里牵扯到作用域的问题,既然说到这儿也就耗一点篇幅来讲这个作用域的东东吧。

在JavaScript中,函数也是对象,也可以通过var func = new Function('a','b','return a+b')这样的形式来定义函数,一般不这样做的原因是将众多代码弄在一个超长的字符串里,代码的可读性太差。简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

1、全局作用域

即在代码中任何地方都能访问到的对象拥有全局作用域,一般来说以下几种情形拥有全局作用域:

(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域,例如:

var authorName = "xiangxiao";
function say(){
  var blogName = "dearxiangxiao";
  function innerSay(){
    document.write(blogName);
  };
  innerSay();
}
document.write(authorName); //结果是xiangxiao
document.write(blogName); //报错
say(); // 结果是dearxiangxiao
innerSay();//报错

(2)未使用var关键字定义的变量也被赋予了全局的作用域;

function say(){
  var authorName = "xiangxiao";
  blogName = "dearxiangxiao";
  document.write(authorName);

};

say(); //结果是xiangxiao

document.write(authorName);//报错

document.write(blogName);//结果是dearxiangxiao

(3)所有window对象的属性拥有全局作用域。

这个就无需举例了,window.innerWidth诸如此类的东东,用得也蛮多的了。window对象还可自定义属性和方法,当然跟这里没啥关系了。

 

2、局部作用域

和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所以在一些地方也会看到有人把这种作用域称为函数作用域。

之前1中的(1)那个例子

var authorName = "xiangxiao";
function say(){
  var blogName = "dearxiangxiao";
  function innerSay(){
    document.write(blogName);
  };
  innerSay();
}
document.write(authorName); //结果是xiangxiao
document.write(blogName); //报错
say(); // 结果是dearxiangxiao
innerSay();//报错
 
这里面的变量blogName和函数innerSay就只拥有局部作用域。
 
那么,要怎么样才能访问到函数内部的变量呢?在上面的代码中,函数innerSay就被包括在函数say内部,这时say内部的所有局部变量,对innerSay都是可见的。但是反过来就不行,innerSay内部的局部变量,对say就是不可见的。这就是JavaScript语言特有的“链式作用域”结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
现在想到一点东西了,结合以前遇到的闭包的使用场景,可以做如下思考:既然innerSay函数可以访问到say函数内部的变量,我们可以将innerSay整个函数作为say函数的返回,再使用say外面这个函数时,就可以毫无阻力的访问innerSay内层函数的诸多变量了。说干就干,于是乎,我改了一下上面的函数:
function say(){
  var authorName = "xiangxiao";
  function innerSay(){
    document.write(authorName)
  };
  return innerSay;
};
var fn = say();
fn(); //结果打印出了xiangxiao
 
果然,实现了我的想法,同时,我在思考如果返回的不是函数怎么处理,比如:object对象,也好办嘛,也是可以返回的嘛,搜了一下之后,我写了段计算圆面积的代码来做实验,代码如下:
var Circle = function(){
  var obj= new Object();
  circle.PI = 3.1416;
  circle.area=function(r){
    return this.PI * r * r;
  };
  return circle;
};
var newCircle = new Circle();
document.write(newCircle(3)); //结果计算出了半径为3 的圆面积是28.2744
写到这里,大致明白了闭包的本质:就是能够读取其他函数内部变量的函数,而且是从外部来读取的,上面的innerSay函数和circle的area函数,都可以视做闭包,由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
 
到这里,然而最开头我们组长写的那段代码,我还是都点云里雾里,仔细查了下这个(function(){})()的原理,明白了个中道理,看来组长还是懂这些东东的。我的理解如下:
对于javascript来说,也对函数的声明和执行进行了区分
 
function Fn() { //some code}     // 这是定义,Declaration;定义只是让解释器知道其存在,但是不会运行。
Fn();                   // 这是语句,Statement;解释器遇到语句是会运行它的。
 
于是,有人觉得啰嗦,定义和执行还必须分开来写,同时,因为作用域的存在,某些共用的变量还必须定义为全局的,污染了命名空间(一不小心就定义了个别人也在用的变量,溴大了)。于是想找一个可以解决以上问题的写法。那么像下面这么写行不行呢?

function Fn(){ //some code}();

当然是不能,但是为什么呢?因为 function Fn(){ //some code} 这个部分只是一个声明,对于解释器来说,就好像你写了一个字符串 "function Fn(){ //some code}",它需要使用解析函数,比如 eval() 来执行它才可以。所以把 () 直接放在声明后面是不会执行,这是错误的语法。

如何把它变得正确?说起来也简单,只要把 声明 变成 表达式(Expression) 就可以了。实际上转变表达式的办法还是很多的,最常见的办法是把函数声明用一对 () 包裹起来,于是就变成了:

(function Fn() { //some code})();

这样等价于:

function Fn() { //some code};

Fn();

另外,还有很多其他写法可以将函数声明变为表达式,比如:

!function() { //some code}();

+function() {// some code}();

再回到那段组长写的代码

var temp = {

  data: [],

  totalRecords: 0

};

(function(dm){

  for(var i=0;i<10;i++){

    dm.data.push(i*i);

    dm.totalRecords += 1;

  }
})(temp);

console.log(temp);

 

这里相当于定义了一个以temp为参数的函数,(function(dm){ //......省略代码})() 这部分里第一个括号里相当于定义了一个函数,返回值是一个函数,第二个括号就是在执行这个被返回的函数了,dm只不过是形参,temp的值在那个匿名函数里改变了,后面再打印temp的值,理所当然的是 object{data:Array[10],totalRecords:10}了。

这就是这篇博文的全部内容了,个人简见解,不喜勿喷,后面我还会研究下闭包的具体用途。

ps:吐槽一下成都的这个鬼天气,今年感觉没春天啊,冬天之后立马到夏天,放个清明节下了2天雨。

posted @ 2017-04-04 16:13  dearxiangxiao  阅读(181)  评论(0编辑  收藏  举报