视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
浅谈javascript中的作用域_javascript技巧
2020-11-27 21:02:48 责编:小采
文档

JS中作用域的概念:

  表示变量或函数起作用的区域,指代了它们在什么样的上下文中执行,亦即上下文执行环境。Javascript的作用域只有两种:全局作用域和本地作用域,本地作用域是按照函数来区分的。

首先来看几道题目:

1.
代码如下:
if(true){
var aa= "bb";
}
console.log(aa); //bb

for(var i = 0; i < 100; i++){
//do
}
console.log(i); //100

2.
代码如下:
var bb = '11111';
function aa() {
alert(bb);//undefine
var bb = 'test';
alert(bb);//test
   var cc = "test1";
alert(age);//语法错误
}
aa();

3.
代码如下:
var test = '1111111';
function aa() {
alert(test);
}

function bb() {
var test = '22222222';
aa();
}

bb();//alert(1111111);

4.
代码如下:
alert(typeof aa); //function
alert(typeof bb); //undefined function aa() { //函数定义式
alert('I am 111111111');
};
var bb = function() { //函数表达式
}
alert(typeof bb);//function

5.
代码如下:
function aa(){
var bb = "test";
cc = "测试";
alert(bb);
}
aa();
alert(cc);//测试
alert(bb);//语法报错

上面这5道题目全部概括了js中作用域的问题

可以总结出这么几个观点

一、无块级作用域

从第一题中可以看出来,在{}中执行后,变量并没有被销毁,还是保存在内存中的,因此我们可以访问到的。

二、JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.

这里提到函数的作用域链这个概念,在ECMA262中,是这样的

任何执行上下文时刻的作用域, 都是由作用域链(scope chain)来实现.
在一个函数被定义的时候, 会将它定义时候的scope chain链接到这个函数对象的[[scope]]属性.
在一个函数对象被调用的时候,会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参,都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中.
所以题目3 结果是alert(1111111);

三、JS会提前处理function定义式 和var关键字

  如题目4 开始alert(bb); //undefine ,alert(age)//语法报错,这两个有什么区别呢,原因就是后面有var bb =“test”,在初始化的时候提前处理了var 这个关键字,只是这个开始未赋值

将代码修改成这样的,可以看出来
代码如下:
var dd = '11111';
function aa() {
alert(bb);//undefine
   var bb = 'test';
alert(bb);//test
   var cc = "test1";
alert(age);//语法错误
}
aa();
alert(dd);//11111
alert(cc);//语法报错

此处alert(bb)没有报语法错误,alert(age)报语法错误。

但是请注意:
代码如下:

显示全文
专题