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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/singsingasong/article/details/79971977

词法作用域 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是引用类型,但是被重新赋值了。

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页