做用域与做用域链

什么是做用域

就是一块"地盘", 一个代码段所在的区域,它是静态的(相对于上下文对象), 在编写代码时就肯定了

做用域分类：全局做用域, 函数做用域, 没有块做用域(ES6有了)

做用域的做用是隔离变量，不一样做用域下同名变量不会有冲突

var a = 10,
  b = 20
function fn(x) {
  var a = 100,
    c = 300;
  console.log('fn()', a, b, c, x) // fn() 100 20 300 10
  function bar(x) {
    var a = 1000,
      d = 400
    console.log('bar()', a, b, c, d, x)
  }

  bar(100) // bar() 1000 20 300 400 100
  bar(200) // bar() 1000 20 300 400 200
}
fn(10)

 

 

 

做用域与执行上下文

全局做用域以外，每一个函数都会建立本身的做用域，做用域在函数定义时就已经肯定了。而不是在函数调用时

全局执行上下文环境是在全局做用域肯定以后, js代码立刻执行以前建立

函数执行上下文环境是在调用函数时, 函数体代码执行以前建立

做用域是静态的, 只要函数定义好了就一直存在, 且不会再变化；上下文环境是动态的, 调用函数时建立, 函数调用结束时上下文环境就会被释放

联系:上下文环境(对象)是从属于所在的做用域:全局上下文环境==>全局做用域,函数上下文环境==>对应的函数使用域

var a = 10,
  b = 20
function fn(x) {
  var a = 100,
    c = 300;
  console.log('fn()', a, b, c, x)
  function bar(x) {
    var a = 1000,
      d = 400
    console.log('bar()', a, b, c, d, x)
  }

  bar(100)
  bar(200)
}
fn(10)

 

 

 

做用域链

多个上下级关系的做用域造成的链, 它的方向是从下向上的(从内到外)

查找变量时就是沿着做用域链来查找的

查找一个变量的查找规则

在当前做用域下的执行上下文中查找对应的属性, 若是有直接返回, 不然进入2

在上一级做用域的执行上下文中查找对应的属性, 若是有直接返回, 不然进入3

再次执行2的相同操做, 直到全局做用域, 若是还找不到就抛出找不到的异常

var a = 2;
function fn1() {
  var b = 3;
  function fn2() {
    var c = 4;
    console.log(c); // 4
    console.log(b); // 3
    console.log(a); //2
    console.log(d); // 报错：d is not defined
  }

  fn2();
}
fn1();

 

 

做用域测试题

var x = 10;
function fn() {
  console.log(x); // 10，由于fn的做用域再也不show方法里，定义方法的时候做用域就肯定了
}
function show(f) {
  var x = 20;
  f();
}
show(fn);

var fn = function () {
  console.log(fn) // 输入函数自己
}
fn()

var obj = {
  fn2: function () {
    console.log(obj.fn2) // 这样才是找obj对象下的fn2
    console.log(this.fn2) // 这样才是找obj对象下的fn2

    // 报错：fn2 is not defined，先在这个方法里面找fn2,若是没有在外部做用域（window）找
    console.log(fn2)
  }
}
obj.fn2()

var fn = function () {
console.log(fn)
}
fn() // function定义，总共有两个做用域：函数内部和全局上，函数内部没有，找到全局有，因此打印出fn函数的定义

var obj = {
fn2: function () {
  console.log(fn2)
  // 想输出fn2属性的值
  // console.log(this.fn2) // obj.fn2也行, 但比较死
}
}
obj.fn2() //报错，也是两个做用域函数内部和全局的，函数内部没有，全局也没有因此fn2是没有定义的，结果是报错的