JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)


Posted in Javascript onSeptember 05, 2016

一、函数作用域

1.函数作用域

就是作用域在一个“Function”里,属于这个函数的全部变量都可以在整个函数的范围内使用及复用。

function foo(a) {
var b = 2;
function bar() {
// ...
}
var c = 3;
}
bar(); // 失败
console.log( a, b, c ); // 三个全都失败

上面的“foo”函数内的几个标识符,放到函数外面访问就都会报错。

2.立即执行函数表达式

在任意代码片段外部添加包装函数,可以将内部的变量和函数定义“隐藏”起来,外部作用域无法访问包装函数内部的任何内容。

例如上面的bar、a等几个标识符。这样能够保护变量不被污染。

在写插件的时候经常会用到立即执行函数表达式,为的就是保护里面的变量。

var a = 2;
(function foo() {
var a = 3;
console.log( a ); // 3
})();
console.log( a ); // 2

“foo”中第一个( )将函数变成表达式,第二个( )执行了这个函数。

有一个专用术语:IIFE,代表立即执行函数表达式(Immediately Invoked Function Expression);

1. 进阶用法是把它们当作函数调用并传递参数进去

(function IIFE( global ) { 
var a = 3;
console.log( a ); // 3
console.log( global.a ); // 2
})( window );

2. 一种变化的用途是倒置代码的运行顺序,在CMD或AMD项目中被广泛使用。

(function IIFE(factory) {
factory( window );
})(function def( global ) {
var a = 3;
console.log( a ); // 3
console.log( global.a ); // 2
});

二、块作用域

JavaScript不支持块作用域。

for(var i=0; i<10; i++) {
console.log( i );
}

上面的代码中的“i”相当于下面的

var i;
for(i=0; i<10; i++) {
console.log( i );
}

但也有例外,“try/catch”,catch就是一个块作用域。

try{
undefined(); // 执行一个非法操作来强制制造一个异常 
} 
catch(err) {
console.log( err ); // 能够正常执行!
}
console.log( err ); // ReferenceError: err not found

ES6改变了现状,引入了新的let关键字,let关键字可以将变量绑定到所在的任意作用域中(通常是{ .. }内部)。换句话说,let为其声明的变量隐式地了所在的块作用域。

三、提升

函数作用域和块作用域的行为是一样的,可以总结为:任何声明在某个作用域内的变量,都将附属于这个作用域。

1)编译与执行

变量和函数的所有声明都会在任何代码被执行前首先被处理,可以看下面的代码事例。

a = 2;
var a;
console.log(a);//2

这段代码等价于:

var a;//定义声明是在编译阶段进行
a = 2;//赋值声明会被留在原地等待执行阶段
console.log(a);

2)函数优先

函数会首先被提升,然后才是变量。

foo(); // 1
var foo;
function foo() {
console.log( 1 );
}
foo = function() {
console.log( 2 );
};

var foo函数表达式尽管出现在function foo()的声明之前,但它是重复的声明(因此被忽略了),因为函数声明会被提升到普通变量之前。

而上面的代码相当于:

function foo() {
console.log( 1 );
} 
foo(); // 1
foo = function() {
console.log( 2 );
};

四、闭包

闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,
通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域,将函数内部的变量和方法传递到外部

闭包的特性:

1.函数内在嵌套函数

2.内部函数可以引用外层的参数和变量

3.参数和变量不会被垃圾回收机制回收

1)定义

当函数可以记住并访问所在的作用域时,就产生了闭包,即使函数是在当前作用域之外执行。

function foo() {
var a = 2;
function bar() { 
console.log( a );
}
return bar;
}
var baz = foo();
baz(); // 2 —— 这就是闭包的效果。

1. 将函数“bar”赋值给“baz”,执行“baz”,当前作用域并不在“bar”的作用域,但是可以执行。

2. 闭包还会阻止垃圾回收,当“foo”执行完后,内部作用域仍然存在。这样才能让“baz”执行。

2)将函数作为参数传递

function foo() {
var a = 2;
function baz() {
console.log( a ); // 2
}
bar( baz );
}
function bar(fn) {
fn(); //这就是闭包!
}

把内部函数baz传递给bar,当调用这个内部函数时(fn),它涵盖的foo()内部作用域的闭包就可以观察到了,因为它能够访问a。

如果将函数当作第一级的值类型并到处传递,你就会看到闭包在这些函数中的应用。

在定时器、事件监听器、Ajax请求、跨窗口通信、Web Workers或者任何其他的异步(或者同步)任务中,只要使用了回调函数,实际上就是在使用闭包!

3)循环和闭包

for (var i = 1; i <= 5; i++) {
setTimeout(function timer() {
console.log(i);
}, i * 1000);
}

每次打印出来都将会是6,延迟函数的回调会在循环结束时才执行

根据作用域的工作原理,实际情况是尽管循环中的五个函数是在各个迭代中分别定义的,但是它们都被封闭在一个共享的全局作用域中,因此实际上只有一个i。

现在用闭包来实现每次打印不同的i。

for (var i = 1; i <= 5; i++) {
(function(j) {
setTimeout(function timer() {
console.log(j);
}, j * 1000);
})(i);
}

IIFE会通过声明并立即执行一个函数来创建作用域。setTimeout中的回调可以记住当前的作用域,每个作用域中的参数“j”都是不同的。

以上所述是小编给大家介绍的JavaScript中最容易混淆的作用域、提升、闭包知识详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
通过JAVAScript实现页面自适应
Jan 19 Javascript
页面使用密码保护代码
Apr 10 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
vue实现分页的三种效果
Jun 23 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 #Javascript
Vue表单实例代码
Sep 05 #Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 #Javascript
JS实现的手机端精简幻灯片效果
Sep 05 #Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 #Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 #Javascript
AngularJS实现标签页的两种方式
Sep 05 #Javascript
You might like
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
JsRender实用入门教程
2014/10/31 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
实例浅析js的this
2016/12/11 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
React如何避免重渲染
2018/04/10 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
python实现给数组按片赋值的方法
2015/07/28 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
工程造价专业大学生职业规划范文
2014/03/09 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
师德师风自查材料
2014/10/14 职场文书
叶问观后感
2015/06/15 职场文书
城南旧事电影观后感
2015/06/16 职场文书
关于环保的宣传稿
2015/07/23 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
人民调解协议书
2016/03/21 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书