《你不知道的JavaScript》整理(一)——作用域、提升与闭包

简介:

最近在读一本进阶的JavaScript的书《你不知道的JavaScript(上卷)》,里面分析了很多基础性的概念。

可以更全面深入的理解JavaScript深层面的知识点。

 

一、函数作用域

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)定义

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

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”都是不同的。

 


    本文转自 咖啡机(K.F.J)   博客园博客,原文链接:http://www.cnblogs.com/strick/p/5806427.html,如需转载请自行联系原作者




相关文章
|
27天前
|
前端开发 JavaScript 开发者
Web前端开发中的JavaScript闭包应用
JavaScript闭包是Web前端开发中常见的概念,它可以帮助开发者解决作用域问题,提高代码的可读性和可维护性。本文将介绍JavaScript闭包的基本概念和应用,以及如何在Web前端开发中使用闭包。
19 3
|
1月前
|
JavaScript 前端开发 安全
闭包治愈“全局变量恐惧症”,利用闭包实现JavaScript私有变量(三)
闭包治愈“全局变量恐惧症”,利用闭包实现JavaScript私有变量
|
1月前
|
存储 JavaScript 前端开发
闭包治愈“全局变量恐惧症”,利用闭包实现JavaScript私有变量(一)
闭包治愈“全局变量恐惧症”,利用闭包实现JavaScript私有变量
|
4天前
|
JavaScript 前端开发 Java
深入理解JavaScript中的闭包机制
闭包是JavaScript中一个重要且常用的概念,能够帮助我们更好地管理变量和函数作用域。本文将深入探讨JavaScript中闭包的原理及应用,帮助读者全面理解闭包在实际开发中的作用。
15 6
|
4天前
|
存储 自然语言处理 JavaScript
深入理解JavaScript中的闭包机制
闭包是JavaScript中一个重要且常见的概念,它能够帮助我们更好地管理变量作用域和实现数据封装。本文将深入探讨JavaScript中闭包的原理、应用场景以及优缺点,帮助读者更全面地理解和运用闭包机制。
|
5天前
|
JavaScript 前端开发 开发者
深入理解JavaScript中的闭包
闭包是JavaScript中一个重要且常用的概念,它能够帮助开发者有效地管理变量作用域并实现更灵活的编程功能。本文将深入探讨JavaScript中闭包的原理、使用方法以及常见应用场景,帮助读者更好地理解和运用闭包。
9 2
|
21天前
|
缓存 自然语言处理 JavaScript
10分钟带你深入理解JavaScript的执行上下文和闭包机制
JavaScript中的闭包源于计算机科学中的一种理论概念,称为“λ演算”(Lambda Calculus)。λ演算是计算机科学的基础之一,1930年由Alonzo Church提出,它是一种用于描述计算过程的数学抽象模型,也是函数式编程语言的基础。
|
21天前
|
缓存 自然语言处理 前端开发
JavaScript 闭包
JavaScript 闭包,是指函数可以访问其定义时所在的词法环境(lexical environment)中的变量,即使这个函数在其定义的词法环境之外执行。闭包是 JavaScript 中一个重要的概念,它使得
13 1
|
25天前
|
JavaScript
JS作用域(全局作用域+局部作用域)
JS作用域(全局作用域+局部作用域)
9 0
|
27天前
|
JavaScript 前端开发 开发者
深入理解JavaScript作用域与作用域链
深入理解JavaScript作用域与作用域链
29 0

相关产品

  • 云迁移中心