本文最主要讲讲JavaScript闭包和this绑定相关的我的小发现,鉴于这方面的基础知识已经有很多很好的文章讲过了,所以基本的就不讲了,推荐看看[酷壳](http://coolshell.cn/)上的[理解Javascript的闭包](http://coolshell.cn/articles/6731.html)和[阮一峰](http://www.ruanyifeng.com/blog/)的[学习Javascript闭包(Closure)](http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html),写的都非常好。



首先来讲讲阮一峰的文章中的两道思考题。

**代码片段一**

```js
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()());
``` 这段代码最后输出的是 ```
The Window
``` 原因在同一片文章的评论中已经有人指出了 > George Wing 说:
>
> 上面本人说得不太正确。
this的指向是由它所在函数调用的上下文决定的,而不是由它所在函数定义的上下文决定的。 对于最后返回的这个匿名函数 ```js
function(){
return this.name;
};
``` 它是作为一个独立的函数返回的,它的调用域是在全局上,所以会输出全局变量name。 **代码片段二** ```js
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()());
``` 代码片段二最后输出的是 ```
My Object
``` 这里就要考虑`var that = this;`这句的作用了,由于`getNameFunc`是`object`内部的函数,所以它调用的上下文`this`保存的是`object`的信息,将其保存到`that`变量,这样作为内部函数的匿名函数就可以直接访问了。 可以注意到的是,阮一峰文章中的代码,都是将通过一个JSON对象来访问内部的函数,这样其实有些地方还不够清晰,毕竟不怎么严格地说,闭包就是函数内部的函数,所以我借用CoolShell上的文章中的例子来进一步说明。 **代码片段三** ```js
function greeting(name) {
var text = 'Hello ' + name; // local variable
// 每次调用时,产生闭包,并返回内部函数对象给调用者
return function() { alert(text); }
}
var sayHello=greeting("Closure");
sayHello() // 通过闭包访问到了局部变量text
``` 这段代码输出 ```
Hello Closure
``` 看上去好像很好理解,接下来看代码片段四: **代码片段四** ```js
var text = 'findingsea';
function greeting(name) {
var text = 'Hello ' + name; // local variable
// 每次调用时,产生闭包,并返回内部函数对象给调用者
return function() { alert(this.text); }
}
var sayHello=greeting("Closure");
sayHello() // 通过闭包访问到了局部变量text
``` 这段代码输出 ```
findingsea
``` 这是为什么呢? 针对代码片段三,CoolShell上的原文有解释: >文法环境中用于解析函数执行过程使用到的变量标识符。我们可以将文法环境想象成一个对象,该对象包含了两个重要组件,环境记录(Enviroment Recode),和外部引用(指针)。环境记录包含包含了函数内部声明的局部变量和参数变量,外部引用指向了外部函数对象的上下文执行场景。全局的上下文场景中此引用值为NULL。这样的数据结构就构成了一个单向的链表,每个引用都指向外层的上下文场景。 ![closure](http://findingsea-blog-images.qiniudn.com/closure.png) 针对代码片段四,就是我们之前讲过的,`this`保存是调用环境下的上下文内容,所以会输出全局的`text`。 ####总结
本文想说明的是以下两点: 1. 在函数闭包中,不使用`this`对变量进行访问时,函数会通过文法环境中的外部引用(指针),一级级地往上找(单向链表),直到找到(或者最终找不到)对应的变量。这个结构是在函数定义的时候就决定了的。
2. 在函数闭包中,使用`this`对变量进行访问时,和绝大多数语言不同,JavaScript的`this`保存的是调用环境的上下文,也就是说`this`中的内容是在调用的时候决定的,所以访问到的是当前环境下的对应变量,并不会像前一种情况一样进行逐级查找。

JavaScript闭包和this绑定的更多相关文章

  1. 前端(十三)—— JavaScript高级:回调函数、闭包、循环绑定、面向对象、定时器

    回调函数.闭包.循环绑定.面向对象.定时器 一.函数高级 1.函数回调 // 回调函数 function callback(data) {} // 逻辑函数 function func(callbac ...

  2. JavaScript闭包(Closure)

    JavaScript闭包(Closure) 本文收集了多本书里对JavaScript闭包(Closure)的解释,或许会对理解闭包有一定帮助. <你不知道的JavsScript> Java ...

  3. Javascript闭包深入解析及实现方法

    1.什么是闭包 闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点:1. 作为一个函数变量的一个引用,当函数返回时 ...

  4. JavaScript 闭包系列二(匿名函数及函数的闭包)

    一. 匿名函数 1. 函数的定义,可分为三种 1) 函数声明方式 function double(x) {     return 2*x; } 2)Function构造函数,把参数列表和函数体都作为字 ...

  5. javascript 闭包(转)

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

  6. 全面理解Javascript闭包和闭包的几种写法及用途

    好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了.好了,进入正题,今天来说一说javascript里面的闭包吧!本篇博客主要讲一些实用的东西,主要将闭包的写法.用法和用途.  一.什么 ...

  7. javascript闭包学习例子

    javascript中的闭包个很让人头疼的概念.总结一下 闭包是指有权访问一个函数作用域中的变量的函数.创建闭包最常见的方式,是在一个函数内部创建另一个函数,用return返回出去. 使用闭包可能造成 ...

  8. JavaScript闭包(一)——实现

    闭包的官方的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 通俗点的说法是: 从理论角度:所有的函数.因为它们都在创建的时候就将上层上下文 ...

  9. JavaScript 闭包整合

    初遇闭包感觉很困惑,上网查看了些许介绍,有很多没看懂,就想先对能懂的东西整整 首先觉得要了解闭包,要先对一.JavaScript的变量作用域和作用域链有基本了解 1.变量的作用域分为:全局变量和局部变 ...

随机推荐

  1. Spider Studio 新版本 (20140109) - 修复浏览器对部分网页不支持的BUG

    SS对部分网页中引用的jquery.js有冲突, 会造成网页部分JS效果无法正常执行. 本次版本对其进行了修正, 优化了浏览器的脚本引用机制, 修正了这个BUG.

  2. C#调用Oracle存储过程

    C#调用Oracle存储过程的代码如下所示: using System; using System.Collections.Generic; using System.Collections.Obje ...

  3. Libgdx多线程与渲染线程

    http://www.leestorm.com/post/115.html ——————————————————————————————————————————————————————————‘ 大部 ...

  4. java泛型之泛型边界

    http://blog.csdn.net/renwuqiangg/article/details/51296621

  5. 编程之美 set 20 构造数独

    1. 朴素 DFS 遍历效率太低, 即便是预先设定 9 个数放到数组再去 DFS, 同样并不高效 2. 在生成一个可行解后, 随机删除一些数字, 删除的数字越多, 数独的难度就越大 3. 正解二. 3 ...

  6. Windows远程桌面没有密码的电脑

    你如果想远程一个密码为空的机器,默认情况下是不可以的,需要进行以下设置 1.windows家庭版不支持远程桌面 2. 3.搜索“本地安全策略”

  7. Linux命令之乐--time

    time用于统计命令执行花费的总时间 例一: [root@Director usr]# time ls bin etc games include java lib lib64 libexec loc ...

  8. AssetsManager 在ios更新失败解决方案

    AssetsManager在安卓平台使用正常,但是到ios就不行了,最后发现是 cocos2d\cocos\network\CCDownloader-apple.mm中的 - (void)URLSes ...

  9. IOS7开发~新UI学起(四)

    本文转载至 http://blog.csdn.net/lizhongfu2013/article/details/9166193 1.UITableView: UITableViewDelegate ...

  10. Codevs 5914 [SXOI2016]最大值

    70分算法+30分打表 #include<ctime> #include<cstdio> #include<cstdlib> #include<algorit ...