JS高级<词法作用域和作用域链>

83 阅读1分钟

1.词法作用域

在js里只有全局作用域和函数作用域。函数一旦声明,作用域就确定好了。
函数的作用域只是声明有关,与调用无关,函数不关注在什么位置调用,只关注在什么位置声明
//Code example:
var num = 123
function f1() {
    console.log(num) // 输出123
  }

function f2() {
    var num = 456
        f1()
  }
    f2()

2.作用域链

作用域链:只要是函数,就会形成一个作用域,如果这个函数被嵌套在其他函数中,
那么外部函数也有自己的作用域,这个一直往上到全局环境,就形成了一个作用域链。

变量搜索原则:
1.  从当前作用域开始查找是否声明了该变量,如果存在,那么就直接返回这个变量的值。
2.  如果不存在,就会往上一层作用域查询,如果存在,就返回。
3.  如果不存在,一直查询到全局作用域,如果存在,就返回。如果在全局中也没有找到该变量会报错

// Code example1: 
var num = 10;
fn1();
function fn1() {
  console.log(num);  // 输出undefined
  var num = 20;
  console.log(num);  // 输出20
}
console.log(num);    // 输出10


// Code example2: 
var num = 10;
fn1();
function fn1() {
  console.log(num);  // 输出10
  num = 20;
  console.log(num);  // 输出20
}
console.log(num);    // 输出20


// Code example3:
var num = 123
function f1(num) {
    console.log(num) // 输出456
}

function f2() {
    var num = 456
    f1(num)
}
f2()


// Code example4:
var num1 = 10;
var num2 = 20;
function fn(num1) {
  num1 = 100;
  num2 = 200;
  num3 = 300;
  console.log(num1); //输出100
  console.log(num2); //输出200
  console.log(num3); // 输出300
  var num3;
}
fn();
console.log(num1); //输出10
console.log(num2); //输出200
console.log(num3); //报错 “Uncaught ReferenceError: num3 is not defined”