深远浅析javascript中的作用域,详解js的成效域

By admin in web前端 on 2019年7月9日

所谓的作用域,可以简单理解为一个可以读、写的范围(区域),有些js经验的同学可能会说:”js没有块级作用域”,js除了全局作用域外,只有函数可以创建作用域。作用域的一个好处就是可以隔离变量。

深入浅析javascript中的作用域(推荐),浅析javascript

所谓的作用域,可以简单理解为一个可以读、写的范围(区域),有些js经验的同学可能会说:”js没有块级作用域”,js除了全局作用域外,只有函数可以创建作用域。作用域的一个好处就是可以隔离变量。

我们通过一些例子来帮助我们理解js中的作用域。

 alert(a);
 var a = 1; 

如果对作用域一点不了解的同学可能会说
alert的是1或者报错;但实际上是undefined;

说到这里,我们首先说一下js逐行解析代码之前做的一些准备工作,

js在逐行读代码之前,会做一些“预解析”工作,会先提前找到一些”小东西”,当然”js解析器“不会随便找一些数据的,它会根据var,function,参数来找。

”js解析器“它比较”懒“,在正式运行代码之前都会给var声明的变量赋值为undefined,也就是var
a =
undefined;会把整个函数看作一个代码块,不去管里边有多少代码。参数等到后边例子中会说。

当所有准备工作都做好后,“JS解析器”就开始逐行执行代码了,现在我们来分析开始的这个例子就很容易明白为什么是undefined了。

再来看下边这个例子

 alert(a);
 var a = 1;
 alert(a);
 var a = 2;
 alert(a); 

我们来一点点分析这个

首先 ”预解析“: 解析器会找var

读到第二行时 a = undefined;

读到第四行时 依然 a = undefined;

正式逐行执行代码:

第一行 alert:undefined 

第二行 a = 1;

第三行 alert:1;

第五行 alert:2

接着看下边这个例子

 alert(a); 
 var a = 1;
 alert(a); 
 function a (){ alert(2); }
 alert(a); 
 var a = 3; 
 alert(a); 
 function a (){ alert(4); }
 alert(a);

我们依然来一点点分析这个

首先 ”预解析“: 解析器会找var function;

读到第二行时 a = undefined;

读到第四行时 a = function a (){ alert(2);}
//所有的函数,在正式运行代码之前,都是整个函数块;变量遇到重名的,只留一个变量,如果变量和函数重名,就只留下函数。

读到第六行时,a = function a (){ alert(2);}

读到第八行时,a = function a (){ alert(4);}

正式逐行执行代码:

第一行 alert: function a (){ alert(4);} 

第二行 a = 1; //表达式可以修改预解析的值!

第三行 alert:1;

第四行 函数没有调用,略过;

第五行 alert:1;

第六行 a = 3;

第七行 alert:3

第八行 函数没有调用,略过;

第九行 alert:3

如图所示:

web前端 1

继续看例子:

var a = 1;
function fn1(){
 alert(a); //undefined   
 var a = 2;
}
fn1();
alert(a); //1

首先 ”预解析“: 解析器会找var function

读到第一行时 a = undefined;

读到第二行时 fn1 = function fn1 (){alert(2);var a = 2;}

正式逐行执行代码: 第一行 a = 1;

第六行 函数调用,进入函数作用域 在函数作用域内依旧是先预解析,再逐行执行

  函数内预解析:a = undefined;

  执行:alert:undefined;

  a = 2; //此时的a仅为函数作用域中的a,不会影响全局中的a

函数执行完毕,回到全局作用域;

第七行 alert:1;

继续:

var a = 1;
function fn1(){
 alert(a); //1  
 a = 2;
}
fn1();
alert(a); //2

这个例子上边那个例子唯一的区别就是函数中的a没有var,只分析其中关键的地方

在函数作用域中 第三行alert(a),由于函数中没有var
a,所以”解析器”会到函数的作用域的上一级作用域去寻找a(作用域上下级关系的确定就看函数是在哪个作用域下创建的,在哪个作用域下创建,就是哪个作用域的下级),此时函数的上一级是全局作用域,在全局作用域中,a
= 1,所以此时第三行 alert:1,接着第四行,a =
2赋值,依然是函数作用域中没有a,
所以在上一级作用域,也就是全局作用域中找到a,修改全局作用域中的a,
所以会使全局作用域中的a = 2, 因此第七行 alert:2;

这点要理解清楚,注意有无var的区别。

接着来:

 var a = 1;
 function fn1(a){
 alert(a); //undefined 
 a = 2;
 }
 fn1();
 alert(a); // 1

这个例子和上一个的区别就是多了个参数,参数的作用相当于局部变量,也就是在函数中预解析会有var
a = undefined,所以第三行 alert:undefined,第四行 a = 2
改的是函数作用域中的a,不影响全局中的a,第七行alert:1;

接着:

var a = 1;
function fn1(a){
alert(a); // 1
a = 2;
}
fn1(a);
alert(a); // 1

这个例子又与上一个有些区别,在第六行函数调用时传了个实参进去,第六行函数实参的a是全局变量a
= 1的1,函数执行时,第二行 a = 1,所以第三行alert:1,第七行alert:1。

注意这几个例子之间的区别,别混淆了。

再来一个:

var a = 1;
function en(){
var a = 2;
fn();
}
function fn(){
alert(a); //1
}
en();

fn中的a未声明,要到创建这个函数的那个作用域中取值——是“创建”,而不是“调用”这个函数的作用域中。

PS:JavaScript中的作用域和上下文概念

javascript中的作用域(scope)和上下文(context)是这门语言的独到之处,这部分归功于他们带来的灵活性。每个函数有不同的变量上下文和作用域。这些概念是javascript中一些强大的设计模式的后盾。然而这也给开发人员带来很大困惑。下面全面揭示了javascript中的上下文和作用域的不同,以及各种设计模式如何使用他们。

上下文 vs 作用域

首先需要澄清的问题是上下文和作用域是不同的概念。多年来我注意到许多开发者经常将这两个术语混淆,错误的将一个描述为另一个。平心而论,这些术语变得非常混乱不堪。

每个函数调用都有与之相关的作用域和上下文。从根本上说,范围是基于函数(function-based)而上下文是基于对象(object-based)。换句话说,作用域是和每次函数调用时变量的访问有关,并且每次调用都是独立的。上下文总是关键字
this 的值,是调用当前可执行代码的对象的引用。

以上所述是小编给大家介绍的javascript中的作用域(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对帮客之家网站的支持!

所谓的作用域,可以简单理解为一个可以读、写的范围(区域),有些js经验的同学可能会说…

虽然,ES6在我们工作中应用得越来越广泛,但是还是很多项目保留着ES5的写法,所以,今天,带着大家重新巩固下ES5下的作用域及预解析机制。

我们通过一些例子来帮助我们理解js中的作用域。

概念:

作用域:域,指的是一个空间、范围、区域,作用指的是在域内可进行读写操作。一个变量的作用域是程序源代码中定义的这个变量的区域。

在ES5中,只存在全局和函数级作用域,在ES6中,引入了块级作用域,js的预解析机制大概分为两个过程:预解析和自上而下逐行解读

预解析:js解析器会先把var定义的变量、function、参数等一些东西存储进仓库里面(内存)。变量var在正式运行之前,都赋值为undefined,function函数在运行之前,就是整个函数块

 alert(a);
 var a = 1; 

逐行解读

表达式=、+、-、*、/、++、–、!、%…..number()、参数都可以赋值

遇到重名的,只留下一个,变量和函数重名,函数优先级高于变量,只留下函数

函数调用(函数是一个作用域,遇到作用域都会按照先进行预解析,然后逐行解读的过程执行),先局部找参数,局部找不到就自下向上找(作用域链)

概念扯了一大段,估计初学者还是有点晕乎乎,老司机就可以提前下车了,接下来,咋们举几个小栗子,结合上面的理论,深入理解。

如果对作用域一点不了解的同学可能会说
alert的是1或者报错;但实际上是undefined;

实践

例1:

alert(a); //error: a is not defined
a = 3;

分析:

预解析

上面说过,预解析时只会把var 、 function 、参数等存储起来,所以:

整个作用域没有找到var function 参数

逐行解读

预解析后,内存中存在a且被赋值了underfind整个变量,所有,代码执行过程中程序直接报错。

例2:

alert(a); //undefined
var a = 3;

分析:

预解析

上面说过,预解析时只会把var 、 function 、参数等存储起来,所以:

执行到第二行时,a 的值是未定义。

逐行解读

第一行:预解析后,内存中存在a且被赋值了underfined

例3:

alert(a);          // function a (){ alert(4); }
var a = 1;
alert(a);          // 1
function a (){ alert(2); }
alert(a);          // 1
var a = 3;    
alert(a);          // 3
function a (){ alert(4); }
alert(a);          // 3

分析:

域解析

上面说过,预解析时只会把var 、 function 、参数等存储起来,所以:

执行到第二行时,a 的值是未定义。

执行到第四行时,a 的值是函数本身,也就是function a(){alert(2);}。

执行到第六行时,a 的值还是第四行时的值,也就是function
a(){alert(2);},因为函数的优先级比变量高。

执行到第八行时,a 的值就变成了function a(){alert(4);}
,因为当两个函数重名时,遵循代码从上往下执行。

逐行解读

预解析完成之后,就是代码逐行执行了,

第一行:会弹出function a(){alert(4);}
,因为预解析完成之后,被存进内存的a 的值就是function a(){alert(4);}

第二行:第二行里有表达式,a 被赋了一个新的值1
表达式会改变变量的值。表达式可以改变预解析的值。

第三行:a现在被赋值为1,所有会弹出1

第四行:只是函数的声明,并没有用到表达式,而且也没有函数的调用,所以不会改变a
的值。

第五行:因为a的值没有变化,所以还是1

第六行:使用了表达式,a 被赋了一个新的值3

第七行:会弹出3

第八行:函数的声明,不会改变a 的值。

第九行:a的值没有改变,所以还是3

通过上面的栗子,相信大家应该对变量作用域的预解析过程有一定的了解了,接下来,咋们再举几个函数作用域的栗子

例4:

var a=1;
function fn1(){
  alert(a); //undefined
  var a = 2;
}
fn1();
alert(a) //1

例5:

var a=1;
function fn1(a){
  alert(a); //1
  var a = 2;
}
fn1(a);
alert(a) //1

例6:

var a=1;
function fn1(a){
  alert(a); //1
  a = 2;
}
fn1(a);
alert(a) //1

例7:

var a=1;
function fn1(){
  alert(a); //1
  a = 2;
}
fn1(a);
alert(a) //2

这几个栗子想必不用在一步步分析吧,不过就一点小改动,可能结果就截然不同,所以,大家还是需要仔细琢磨下。

说到这里,我们首先说一下js逐行解析代码之前做的一些准备工作,

您可能感兴趣的文章:

  • JavaScript执行环境及作用域链实例分析
  • Javascript中的作用域及块级作用域
  • 浅谈js的解析顺序 作用域
    严格模式
  • javascript
    作用于作用域链的详解
  • 浅谈JavaScript作用域和闭包
  • javascript基础进阶_深入剖析执行环境及作用域链
  • JavaScript变量类型以及变量作用域详解
  • 通过函数作用域和块级作用域看javascript的作用域链

js在逐行读代码之前,会做一些“预解析”工作,会先提前找到一些”小东西”,当然”js解析器“不会随便找一些数据的,它会根据var,function,参数来找。

”js解析器“它比较”懒“,在正式运行代码之前都会给var声明的变量赋值为undefined,也就是var
a =
undefined;会把整个函数看作一个代码块,不去管里边有多少代码。参数等到后边例子中会说。

当所有准备工作都做好后,“JS解析器”就开始逐行执行代码了,现在我们来分析开始的这个例子就很容易明白为什么是undefined了。

再来看下边这个例子

 alert(a);
 var a = 1;
 alert(a);
 var a = 2;
 alert(a); 

我们来一点点分析这个

首先 ”预解析“: 解析器会找var

读到第二行时 a = undefined;

读到第四行时 依然 a = undefined;

正式逐行执行代码:

第一行 alert:undefined 

第二行 a = 1;

第三行 alert:1;

第五行 alert:2

接着看下边这个例子

 alert(a); 
 var a = 1;
 alert(a); 
 function a (){ alert(2); }
 alert(a); 
 var a = 3; 
 alert(a); 
 function a (){ alert(4); }
 alert(a);

我们依然来一点点分析这个

首先 ”预解析“: 解析器会找var function;

读到第二行时 a = undefined;

读到第四行时 a = function a (){ alert(2);}
//所有的函数,在正式运行代码之前,都是整个函数块;变量遇到重名的,只留一个变量,如果变量和函数重名,就只留下函数。

读到第六行时,a = function a (){ alert(2);}

读到第八行时,a = function a (){ alert(4);}

正式逐行执行代码:

第一行 alert: function a (){ alert(4);} 

第二行 a = 1; //表达式可以修改预解析的值!

第三行 alert:1;

第四行 函数没有调用,略过;

第五行 alert:1;

第六行 a = 3;

web前端,第七行 alert:3

第八行 函数没有调用,略过;

第九行 alert:3

如图所示:

web前端 2

继续看例子:

var a = 1;
function fn1(){
 alert(a); //undefined   
 var a = 2;
}
fn1();
alert(a); //1

首先 ”预解析“: 解析器会找var function

读到第一行时 a = undefined;

读到第二行时 fn1 = function fn1 (){alert(2);var a = 2;}

正式逐行执行代码: 第一行 a = 1;

第六行 函数调用,进入函数作用域 在函数作用域内依旧是先预解析,再逐行执行

  函数内预解析:a = undefined;

  执行:alert:undefined;

  a = 2; //此时的a仅为函数作用域中的a,不会影响全局中的a

函数执行完毕,回到全局作用域;

第七行 alert:1;

继续:

var a = 1;
function fn1(){
 alert(a); //1  
 a = 2;
}
fn1();
alert(a); //2

这个例子上边那个例子唯一的区别就是函数中的a没有var,只分析其中关键的地方

在函数作用域中 第三行alert(a),由于函数中没有var
a,所以”解析器”会到函数的作用域的上一级作用域去寻找a(作用域上下级关系的确定就看函数是在哪个作用域下创建的,在哪个作用域下创建,就是哪个作用域的下级),此时函数的上一级是全局作用域,在全局作用域中,a
= 1,所以此时第三行 alert:1,接着第四行,a =
2赋值,依然是函数作用域中没有a,
所以在上一级作用域,也就是全局作用域中找到a,修改全局作用域中的a,
所以会使全局作用域中的a = 2, 因此第七行 alert:2;

这点要理解清楚,注意有无var的区别。

接着来:

 var a = 1;
 function fn1(a){
 alert(a); //undefined 
 a = 2;
 }
 fn1();
 alert(a); // 1

这个例子和上一个的区别就是多了个参数,参数的作用相当于局部变量,也就是在函数中预解析会有var
a = undefined,所以第三行 alert:undefined,第四行 a = 2
改的是函数作用域中的a,不影响全局中的a,第七行alert:1;

接着:

var a = 1;
function fn1(a){
alert(a); // 1
a = 2;
}
fn1(a);
alert(a); // 1

这个例子又与上一个有些区别,在第六行函数调用时传了个实参进去,第六行函数实参的a是全局变量a
= 1的1,函数执行时,第二行 a = 1,所以第三行alert:1,第七行alert:1。

注意这几个例子之间的区别,别混淆了。

再来一个:

var a = 1;
function en(){
var a = 2;
fn();
}
function fn(){
alert(a); //1
}
en();

fn中的a未声明,要到创建这个函数的那个作用域中取值——是“创建”,而不是“调用”这个函数的作用域中。

PS:JavaScript中的作用域和上下文概念

javascript中的作用域(scope)和上下文(context)是这门语言的独到之处,这部分归功于他们带来的灵活性。每个函数有不同的变量上下文和作用域。这些概念是javascript中一些强大的设计模式的后盾。然而这也给开发人员带来很大困惑。下面全面揭示了javascript中的上下文和作用域的不同,以及各种设计模式如何使用他们。

上下文 vs 作用域

首先需要澄清的问题是上下文和作用域是不同的概念。多年来我注意到许多开发者经常将这两个术语混淆,错误的将一个描述为另一个。平心而论,这些术语变得非常混乱不堪。

每个函数调用都有与之相关的作用域和上下文。从根本上说,范围是基于函数(function-based)而上下文是基于对象(object-based)。换句话说,作用域是和每次函数调用时变量的访问有关,并且每次调用都是独立的。上下文总是关键字
this 的值,是调用当前可执行代码的对象的引用。

以上所述是小编给大家介绍的javascript中的作用域(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • 深入理解javascript作用域第二篇之词法作用域和动态作用域
  • 轻松5句话解决JavaScript的作用域
  • 聊一聊JavaScript作用域和作用域链
  • 谈一谈js中的执行环境及作用域
  • 浅析JavaScript作用域链、执行上下文与闭包
  • JavaScript变量的作用域全解析
  • js函数内变量的作用域分析
  • JavaScript 作用域链解析
  • 只需五句话搞定JavaScript作用域(经典)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有