javascript基础之 作用域和上下文 简单笔记

学习笔记，仅供参考，如有编误，望告知

通俗讲 作用域定义：

• 作用域：就好像分封给一块土地，省，市，县，乡。而作为县长所发布的政令，只能作用于县和乡一级别，而市一级别却没有用。
• 上下文：上下文就要根据作用域而言了，也就是说，你在乡一级别想要申请粮食，就要先在自己的乡找看有没有，如果没有，那就向县申请，如果县也没有，那就向市申请。
  但是，如果县没有粮食，不可以向乡去申请，只能向市，省去申请。

用代码来解释就是：

// 定义省级作用域
var  command = '这是province政令';
var name = 'province';

// 定义一个市级作用域
function city () {           //一个函数作用域，或者说一个块级作用域
  // 上下文获取command
  console.log(command) ;     //这是province政令
  var name = 'city' ;
  //定义一个city的政令
  var cityCommand = '这是city的政令';
  // 定义一个乡村作用域
  return function village () {
    var name = 'village'
    console.log(command)  //这是province政令
    console.log(name)    //village
  }
}
city()(); //执行测试
// 省级作用域想执行市级作用域的政令
console.log(cityCommand)  //cityCommand is not defined "ityCommand 未定义"

• 红皮书说的很透彻。
  实际问题(主要是作用域)：

<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
<script>
  var lis = document.querySelectorAll('li');
  var ps = document.querySelectorAll('p');
  for(var i = 0 ; i<lis.length;i++){
    lis[i].onclick=function () {
      console.log(i)   //3
    }
  }
</script>
//其实在for运行的时候，每运行一次，就有一个作用域，但是 i 是全局变量
//所以for运行之后，全局 i 变成 3，所以打印的就是 3 

// 修改如下 es5
<script>
  var lis = document.querySelectorAll('li');
  var ps = document.querySelectorAll('p');
  for(var i = 0 ; i<lis.length;i++){
    lis[i].index = i  //将 i 存起来
    lis[i].onclick=function () {
      console.log(this.index)   //就是每次的 i 了
    }
  }
</script>
// es2015或者说 es6
<script>
  var lis = document.querySelectorAll('li');
  var ps = document.querySelectorAll('p');
  for(let i = 0 ; i<lis.length;i++){
    lis[i].onclick=function () {
      console.log(i) 
    }
  }
</script>
//其中 let 为块级作用域 ，es2015新特性

面试问题：
1）上下文一般配合着 this 出题，就是 加一个 console.log(this.name),扰乱你的想法。
2）var function let 有的会出现考题，考察声明提前，块级作用域，还有就是变量前什么都不加 name = ’雨涵‘ ，考考你这个name到底声明到哪里。

(实际开发的少，也就是有些面试有可能会出)

var c = '2'
function a () {
    console.log(c)        // ???
    var c = '3'
    function b () {
        c = '1'
        console.log(c)  // ???
        c = '4'
    }
    b()
    console.log(c)  // ???
}
a()
console.log(c)  // ???

友情提示：把不会的东西(有点深度，或者卡了许久的问题)记录下来，如果哪天碰到一个给你讲东西的面试官，你就发达了。