JavaScript核心技术开发解密读书笔记(第五章)

第五章 作用域与作用域链

1. 作用域

常见的作用域有两种,全局作用域和函数作用域。ES6中新增了块级作用域。
全局作用域中声明的变量与函数可以在代码的任何地方被访问。全局作用域有以下三种情形:
1)全局对象下拥有的属性与方法

window.name;
window.location;
window.top;
……

2)在最外层声明的变量与方法

var foo = function () {}
var str = 'out variable';
var arr = [1, 2, 3];
function bar () {}

3)在非严格模式下,函数作用域中未定义但直接复制的变量与方法(没看懂)

function foo () {
  bar = 20;
}
function fn () {
  foo();
  return bar + 30;
}
fn(); // 50

函数作用域中声明的变量与方法,只能被下层子作用域访问,而不能被其他不相干的作用域访问。

function foo () {
  var a = 20;
  var b = 30;
}
foo();
function bar () {
  return a + b;
}
bar(); // Uncaught ReferenceError

因为作用域的限制,bar中无法访问变量a和b,因此函数执行报Uncaught ReferenceError。

function foo () {
  var a = 20;
  var b = 30;
  function bar () {
    return a + b;
  }
  return bar();
}
foo(); // 50

bar中作用域为foo的自作用域,因此能访问到变量a和b。
块级作用域通过ES6新增的let和const来体现。

function f1 () {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

上面的函数有两个代码块,都声明了变量n,运行后输出5,这表示外层代码块不收内层代码块的影响。如果两次都使用var定义变量n,最后输出的值才是10。

2. 立即执行函数(Immediately Invoked Function Expression, IIFE)

块级作用域出现前,常使用IIFE去模拟块级作用域。

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

由于函数被包含在一对括号内部,因此成为了一个表达式,通过在末尾加上了另外一个括号可以立即执行这个函数。
IIFE另一个皮鞭的进阶用法是把它们当做函数调用并传递参数进去。

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

我们将window对象的引用传递进去,但将参数命名为global,因此在代码风格上对全局对象的引用变得比引用一个没有“全局”字样的变量更加清晰。了解更多块级作用域的知识,请点击这里

3. 作用域链

关于作用域链的知识,本书讲解不是很详细,我本人也理解的不是很好,回头再补上。

以上是我对JavaScript核心技术开发解密第五章的读书笔记,码字不易,请尊重作者版权,转载注明出处。
By BeLLESS 2018.6.30 15:11

    原文作者:BeLLESS
    原文地址: https://www.jianshu.com/p/48c3dd0565da
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞