Web前端开发实例_JS-作用域分析

js是由前端开发员写的吗|珍爱网前端开发笔试题|web前端开发 就职要求

Q:回答下列js函数的输出

1.javascript 代码

function t(age) {
    alert(age);
}
t(5);
t();

2.javascript 代码

function t(age) {
    var g = ‘hello’;
    alert(g);
    function g() {}
    alert(g);
}
t(null);

3.javascript 代码

function a(b) {
    alert(b);
    function b() {
        alert(b);
    }
    b();
}
a(1);

4.javascript 代码

function a(b) {
    alert(b);
    b = function () {
        alert(b);
    }
    b();
}
a(1);

好,答案大家是不是都答对了呢,接下来先普及一些基础知识,然后讲述方法,最后针对每题给出具体解析过程:

基础知识:

1.什么是作用域? 在js里面,作用域可以理解为变量的有效范围。相信都能理解。。
2.作用域的类别? 全局作用域(Global Scope)和局部作用域(Local Scope)
3.如何判断是全局还是局部作用域?
全局:
1)最外层函数和在最外层函数外面定义的变量拥有全局作用域
2)所有末定义直接赋值的变量自动声明为拥有全局作用域
3)所有window对象的属性拥有全局作用域
局部:
函数内部用var声明的变量

作用域解析方法—####词法分析:
一段js代码,一般可以分为2个阶段:变量声明阶段(词法分析阶段)和代码执行阶段
所谓的词法分析,就是分析一个变量到底是谁的过程,具体的步骤如下:

1.第一步:分析参数
2.第二步:分析变量声明
3.第三步:分析函数声明

再具体拆分步骤如下:
0.函数运行前,生成Active Object(活动对象),该对象就是一个容器,里面放所有的变量以及对应的值
1.把声明的参数放到AO里面,值全部为undefined,之后接收实参(就是外面传过来的)形成AO的属性,参数的值就是属性的值
2.分析变量声明,对于带有var的变量,
如果AO上没有此属性,则添加此属性,值是undefined
如果AO上已经有此属性,则没影响

3.分析函数声明,如function foo(){}
则把函数赋给AO.foo属性,如果此前该属性已经存在,则覆盖
注意:函数也可以直接被赋值,在js里面,一切皆对象,函数也可以作为对象来传递。

栗子解析:

1:词法分析过程:0.形成AO
1.参数age放进AO,值为undefined,外界是否有值传进?t()时没有,则age=undefined,t(5)时则age=5
2.无var,跳过
3.无函数声明,跳过
代码执行过程:1.alert(age)—t()时为undefined,t(5)时则为5

2:词法分析:0.AO
1.age生成等于undefined,之后外界传值age=null
2.var声明age
3.函数声明g()
代码执行:1.g=“hello”
2.alert(g)—-hello
3.alert(g)—hello

3:词法分析:0.AO={}
1.AO={b:undefined},b=1;
2.AO={b:function(){..}}
代码执行:1.alert(b)—函数
2.b()—-函数

4:词法分析:0.AO={}
1.AO={b:undefined},b=1;
2.此处b为赋值,不在词法分析过程中
代码执行:1.alert(b)—1
2.b=function (){alert(b);}—函数

OK,看了以上的分析,是否已经清晰了一点呢,反正一步步来,基本是不会错的啦。

附加题:
Q:谈谈对(function(window,undefined){})(window)的理解?
A:这是jquery最外层代码,(function(window,undefined){})是内层表达式,返回值是函数,
而(function(window,undefined){})()是一个立即执行的匿名函数

Q:为什么传window,后面不传undefined?
A:传window是为了速度,加快内部查找的速度
不传undefined是为了安全, IE,FF低版本,undefined可以赋值
声明了又不传值的话,值肯定是undefined,所以外界影响不了了

拓展:当函数嵌套时,每个函数内都会生成AO,如果在本函数内找不到变量,就会去上层的AO找,最后找不到去
window上找,这样就会形成一个链条,也就是作用域链,或者说是AO链。

前端是设计还是开发|前端开发自学两个月|前端开发小网页代码

» 本文来自:前端开发者 » 《Web前端开发实例_JS-作用域分析》
» 本文链接地址:https://www.rokub.com/3921.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!