通过一个简单例子理解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对象并不神秘,不是吗?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容