【跟着犀牛书复习JS基础】做用域、做用域链、闭包和执行上下文（this）

时间 2019-11-06

原文原文链接

引言javascript

能够说是取名废了，把这几个关键词放在一块儿也是由于看完犀牛书相关章节和不少技术文章以后以为这几个概念是相互渗透的，须要放在一块儿理解。而在这以前，我对这几个概念都是久闻其名，真正遇到了似懂非懂还很心虚，往往看完一篇零零散散的技术文章总以为明白了，可是下一次遇到了仍是不明白。这种其实充其量只能说记住了一些知识点碎片，而学习不能只是碎片，必须是找到碎片与碎片之间的关联与规律，才能将知识碎片连成完整的知识体系吃下去。因此，某位大佬说得对，有产出的学习才是真的学习，毕竟若是不是真的搞清楚了，你什么也写不出来，况且写一遍还能加深印象。若是你也有相似的状况，请重视起来，一块儿加油叭！java

本章对标犀牛书第6版3.9变量声明、3.10变量做用域和第8大章8.6以前的章节，以后两小节值得在后面的文章里更详细的单独研究！es6

变量声明和函数定义

你可能以为这过于基础了，但事实上若是忽略其中的一些细节会影响后面的理解。面试

变量声明

咱们知道在ES6以前，咱们一般用var关键字来声明一个或多个变量var i，sum;，还能够将变量的初始赋值和变量声明写在一块儿var i = 0, j = 1, k = 2;，若是没有在var声明语句中给变量指定初始值，那么虽然声明了变量，但在给他赋值以前，它的值就是undefined。segmentfault

若是试图读取一个没有声明的变量，会触发一个报错。在严格模式下，给一个未声明的变量赋值也会触发一个报错，在非严格模式下，给一个未声明的变量赋值，js实际上会给全局对象建立一个同名属性，使其工做起来像一个正常声明的全局变量。浏览器

var声明的属性是不可配置的，也就是不能够用delete操做符删除，而给未声明的变量赋值建立的全局对象同名属性是正常的可配置属性，是能够被删除的babel

函数定义

函数定义能够经过两种方式来进行：闭包

函数定义表达式 var func = function(){...};
函数声明function func(){...}

虽然二者都包含相同的函数名，都建立了一个新的函数对象，但仍是有所区别，区别就体如今声明提高的时候。ide

做用域和声明提高

全局做用域和函数做用域

ES6以前，JS是没有经常使用的不受约束的块级做用域的，只有全局做用域和函数做用域。全局做用域是顶级做用域，顾名思义，在顶级声明的全部变量全局中均可访问；函数做用域是指在函数内声明的全部变量在函数体内始终可见，包括嵌套函数内。以及，函数体内的局部变量优先级高于同名的全局变量，若是函数内声明的全局变量或函数参数带有的变量和全局变量同名，那么全局变量就被局部变量覆盖。例如：函数

var scope = 'global';
function f() {
  var scope = 'local';
  console.log(scope); //local 同名的全局变量被局部变量覆盖
  function f2() {
    console.log(scope); //local 函数体内声明的变量在嵌套函数内也可见
  }
  f2();
}
f(); 
复制代码

声明提高

正常状况下咱们认为js语句是由上到下一句一句执行的，这彻底没错，可是有一种状况会使咱们很迷惑。

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

console.log(a); //undefined
var a = 2; 
复制代码

实际上这是由于包括变量和函数在内的全部声明（但不涉及赋值）都会在如何代码被执行前也就是js的预编译阶段被首先处理，会被”提高“到相应做用域的顶部，这个过程就是声明提高，关于声明提高，咱们只须要注意如下几点：

函数声明也会被提高，但函数表达式不会。也就是说上述两种函数定义的方式，使用函数声明语句，函数变量名和函数体均会提高，但使用var的表达式，只是变量声明被提高，函数体会留在原来的位置等待执行；
```
f();

function f(){
  console.log(a);  //会被执行且输出undefined
  var a = 2;
}

f(); //TypeError f is not a function
var f = function bar() {
  console.log(a);  
  var a = 2;
}
复制代码
```

var定义的具名的函数表达式，函数名变量也不会被提高；

f(); //TypeError f is not a function
bar(); //ReferenceError: bar is not defined
var f = function bar() {
  console.log(a);  
  var a = 2;
}
//注意这里f()抛出的是TypeError而不是ReferenceError 是由于变量名已经被提高但没有被赋值，因此此时f是undefined，对undefined作调用执行，所以抛TypeError异常。
//这段代码实际上被编译成如下形式：
var f;
f(); //TypeError
bar(); //ReferenceError
f = function() {
  var bar = self;
  var a
  a = 2;
}
复制代码

函数声明优先，已知变量声明和函数声明都会被提高，若是同一做用域里有相同命名的函数声明和变量声明提高，函数声明优先。

foo();  // foo2
var foo = function() {
    console.log('foo1');
}

foo();  // foo1，foo从新赋值

function foo() {
    console.log('foo2');
}

foo(); // foo1

//这段代码实际上被形容成
function foo() {
  console.log('foo2');
}
foo();
foo = function() {
  console.log('foo1');
}
foo();
foo();
//尽管var foo出如今function foo(){..}以前，可是函数声明会被提高到普通变量声明以前，所以重复的声明会被忽略，但会被从新赋值。此外，后面的函数声明仍是能够覆盖前面的，好比：
foo(); // foo2
function foo() {
  console.log('foo1');
}
function foo() {
  console.log('foo2');
}
复制代码

条件语句中的函数声明：

这个东西迷惑了我很久！！！浪费个人时间！！！

MDN中的相关解释：developer.mozilla.org/zh-CN/docs/…

Segmentfault中回复楼的相关解释：segmentfault.com/q/101000000…

以及下面的（【阮一峰】ES6入门）中也有相关解释：【阮一峰】ES6入门

foo();
var a = true;
if(a) {
	function foo(){console.log('foo1')}
} else {
	function foo(){console.log('foo2')}
}
//理论上，这段代码会输出foo2
//经实验，实际上在大多数浏览器控制台里会抛出TypeError foo is not a function，在Safari里输出了foo2

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }
  f(); //TypeError foo is not a function
}());

//总之，在块级做用域和条件语句中声明函数，在不一样浏览器中解释的标准都不同，考虑到环境致使的行为差别太大，不要在块级做用域或条件语句中声明函数！！！
// 等我有时间了再来纠结这个吧。。。。。。不过感受遥遥无期。。。。。

复制代码

块级做用域

偷个懒~ 【阮一峰】ES6入门

注释一点：

绝大部分的文章里都提到在ES6以前，js中是没有块级做用域的，只有函数做用域和全局做用域，实际上，ES3中的try/catch语句中的catch语句就会建立一个块级做用域
try {
	throw 2
} catch (a) {
	console.log(a); //2
}
console.log(a);//Reference Error
复制代码
我试着在babel在线编译器里转换
{
	let a = 2;
	console.log(a);
}
console.log(a);
复制代码
可是获得的是
"use strict";

{
var _a = 2;
console.log(_a);
}
console.log(a);
复制代码

做用域链和闭包

做用域链

说做用域链先理解一下自由变量：当前做用域没有定义的变量即自由变量。如何访问到自由变量：向父级做用域寻找。若是父级做用域没有，则一层一层向上寻找，直到找到全局做用域，若是仍是没找到，则宣布放弃。

这个一层一层向上的层级关系，就是做用域链，它是一个对象列表。

只用记住一点：自由变量将从做用域链中去寻找， 依据的是函数定义时的做用域链，而不是函数执行时

function F1() {
    var a = 100
    return function () {
        console.log(a)
    }
}
var f1 = F1()
var a = 200
f1() //100
复制代码

闭包

当函数能够记住并访问函数体内的变量时，就造成了闭包，所以严格来讲每一个函数都是闭包。

注意三点：

同一个做用域链中的多个闭包共享私有变量或变量

function countFunc() {
	var funcs = [];
	for(var i = 0; i < 10; i++){
    funcs[i] = function (){ return i }
  }
  return funcs
}
countFunc()[0]() //10
//这段代码建立了10个闭包，可是都是在一个函数调用中定义的，所以它们共享变量i
复制代码

每次调用js函数的时候，都会建立一个新的做用域链

function counter() {
  var n = 0;
  return {
    counter: function() { return n++; },
    reset: function() { n = 0; }
  }
}
var c = counter();
var d = counter();
c.counter(); //0
d.counter(); //0 互不干扰
c.reset();  //重置c
c.counter(); //c的reset和counter共享n变量
复制代码

this是JS关键字而不是变量，每个函数调用都包含一个this值，若是闭包在外部函数中，是没法访问外部函数的this值的，arguments同理，虽然它不是关键字，可是调用函数时会自动声明它。

执行上下文this

记住大佬作的一张图就够了（侵删）：

小结

有点曲折的一章，被条件语句和块级做用域中的函数声明搞得头大。

后续须要补充：js编译执行机制，this详解，面试题详解