Javascript 笔记与总结(1-2)词法分析

词法分析,按顺序分析 3 样:

第 1 步:先分析参数

第 2 步:再分析变量声明

第 3 步:再分析函数声明

一个函数能使用的局部变量,就从上面 3 步分析而来。

具体步骤:

0:函数运行前的瞬间,生成 Active Object(活动对象)

1: 1.1 把函数声明的参数,形成 AO (Active Object)的属性,值全是 undefined,

  1.2 接受实参形成 AO 相应属性的值

2:分析变量声明,如 var age,如果 AO 上已经有 age 属性,则不作任何影响;如果 AO 上还没有 age 属性,则添加 AO 属性,但此时没赋值,值是 undefined

3:分析函数声明,如 function foo(){},则把函数赋给 AO.foo 属性

注:如果此前 foo 属性已经存在,则会被覆盖成函数

例1

<script>
    function a(b){
        alert(b);
        function b(){
            alert(b);
        }
        b();
    }
    a(1);
</script>

【答案】:两次弹出

function b(){

alert(b);

}

【分析】

分析期:

0. AO = {}

1.

  1.1 分析参数 AO = {b:undefined}

  1.2 接收参数 AO = {b:1}

2. 分析 var 声明,此处函数没有 var

3. 分析函数声明,AO = {b:function(){alert(b);}}

执行期:

alert(b);   // function

b();  // 由作用域寻找到 a 函数中的 b,即 function,alert() 出来

例2

<script>
    function t(age){
        alert(age);
    }
    t(5); //5
    t(); //undefined
</script>

【分析】

词法分析过程:

AO{ age = undefined }

运行过程:

t(5); → AO.age = 5; alert(AO.age); //5

t(); → AO.age = undefined; //AO.age 没有得到赋值,还是 undefined

例3

<script>
    function t(age){
        var age = 10;
        alert(age);
    }
    t(5);
</script>

弹出 10。

【分析】

词法分析过程:

0. 形成AO = {}

1.

  1.1 分析形参 AO = {age:undefined}

1.2 接收形参:AO = {age:5}

2. 分析 var age,发现 AO 已有 age 属性,不做任何影响

执行过程:

AO.age = 10

alert(age); //10

例4(和例1 做对比):

<script>
    function t(greet){
        var greet = ‘hello‘;
        alert(greet);
        function greet(){
        }
        alert(greet);
    }
    t(null);
</script>

弹出两次 ‘hello‘

【分析】

词法分析过程:

0. AO = {}

1.

  1.1 分析形参:AO = {greet = undefined}

  1.2 接收形参:AO = {greet:null}

2. 分析 greet 变量声明,AO 已经有 greet 属性,因此不做任何影响

3. 分析 greet 函数声明,AO.greet = function(){},被覆盖成函数

执行过程:

greet = ‘hello‘;

alert(greet);

alert(greet);

【再分析】

var greet = ‘hello‘;

这一句要当成两句看(两次执行):① 分析期的 var 声明过程 ② 运行期的 赋值 过程

由于在运行期被赋值成了 ‘hello‘,因此两次 alert 弹出的都是 ‘hello‘

如果去掉该句(则和例 1 一样)或者改为 var greet; ,则弹出两次

function greet(){}

例5

<script>
function a(b){
    alert(b);
    b = function (){
        alert(b);
    }
    b();
}
a(1);
</script>

分别弹出 1 和 function (){alert(b)}

【词法分析过程】:

0:AO = {}

1.分析参数 AO = {b:undefined}  → {b:1}

2.分析 var 声明,没有

3.分析函数声明,没有

注:b = function(){alert(b)} ,是一个赋值过程,在执行器才起作用

【执行过程】:

alert(b);   //b = 1

b = function(){

  alert(b);    //往上找,找到b = function(){}

}

b(); // funtion

【函数声明 与 函数表达式】

函数可以赋值给变量,可以作为参数来传递

function t1(){
}

t2 = function(){
}

t1 是函数声明,虽然全局内也得到一个 t1 变量,值是 function;

t2 只是一个赋值过程,值是右侧的表达式的返回结果,即函数

因此 t1 和 t2 两种方式在词法分析时,有着本质区别:前者在词法分析阶段就发挥作用,后者在函数运行阶段才发挥作用

例如:

(function(window,undefined){
})(window)

这是 jQuery 的最外层代码

【分析】

(function(window,undefined){})

这是内层表达式,返回值是函数,包在小括号里,当成表达式来执行

(function(window,undefined){})(window)

立即调用

而内层函数又没有起名字,成为匿名函数

这种手法,匿名函数,立即执行,不污染全局,称为 立即执行匿名函数表达式

传 window 是为了速度,不传 undefined 是为了防止外界对 undefined 的污染(在 IE 、FF 低版本中,undefined 可以重新赋值,例如 undefined = 3;)

【作用域链】

指函数由内到外,产生的 AO 链

词法分析时由外至内,分析 AO 链;执行时由内到外,寻找 AO 链

更多词法作用域文章:JavaScript的词法作用域

时间: 2024-10-21 21:35:21

Javascript 笔记与总结(1-2)词法分析的相关文章

JavaScript笔记之Function

一.函数定义 (1)使用function declaration 格式:function functionName(parameters) { function body } 注:此种方式声明的函数作用域是全局的,即在声明之前可以调用 (2)使用function expression 格式:var name = function (parameters) { function body }; 注:与(1)不同,在声明之前不可以调用 (3)使用function constructor() 格式:v

javascript笔记(二)

concat() 连接多个字符串,返回合并后的字符串. 1 var s1="a"; 2 var s2="b"; 3 var s3="c"; 4 5 console.log(s1.concat(s2,s3));//abc concat() 方法的结果等同于:result = s1 + s2 + ... + sN.如果有不是字符串的参数,则它们在连接之前将首先被转换为字符串. 数组中的concat():将参数添加为数组的元素,返回新的数组. 1 va

[Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法

js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+1}" 反射获取函数源代码的功能很强大,使用函数对象的toString方法有严重的局限性.toString方法的局限性ECMAScript标准对函数对象的toString方法的返回结果(即该字符串)并没有任何要求.这意味着不同的js引擎将产生不同的字符串,甚至产生的字符串与该函数并不相关. 如果函数

[Effective JavaScript 笔记]第27条:使用闭包而不是字符串来封装代码

函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式传递给eval函数以达到同样的功能.程序员面临一个选择:应该将代码表示为函数还是字符串?毫无疑问,应该将代码表示为函数.字符串表示代码不够灵活的一个重要原因是:它们不是闭包. 闭包回顾 看下面这个图 js的函数值包含了比调用它们时执行所需要的代码还要多的信息.而且js函数值还在内部存储它们可能会引用

[Effective JavaScript 笔记] 第4条:原始类型优于封闭对象

js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //"number" typeof "s";//"string" typeof null;//"object":ECMAScript把null描述为独特的类型,但返回值却是对象类型,有点困惑. 可以使用Object.prototype.t

JavaScript笔记杂谈篇(啥都有)

二维码缩放比例以43PX的倍数缩放最为标准. NuGet相关管理http://www.cnblogs.com/dudu/archive/2011/07/15/nuget.html 学习笔记: http://kb.cnblogs.com/page/143190/ 动态创建标记,给标记添加样式,class,等等   vardtProductName=$("<dt></dt>",{style:"text-overflow: ellipsis;overflow

JavaScript笔记基础篇(二)

基础篇主要是总结一些工作中遇到的技术问题是如何解决的,应为本人属于刚入行阶段技术并非大神如果笔记中有哪些错误,或者自己的一些想法希望大家多多交流互相学习. 1.ToFixed()函数 今天在做Birt报表时, 要显示一列百分比的数据,但因一些特别的原因,不能使用使用百分比样式,即如果数据是0.9538不能显示成“95.38%”的样式,必须显示成“95.38”. 开始时想使用javascript的内置函数Math.round(),可Math.round()只能显示为整数,而不能保留小数. 再网上搜

学习Javascript笔记1 Javascript对象1

以前学过一段时间Js,现在再看,感觉又像是新知识,说明自己对Js掌握的还不是很好(是很不好,从来就没好过,嘿嘿),在这里,在温习一下 如果各位大哥大姐不幸看到了,,额 额这只是自己的笔记. 在Js里面 面向对象的思想是绝对很重要的,大家如果看过大神的代码,就会知道在Js里面面向对象的思想有多么重要了 JavaScript 中的所有事物都是对象:字符串(String).数字(Number).数组(Array).日期(Date),等等. 在 JavaScript 中,对象是拥有属性和方法的数据. 属

javascript笔记基础总结篇

Created at 2016-09-24 Updated at 2016-10-02 CategoryFront-End TagJavascript 转载请声明出处博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课时 入门基础 知识点: 操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器本身也是一个应用程序 浏览器本身只懂得解析 HTML 调用浏览器这个应用程序的一个功能绘制 1.javascript介绍 JavaScript 操作