javascript进阶系列专题:作用域与作用域链

时间:2022-04-21 22:16:47

字面意思,作用域是指变量和函数的作用范围,换言之,作用域决定了变量和函数的可见性和有效时间。javascript作用域是用函数来区分,与其他语言的大括号不同。

for (var i=0; i<5; i++){
var mystring = "平底斜";
console.log(i);
}
alert(mystring);//弹出"平底斜"

这段代码在javascript中运行正常,在其他语言中就会报错。这是因为javascript的作用域是基于函数,而不是大括号。

作用域分为全局作用域和局部作用域。

有三种情况会出现全局作用域:

1、最外层定义的变量和函数

var mystring = "平底斜";
function fun(){
alert("Hello World");
}

变量mystring和函数fun()拥有全局作用域,在任何位置都可以直接调用。

2、未定义的变量

function fun(){
var a=b=0;
mystring = "平底斜";
console.log(mystring);
}
fun();
alert(b);

变量mystring没有使用var进行变量声明,所以即使在函数内部也是全局变量。容易忽略的是变量b,看上去使用var进行了声明,实际上只对变量a进行了声明,等同于

function fun(){
var a=(b=0); //自右向左赋值
mystring = "平底斜";
console.log(mystring);
}

一个JS文件中应该尽可能少的出现全局变量,最佳实践是使用var进行变量声明,并且在声明的同时进行赋值。

function fun(){
var a=0, b=1, c=2; //等同于var a=0; var b=1; var c=2;
}
fun();
alert(c); //脚本报错,因为c是局部变量

3、全局对象window

var mystring = "平底斜";
console.log(mystring);
console.log(window.mystring);
console.log(window["mystring"]);
console.log(this.mystring);
console.log(this["mystring"]);//此处this就是window,针对this以后会专题讲解

全局变量都可以看做window的属性,使用方法就如以上代码:可以用"."也可以用"[]"甚至可以省略window

局部变量只有一种情况:在函数内部声明的变量拥有局部作用域

function fun(){
var mystring="平底斜"; //局部变量
console.log(mystring);
}
fun();
console.log(mystring); //脚本报错

冷知识:

全局变量中,使用var声明与不使用var是有区别的,var声明的变量无法删除,未声明的变量可以删除。

var mystring="平底斜";
newstring = "博客园";
delete mystring;
delete newstring;
console.log(mystring); //"平底斜"
console.log(newstring); //脚本报错

作用域链由内向外查找变量,在内部找到变量便停止查找,否则往上一层作用域查找,直到最外层都没有找到变量则返回undefined

var myscope = "平底斜";
function fun(){
var myscope = "博客园";
console.log(myscope); //"博客园"
}
fun();

上面这段代码,就是因为作用域链有内向外,先在函数内部查找myscope,找到了就直接返回该变量值,并停止查找。

易错点:

var myscope = "平底斜";
function fun(){
console.log(myscope); //脚本报错
var myscope = "博客园";
console.log(myscope); //"博客园"
}
fun();

声明变量会在当前作用域中置顶,又叫变量提升或者声明置顶。以上代码等同于:

var myscope = "平底斜";
function fun(){
var myscope;
console.log(myscope); //脚本报错
myscope = "博客园";
console.log(myscope); //"博客园"
}
fun();

需要注意的是变量提升是在函数定义时发生,并不是在函数调用时:

var myscope = "平底斜";
function fun1(){
console.log(myscope);
}
function fun2(){
var myscope = "博客园";
fun1();
}
fun2(); //"平底斜"

如上,fun2()调用fun1()时,是先在fun1()中搜索myscope,找不到时再到父级作用域中查找。作用域的嵌套关系是在定义时产生,而不是在调用的时候。