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

之前有写过闭包,作用域,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的重要性,如果你还是一个新手建议你多看一些初级文章,在来看这篇文章,希望你会有新收获。写这篇文章一开始我也说了它的目的是回顾一下当初我没有理解的地方,当初已经理解的这篇文章并没有过多的去讲。

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

那就说一下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,好了一切就从这里结束吧。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352

推荐阅读更多精彩内容