浅谈JavaScript作用域的概念，实际运行过程及this指向

这是我的第一篇博客，以后可能会在空余时间里把自己所学习到的知识分享给各位。

如果在博客中有技术性错误，希望大神们也可以指正我一下。

在平时的面向过程或面向对象编程行为模式下，我们通常的思维都是，程序都是从上往下走的。然而，在多次实践编写JavaScript中，会发现，其实JavaScript并不是从上往下进行识别的。

（在本篇博客中所有代码均为JavaScript代码）

如以下代码所示：

var t="2";
FN();
function FN(){
      var t; //4
      alert(t); //1
      t=2;
      alert(t);  //2
      alert(typeof t);  //3
}

 

经过运行会发现 标记1的弹出框会显示为undefined,第2处弹出2，第3处弹出内容为 number。

如果将标记为4的那一行删除，第1处则会弹出2（获取到了函数外部变量）.

这就是js的作用域了。

 

在了解了以上代码之后，我将为你介绍JS的运行模式。

 

在浏览器载入了一段JS代码之后，他首先并不会像平时的程序语言一样，由上至下去阅读，而是会先去寻找所有的定义语句。

例如 var t,function FN(){}这样的定义语句。当习得了所有的定义语句之后，他才会开始进入下一步操作，也就是执行语句。

我们将上部分代码再做一次修改，如下所示：

var x=1;
var y="2";
alert(Fn() + x);
function Fn(){
       var x=x+y;
       return x;
}

试着猜想一下，我们可以在弹出框内获得什么内容？？

 

 

 

 

按照我之前所说的JS运行规律，首先，JS会先去识别定义语句

1.定义

     var x

     var y

     function Fn(){}

 

2.执行

     x=1;

     y="2";

     Fn();   =============>进入这个函数之后，同样的，先定义再执行

                    1.定义

                     var x;

                    2.执行

                     x=x+y;    这里的x在var x定义之后并没有进行赋值

                             所以这里x为undefined，而y没有定义，调用外部，为字符2

                             拼接起来得x为undefined2

                     return x;  返回了"undefined2"  至此Fn方法执行结束

     alert( "undefined2"+1) 弹出内容应该为"undefined21"

 

 

接下去，我们来将作用域与this配合使用。请看以下代码：

var obj={
	num:2,
	add:function(){
		this.num=3;
		(function(){
			alert(this.num);
			this.num=4;
		})();
	}
};
obj.add();

在上边代码中主要调用了obj.add，然而add是一个函数体。

第4行中 this.num=3 的this指向了obj。

紧接之后有一个自执行的匿名函数，所有自执行函数中，所有没有指定指向的this，都将指向window。

而当执行到alert(this.num)的时候，window.num是undefined的，所以这次的alert将会弹出undefined。

好了，以上也就是javaScript作用域与实际运行过程的体现和部分this指向。相信你看到这里已经对它有了新的认识。

如果在我的博客文章中有新的收获，麻烦请点一下顶鼓励一下我

我将会在空余时间为各位分享更多的我所学习到的知识