之前有写过闭包,作用域,this方面的文章,但现在想想当时写的真是废话太多了,以至于绕来绕去的,让新手反而更难理解了,所以就有了此篇文章,也好和闭包,作用域,this告一段落。

 

第一个问题:什么是闭包?

我不想回答这个问题,但是我可以告诉你的是闭包可以解决函数外部无法访问函数内部变量的问题。下面是一段没有使用闭包的代码:

  function fn(){

    var a = 10;

  }

alert(a);

//报错了,因为a没有定义,虽然函数fn里面定义了a但是,但是它只能在函数fn中使用。也就是作用域的问题。

   再看‘闭包可以解决函数外部无法访问函数内部变量的问题’这段话,好像有点意思,那么究竟闭包是怎么做的,看下面代码。

  function fn(){

//定义了一个变量name

   var name = '追梦子';

//我现在想在外部访问这个变量name怎么办呢?哈:不是有return,我把它返回出去,我再用个变量接收一下不就可以了,哈哈哈哈~~~~~

return name;

}

var name = fn();//接收fn返回的name值。

alert(name);//追梦子;

·······这里的闭包就是利用函数的return。除了通过return还可以通过其他的几种方法如下:

  

  方法1:

    

function fn(){
  var a = 0;
  b = a;
}
alert(b)

  这里利用了js的一个特性,如果在函数中没有用var定义变量,那么这个变量属于全局的,但这种方法多少有些不好。

  

  方法2:

  

var f = null;
function fn(){
  var a = 0;
  f = function(){
    a++;
    f.a = a;
  };
}
fn();
f();
alert(f.a);//1
f();
alert(f.a);//2

但好像也没有那样神奇对吧?其实闭包还有一个很重要的特性。来看一个例子。

  var lis= document.getElementsByTagName['li'];

  //假如这段代码中的lis.length = 5;

for(var i=0;i<lis.length;i++){

    lis[i].onclick = function(){

      alert(i);

    };

}

  最终结果是不管单击哪个li元素都是弹5。不信你试试。为什么呢。看下面分析。

    

  for(var i=0;i<lis.length;i++){

}

// i = 5对吧

  lis[0].onclick = function(){

    alert(i);

  };

  lis[1].onclick = function(){

    alert(i);

  };

  lis[2].onclick = function(){

    alert(i);

  };

  lis[3].onclick = function(){

    alert(i);

  };

  lis[4].onclick = function(){

    alert(i);

  };

为什么会这样呢,因为你for循环只是给li绑定事件,但是里面的函数代码并不会执行啊,这个执行是在你点击的时候才执行的好吧?但是此时的i已经是5了,所以所有的都打印出5来了。

  如果想解决这个问题我们可以使用闭包,闭包的特点不只是让函数外部访问函数内部变量这么简单,还有一个大的特点就是通过闭包我们可以让函数中的变量持久保持。来看。

  function fn(){

    var num = 0;

   return function(){

    num+=1;

alert(num);   

};  

}

var f = fn();

f(); //1

f(); //2

如果你是初学者可能没觉得这有什么。OK,让你看个东西。

  function fn(){

var num = 5;

num+=1;

alert(num);

}  

fn(); //6

fn(); //6

为什么呢?因为函数一旦调用里面的内容就会被销毁,下一次调用又是一个新的函数,和上一个调用的不相关了,不过有个特殊的情况,看这:

  

  function fn(){

    var num = 0;

   return function(){

    num+=1;

alert(num);   

};  

}

var f = fn();

f(); //1

f(); //2

这段代码很简单,不要被它欺骗了,我们首页定义了一个fn函数,里面有个num默认为0,接着返回了一个匿名函数(也就是没有名字的函数)。我们在外部用f接收这个返回的函数。这个匿名函数干的事情就是把num加1,还有我们用来调试的alert。

  这里之所以执行玩这个函数num没有被销毁是因为那个匿名函数的问题,因为这个匿名函数用到了这个num,所以没有被销毁,一直保持在内存中,因此我们f()时num可以一直加。

这里你可以看不懂了,之所以有这种感觉是因为js回收机制你不懂,强烈建议你看我之前的再次讲解js中的回收机制是怎么一回事。这篇文章。

关于闭包的知识就到这里了,如果你想看关于闭包的案例可以看这篇:从闭包案例中学习闭包的作用,会不会由你。

而外:关于在for循环中绑定事件打印变量i是最后一次。

  

而外说一句:这里并不是说return就是闭包,这里只是强调return的重要性,如果你还是一个新手建议你多看一些初级文章,在来看这篇文章,希望你会有新收获。写这篇文章一开始我也说了它的目的是回顾一下当初我没有理解的地方,当初已经理解的这篇文章并没有过多的去讲。

 作用域竟然上面已经讲完了~~~

大前端 369451410欢迎你的加入。

那就说一下this:

  我们经常用this,但是也许你还不清楚它是什么吧?

lis[i].onclick=function(){this.style.border="1px solid #ccc";} ;

此时的this表示lis[?]它的引用。

这里的i不是i实际上是一个准确的数字:如lis[2].onclick = function(){this.style.border="1px solid #ccc";}; this = lis[2] ;

简单来说this它始终引用一个对象。

       lis[2]它也一个对象,是一个HTMLElement对象。

  其实不管什么情况下它都会有对象的,这个你不用操心,看

    function fn(){

     this.name = "追梦子";    

};    

fn();

alert(this.name);//追梦子

//当然也可以这样

    alert(name);

虽然这段代码中看似没有对象,但大错特错,因为浏览器环境中默认就有一个window对象,因此你在函数中直接用this.name实际上这个this就表示window。

  var json = {

    name:'yyy',

    fn:function(){alert(this.name)} 

};

json.fn(); // yyy;

  fn属于json,所以this实际上就是json。

如果你是初学者建议你暂时先记住这三点,当然this还有很多要说的,不过做为初学者你可以在项目中通过console.log来检查this是否是你预期的那样。

更多关于this的内容,可以看彻底理解js中this的指向,不必硬背。

这篇文章并不算是一篇入门的教程,这篇文章主要是总结之前没有理解的地方,或者是以一种更加简单明了的方式写的,当然是按照我自己的理解来的,不一定你能理解,sorry,好了一切就从这里结束吧。

那些年我们一起过的JS闭包,作用域,this,让我们一起划上完美的句号。的更多相关文章

  1. js闭包的作用域以及闭包案列的介绍:

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  2. JS 之作用域链和闭包

    1.JS无块级作用域 <script> function Main(){ if (1==1){ var name = "alex"; } console.log(nam ...

  3. js中作用域和闭包

    作用域链实例   (1) function example() { var age = 23; alert(age) } var age = 25; example(); alert(age); // ...

  4. JS之作用域与闭包

    JS之作用域与闭包   作用域在JS中同样也是一个重要的概念.它不复杂,因为ES5中只有全局作用域和函数作用域,我们都知道他没有块级作用域.但在ES6中多了一个let,他可以保证外层块不受内层块的影响 ...

  5. 深入理解JS函数作用域链与闭包问题

    function fun(n,o) { console.log(o) return { fun:function(m){ return fun(m,n); } }; } ); a.fun(); a.f ...

  6. javascript深入理解js闭包

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  7. 浅谈Js闭包现象

    一.1.我们探究这个问题的时候如果按照正常的思维顺序,需要知道闭包是什么它是什么意思,但是这样做会让我们很困惑,了解这个问题我们需要知道它的来源,就是我们为什么要使用闭包,先不管它是什么意思!     ...

  8. 大部分人都会做错的经典JS闭包面试题

    由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...

  9. Js闭包常见三种用法

        Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...

随机推荐

  1. linux 重新编译低版本gcc

    编程实践中,可能会遇到需要较低版本gcc以兼容相应程序的需求,这时就需要我们将系统中默认的gcc版本较低,或者重新编译生成.(UBUNTU12.04下实现gcc4.2.3) 方法1: 对于UBUNTU ...

  2. ios申请真机调试( xcode 5)详细解析

    已经有开发证书的直接跳过第一步 第一步:申请"开发证书" 进入苹果开发者99美元账号: 选择:Certificates, Identifiers & Profiles 关于 ...

  3. ubuntu安装octave的小坑

    出现了以下情况: After this operation, 163 MB of additional disk space will be used.Do you want to continue? ...

  4. code review作业

    下面是对结对编程队友12061166 宋天舒的code review 五个优点: 1.代码的风格优秀,注释不多,但是必要的注释还是有的,比如: // 三种模式 // mode1仅统计单个单词 // m ...

  5. 工作随笔——Swift中的Range和一些字符操作

    截取字符串在Swift中相比OC要复杂很多,主要原因可能还是OC的NSRange的创建方法中参数类型为int,而Swift却对类型要求很严格,int不能作为参数创建Range,这要使用String中的 ...

  6. ActionBar的使用

    ActionBar的使用很普遍,可以充当工具栏使用.本文介绍如何使用ActionBar. 1.ActionBar一般包含有多个工具按钮.所以,需要新建一个xml文件来存放ActionBar中的内容.在 ...

  7. NTP服务配置

    一.NTP简介 在计算机的世界里,时间非常地重要,例如对于火箭发射这种科研活动,对时间的统一性和准确性要求就非常地高,是按照A这台计算机的时间,还是按照B这台计算机的时间?NTP就是用来解决这个问题的 ...

  8. Kernels

    Let \(E\) be a set and  \(\mathscr{E}\)  a \(\sigma\)-algebra of subsets of  \(E\). Assume that the ...

  9. Wix 安装部署教程(七) 获取管理员权限

    应用程序运行的时候,难免会读写文件,产生新的数据.但Program Files下的文件是不能随便更改,Win7下如果没有权限,将会被拒绝.我现在有两种方式,一种是将数据路径移到Program Data ...

  10. JavaScript工具库之Lodash

    你还在为JavaScript中的数据转换.匹配.查找等烦恼吗?一堆看似简单的foreach,却冗长无趣,可仍还在不停的repeat it!也许你已经用上了Underscore.js,不错,你已经进步很 ...