【初始】JavaScript基础之作用域和作用域链

作用域是JavaScript最重要的概念之一，打好JavaScript的基础就要理解作用域和作用域链的原理。

作用域，简单来说其实就是变量、函数、对象的访问规则的有效范围。

可能文字不太好理解，先看一个经典的例子帮助我们建立作用域这个概念：

function fun() {

var str= "我是内层变量";

}

fun2();//要先执行这个函数，否则根本不知道里面是啥

console.log(str); // inVariable is not defined

变量str在函数fun里面声明，那么我们在函数外面调用就会报错，因为变量str没有在全局作用域声明。

那么以下代码是成立的

function fun() {

var str= "我是内层变量";

console.log(str)//"我是内层变量"

}

var str=“我是全局变量”

console.log(str)//"我是全局变量"

由此可以看出，作用域最大的作用就是隔离变量，不同作用域下相同的变量名不存在冲突。

全局作用域和局部作用域

全局作用域：在任何地方都能访问到的变量、函数、对象 拥有全局作用域。

1.在js文件中直接定义的变量，最外层的函数。

var str="我是最外层变量"；

function fun(){

console.log("我是最外层函数");

}

2.未定义直接赋值的变量会拥有全局作用域。

function fun(){

    str="我是未声明直接赋值的变量";

  var str1="我是在函数内部声明的变量";

fun();

console.log(str);

console.log(str1);

}

 fun();//"我是未声明直接赋值的变量"; "我是在函数内部声明的变量";

console.log(str);//"我是未声明直接赋值的变量";

console.log(str1);//str1 is not defined

【注】这点刚开始有点没法接受，但是熟悉之后就能辨别出来，可能这是JS的特别之处。

3.window是天然存在的全局对象，它存储了JS中所有全局数据。

window.alert()      window.parseInt()   等等

分析：看了上述例子，我们不难发现，全局作用域的弊端-不灵活，如果我们写了很多全局作用域的代码，那么它的命名将会是复杂的，容易引起冲突。

局部作用域：与全局作用域相反，局部作用域就是在固定的代码片段生效。函数作用域就是典型的局部作用域。

 function fun(){

  var str="我在函数内";

}

fun();

console.log(str)//str is not defined

作用域还有一个特点，相对来说，内部作用域的可以访问外部作用域的变量，反之不行。

 var  str="我是全局变量"

   function fun(){

   console.log(str);

}

 fun();//"我是全局变量"

作用域链：

课程中简单解释了概念：内部函数访问外部函数变量，采用的是链式查找的方式来决定取那个值，这种结果我们称为作用域链。

看一个简单的例子：

 var   a=100；

function fn(){

    console.log(a);

}

fn();//100;

其实也存在一些特殊情况，这种情况能更加深入帮我们了解作用域中自由变量的取值。

var a=100；

function  fn()

{

      console.log(a);

}

function fn2(fn){

   var  a=200;

    fn();

}

fn2(fn);//100

对于自由变量的赋值，我们常常会说到父作用域中取值，但是针对于上面这种情况，显然是不成立的。

那么，在上述例子中，fn函数中，x的值到底到哪个作用域中取呢？

答案是，要到创建fn函数的那个作用域中取，无论fn函数在何处被调用。

作用域中取值,这里强调的是“创建”，而不是“调用”。

关于作用域和作用域链呢，因为我接触的还少，目前我可以接触到并接受的，就是以上内容，如果有更深层次的内容，欢迎补充