通过一个简单例子理解JavaScript闭包和this对象

在JavaScript里,只要有函数,就有闭包。可以说,闭包无处不在。但是,如果提问,“闭包到底是什么”?大多数时候,可能感觉明明心里清楚但苦于说不清楚,“只可意会不可言传”了。

同样,this也是一个很抽象的概念,它往往和闭包一起出现。

我们通过一个例子,并做一些后续的改造,来说说,到底,闭包是什么?this又是如何指定的?

1. 闭包

var number = 1;
function abc() {
    var number = 2;
    function foo() {
        console.log(number);
    }
    return foo;
}
abc()();//输入是什么?

答案是:2.

分析之前,我们需要知道一件事情,函数运行前后,发生了什么?

  1. 函数运行时:函数内部的变量都会入栈。
    比如abc函数,它被执行时,变量number(=2)入栈。在函数运行期间,number是可以被函数内部的其他方法或者变量访问。
  2. 函数运行结束:栈内所有变量被销毁。
    一般情况,函数内的变量晚些会被垃圾回收。也就是说,number(=2)这个变量将不存在,永远无法访问。

那么,如果,函数内出现闭包了呢?
当运行abc函数时,返回值为一个函数,这个函数,就是一个闭包函数。

闭包,指的是一种特殊函数,这种函数会在被调用时保持当时的变量名查找的执行环境

(注:出自《JavaScript编程全解 [(日)》一书)。

现在可以回答文章开头的问题了:

  1. 闭包是什么?答:一种特殊函数。
  2. 闭包特点是什么?答:被调用时,保留其定义时候的作用域执行环境。

回头看例子,abc()执行完之后,返回foo函数(一个闭包函数)。这时,abc函数本应该被销毁(包括其内部变量),但是由于闭包函数定义在abc内部并且访问到该函数的变量number(=2),那么,abc无法被销户,其执行环境依旧存在。
运行foo,按照作用域链查找原则,会先访问var number = 2;,自然,最后打印值为2.

综上所述,闭包的作用域环境是函数定义时就决定好的,与运行无关

现在,我们把上面的题目稍微改动一下:

2. this对象

var number = 1;
function abc() {
    var number = 2;
    function foo() {
        console.log(this.number); // 这里有变化!
    }
    return foo;
}
abc()();//输入是什么?

答案是:1.

有了this搅合,这就不能从闭包的角度分析啦,那么,this是什么?

this是在运行时进行绑定的对象。
this的上下文取决于函数调用时的各种条件。
this的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式。

简单来说,谁调用了函数,那么,函数内部的this就是这个调用者(注意:如果用new关键字调用函数,那么,this默认指向这个新对象)。

回到题目,abc()执行完之后,返回foo函数并运行,相当于:

foo(); // 相当于window.foo()

那么,这个时候,foo函数的调用者是window,即this.number === window.number,自然,输出为1.

其实,this如何绑定,还有其他的方法,比如call, apply, bind,这里就不展开讲了。

3. 切换上下文

在JavaScript标准中, 为函数规定了用来保存定义时上下文的私有属性[[Environment]]。当一个函数执行时,会创建一条新的执行环境,记录

小结:

当查看一个函数时,要注意,它是如何访问变量的?!
变量名称前面有没有this至关重要,如果没有this,那么,多考虑闭包作用域;如果有this,多考虑调用关系。

可见,闭包和this对象并不神秘,不是吗?

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,594评论 18 139
  • 继承 一、混入式继承 二、原型继承 利用原型中的成员可以被和其相关的对象共享这一特性,可以实现继承,这种实现继承的...
    magic_pill阅读 1,049评论 0 3
  • 1.对象是什么 对象就是若干属性的集合。 在JS中一切引用类型都是对象:数组是对象,函数是对象,对象还是对象。对象...
    liushaung阅读 1,205评论 0 2
  • JavaScript笔记(三) 函数 理解函数 Javascript函数的参数与大多数其他语言中的函数的参数不同。...
    运维开发笔记阅读 268评论 0 0
  • yy这么好看,怎么会不喜欢呢?
    云计算阅读 201评论 0 0