JS作用域——三个黄金法则

词法作用域 VS 动态作用域

//在JS里，动态作用域和this机制息息相关。它的作用域诗是在运行的过程中确定的
var a = 1;

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

从上面的代码，我们可以看出：

foo中打印a的值不是由写代码的位置确定的，而是取决于foo执行的位置。

区别

• 词法作用域是在写代码或者说定义时确定的，而动态作用域是在运行时确定的。(this 也是!)
• 词法作用域关注函数在何处声明，而动态作用域关注函数从何处调用。

黄金法则1：

外面的访问不到里面的，而函数内部的可以访问外部变量！
沿着作用域一级一级往上找！最外面的是全局作用域。

黄金守则2：

变量的查找是就近原则，去寻找var定义的变量，当就近没有找到的时候就去查找外层。

(这里需要提前了解一下 js预解析)

两个容易混淆的例子：

例1：

var a = 10;

function aaa() {
    console.log(a); // undefined，查找a的时候会先在函数内查找，由于预解析的作用，此时的a是undefined,因此永远不会去查找外面的10了
    var a = 20;
}
aaa();

结果 ： undefined

例2：

var a = 10;

function aaa() {
    console.log(a);     
    a = 20;
}
aaa();

结果: 10
原因:

黄金准则第二条——寻找var声明的变量。如果没有，就去外层；

例子3：

var a = 10;

function aaa() {
    a = 20;
    console.log(a);
}
aaa();

结果：20 输出之前已经执行 a=20了。

黄金守则3：

当参数跟局部变量重名时，优先级是等同的。

例子1:

var a = 10;

function aaa(a) {
    console.log(a);    
    var a = 20;
}
aaa(a);

结果： 10

传参时，基本类型传值，引用类型传引用。（但是重新赋值之后就不是这样了喔）

例子2

var a = [1, 2, 3];
var b = a;
var c = a;
b.push(4);
c=[5,6,7,8,9]
console.log('a:',a); //[1,2,3,4];
console.log('b:',b); //[1,2,3,4];
console.log('c:',c); //[5, 6, 7, 8, 9];

原因：c是引用类型，但是被重新赋值了。