首先强烈安利《你不知道的JavaScript》,JS初学者进阶必读。

对于从C++、Java等静态语言转向JavaScript的初学者(比如我)来说,JS一些与众不同而又十分要紧的特性使得它显得十分诡异而难以捉摸,为此必须下一番大力气,一边啃书一边实践将这些概念彻底搞懂,然后才谈得上进一步学习前端姿势。(注:本文里的JS以ECMAScript 5(ES5)为准,ES6的新特性我也是刚刚接触,希望今后能与大家一起学习探讨。)

熟悉Java的童鞋在初学JS时,必须要牢记一点:

JS中没有块级作用域!

{
var test=10;
}
console.log(test); // 控制台输出:10

纳尼?是不是看着很别扭?还有更坑爹的:

var obj={
test:10,
myFunc:function(){
console.log(test);
}
};
obj.myfunc(); // 出错,或者IDE直接报警了

同一个对象,自己的函数都不认自己的属性了?

还真是。

对于初学者而言,可以这样认为:除了全局作用域之外,JS只有一种作用域,即函数作用域。(try catch{}语句也可以定义作用域,不过目前为止我还没实际用过)

也就是说,写在函数体内的变量,只要不是嵌套在更深层的函数里,就是处在同一作用域的,“互相可见”;而其他的花括号,不管是for后跟的,if后跟的,还是对象字面量的,一概“不作数”,起不到定义作用域的效果,变量声明写在那些花括号的里面或外面都一样。

那位于嵌套的函数里的作用域呢?它们享有“单向透明”的特权,即:在较内层次的作用域内可以访问较外层次作用域里的变量,反之则不行。

function outerFunc(){
for(var i=0;i<10;i++){doSomething;}
console.log(i); // 控制台输出10,因为i位于outerFunc的作用域
var outer = 10;
function innerFunc(){
var inner = outer; // 内层作用域可以访问外层作用域里的变量
}
console.log(inner); // 报错,外层作用域访问不到内层作用域里的变量
}

再来分析上一个例子。我们试图在myFunc的作用域内部访问test,然而test并不是一个“与myFunc位于同一个对象作用域”的变量,事实上根本不存在“对象作用域”这回事,test是obj的一个属性,不是一个“独立”的变量,要访问test只能通过点运算符obj.test或obj["test"],哪怕是在myFunc内部。当然,myFunc内部可以访问到obj这个位于外层作用域的变量,没有问题。于是将代码改写如下:

var obj={
test:10,
myFunc:function(){
console.log(obj.test);
}
};
obj.myfunc(); //

既然在内层作用域里可以访问外层作用域,那么就产生了一个有趣的现象,叫做“闭包”。制造一个闭包只需要两步:

1.在内层函数里引用外层函数的变量

2.将内层函数作为外层函数的返回值返回出去

function outer(){
var test = 10;
var inner = function(){
console.log(test++);
};
return inner;
} var myFunc = outer(); // 将outer的返回值(inner函数)赋给myFunc
myFunc(); //
myFunc(); //
myFunc(); //

这个被返回的inner函数就是一个闭包。虽然outer函数运行结束了,但它的内部变量test因为被闭包引用,所以并没有被销毁,而是被保存了起来,并且可以通过闭包继续操作。当然,外界永远无法访问test这个变量,它成了inner(以及myFunc)所指向的函数的“私有变量”。

JavaScript中的作用域和闭包的更多相关文章

  1. Javascript中关于作用域和闭包和域解释的面试题

    <script type="text/javascript"> function fn() { var i = 10; return function (n) { co ...

  2. 认识javascript中的作用域和上下文

    javascript中的作用域(scope)和上下文(context)是这门语言的独到之处,这部分归功于他们带来的灵活性.每个函数有不同的变量上下文和作用域.这些概念是javascript中一些强大的 ...

  3. 深入理解JavaScript中的作用域和上下文

    介绍 JavaScript中有一个被称为作用域(Scope)的特性.虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,我会尽我所能用最简单的方式来解释作用域.理解作用域将使你的代码脱颖而出,减 ...

  4. JavaScript中的作用域

    很多(JavaScript)开发者都在讨论"作用域",但它是什么?它们在JavaScript中的任何地方!我发现很多年轻的开发者不知道作用域是什么.他们中大多数人可以用jQuery ...

  5. 前端学习 第六弹: javascript中的函数与闭包

    前端学习 第六弹:  javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) {   ...

  6. 【翻译】JavaScript中的作用域和声明提前

    原文:http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html ===翻译开始=== 你知道下面的JavaScript脚本执 ...

  7. JavaScript中的作用域和声明提前

    [翻译]JavaScript中的作用域和声明提前 原文:http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html ===翻译 ...

  8. javascript(面向对象,作用域,闭包,设计模式等)

    javascript(面向对象,作用域,闭包,设计模式等) 1. 常用js类定义的方法有哪些? 参考答案:主要有构造函数原型和对象创建两种方法.原型法是通用老方法,对象创建是ES5推荐使用的方法.目前 ...

  9. 漫谈JavaScript中的作用域(scope)

    什么是作用域 程序的执行,离不开作用域,也必须在作用域中才能将代码正确的执行. 所以作用域到底是什么,通俗的说,可以这样理解:作用域就是定义变量的位置,是变量和函数的可访问范围,控制着变量和函数的可见 ...

随机推荐

  1. HDU-4300 Clairewd’s message

    http://acm.hdu.edu.cn/showproblem.php?pid=4300 很难懂题意.... Clairewd’s message Time Limit: 2000/1000 MS ...

  2. win pe 修改xp系统开机密码方法

    今天使用win pe 修改了xp系统的密码,有三种方法 一 .  最终找到了一个方法,这个方法只能改写密码,也就是说会留下痕迹,如下: 1.使用的工具:FbinstTool v1.50 FbinstT ...

  3. JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强

    对上篇博客的最后那个表格隔行高亮显示加了个功能,鼠标监听和年龄从小到大排序. 演示代码: <html> <head> <title>DHTML技术演示---表格中页 ...

  4. [CODEVS1220]数字三角形

    题目描述 Description 如图所示的数字三角形,从顶部出发,在每一结点可以选择向左走或得向右走,一直走到底层,要求找出一条路径,使路径上的值最大. 输入描述 Input Description ...

  5. C语言宏定义函数中的“_##”的意思

    最近在看google vp9的代码的时候碰到: #define intra_pred_sized(type, size) \ void vp9_##type##_predictor_##size##x ...

  6. 关于vim打开中文文件出现乱码问题

    中文字符编码问题. 在你的vi配置文件(~/.vimrc)里面添加一行: set fileencodings=ucs-bom,utf-8,cp936,gb18030,latin1 意思是让vim从 这 ...

  7. WordPress文件上传与下载问题解决

    网上流传了一些修改WordPress文件上传大小限制的做法,大部分是一个版本,而且说得不够准确,特别是对于生手的指导性不强,本文总结了使用Wordpress博客的朋友在文件上传与下载时大小限制,及文件 ...

  8. 使用GitHub管理源代码

    作为一个开发员,源码的管理是一个头等大事来的,想象一下,修改完成却发现文件丢失了,该怎么办?有了源代码管理工具,能够帮助我们查看某个代码文件的修改内存及历史修改记录. 作为.Net开发员,我使用过VS ...

  9. apache启动目录(禁止目录)与设置默认入口文件的方法

    设置默认入口文件的方法: 打开apache的conf目录,找到httpd.conf文件,打开这个文件,搜索dir_module,找到以下截图修改位置进行修改,注意重启apache服务器,修改位置才会生 ...

  10. 配置nginx如果获取不到图片 去另外一台服务器获取

    配置nginx服务器从一台服务器如果获取不到图片 从另外一台服务器中获取 location ^~ /uploads/ { root /data/weiwend/weiwang; try_files $ ...