网站开发进阶(四十九)由JS报“未结束的字符串常量”引发的思考

网友投稿 547 2022-05-30

#网站开发进阶(四十九)由JS报“未结束的字符串常量”引发的思考

##报错

在做公司项目开发过程中,后期生产环境上报JS出现“未结束的字符串常量”错,如下:

后期经过不断调试,发现是由于Js引擎在解析带有换行字符串时引起的异常。解析后的js代码类似于

If (“12345 abc” == “12345abc”){...

1

2

由以上异常,下面主要讲解JavaScript引擎的工作原理。

Javascript解析引擎在执行代码前后是怎么工作的,ecma英文版实在看不下去呵呵。

##什么是JavaScript解析引擎

javascript解析引擎(简称javascript引擎),是一个程序,是浏览器引擎的一部分。每个浏览器的javascript解析引擎都不一样(因为每个浏览器编写Javascript解析引擎的语言(C或者C++)以及解析原理都不相同)。标准的Javascript解析引擎会按照 ECMAScript文档来实现。虽然每个浏览器的Javascript解析引擎不同,但Javascript的语言性质决定了Javascript关键的渲染原理仍然是动态执行Javascript字符串。只是词法分析、语法分析、变量赋值、字符串拼接的实现方式有所不同。

简单地说,JavaScript解析引擎就是能够“读懂”JavaScript代码,并准确地给出代码运行结果的一段程序。比方说,当你写了 var a = 1 + 1; 这样一段代码,JavaScript引擎做的事情就是看懂(解析)你这段代码,并且将a的值变为2。

学过编译原理的人都知道,对于静态语言来说(如Java、C++、C),处理上述这些事情的叫编译器(Compiler),相应地对于JavaScript这样的动态语言则叫解释器(Interpreter)。这两者的区别用一句话来概括就是:编译器是将源代码编译为另外一种代码(比如机器码,或者字节码),而解释器是直接解析并将代码运行结果输出。比方说,firebug的console就是一个JavaScript的解释器。

但是,现在很难去界定说,JavaScript引擎它到底算是个解释器还是个编译器,因为,比如像V8(Chrome的JS引擎),它其实为了提高JS的运行性能,在运行之前会先将JS编译为本地的机器码(native machine code),然后再去执行机器码(这样速度就快很多),相信大家对JIT(Just In Time Compilation)一定不陌生吧。

个人认为,不需要过分去强调JavaScript解析引擎到底是什么,了解它究竟做了什么事情就可以了。对于编译器或者解释器究竟是如何看懂代码的,翻出大学编译课的教材就可以了。

这里还要强调的就是,JavaScript引擎本身也是程序,由代码编写而成。比如V8就是用C/C++写的。

##JavaScript解析引擎到底是干什么的

JavaScript解析引擎就是根据ECMAScript定义的语言标准来动态执行JavaScript字符串。虽然之前说现在很多浏览器不全是按照标准来的,解释机制也不尽相同,但动态解析JS的过程还是分成两个阶段:语法检查阶段和运行阶段。

语法检查包括词法分析和语法分析,运行阶段又包括预解析和运行阶段(像V8引擎会将JavaScript字符串编译成二进制代码,此过程应该归到语法检查过程中)。

###JavaScript解析过程

在JavaScript解析过程中,如遇错误就直接跳出当前代码块,直接执行下一个 script 代码段。所以在同一个 script 内的代码段有错误的话就不会执行下去,但是不会影响下一个 script 内的代码段。

####第一阶段:语法检查

语法检查也是JavaScript解析器的工作之一,包括 词法分析 和 语法分析,过程大致如下:

#####一:词法分析

词法分析:JavaScript解释器先把JavaScript代码(字符串)的字符流按照ECMAScript标准转换为记号流。

例如:把字符流:

a = (b - c);

1

转换为记号流:

NAME “a”

EQUALS

OPEN_PARENTHESIS

NAME “b”

MINUS

NAME “c”

CLOSE_PARENTHESIS

SEMICOLON

#####二:语法分析

语法分析:JavaScript语法分析器在经过词法分析后,将记号流按照ECMAScript标准把词法分析所产生的记号生成语法树。

通俗地说就是把从程序中收集的信息存储到数据结构中,每取一个词法记号,就送入语法分析器进行分析。

语法分析不做的事:去掉注释,自动生成文档,提供错误位置(可以通过记录行号来提供)。

当语法检查正确无误之后,就可以进入运行阶段了。

####第二阶段:运行阶段

#####一:预解析

第一步:创建执行上下文。JavaScript引擎将语法检查正确后生成的语法树复制到当前执行上下文中。

第二步:属性填充。JavaScript引擎会对语法树当中的变量声明、函数声明以及函数的形参进行属性填充。

“预解析”从语法检查阶段复制过来的信息如下:

内部变量表varDecls:varDecls保存的用var进行显式声明的局部变量。

内嵌函数表funDecls:在“预解析”阶段,发现有函数定义的时候,除了记录函数的声明外,还会创建一个原型链对象(prototype)。

…其他的信息。

####执行上下文(execution context)

(一)预解析阶段创建的执行上下文包括:变量对象、作用域链、this。

变量对象(Variable Object):由var declaration、function

declaration(变量声明、函数声明)、arguments(参数)构成。变量对象是以单例形式存在。

作用域链(Scope Chain):variable object + all parent

scopes(变量对象以及所有父级作用域)构成。

this值:(thisValue):content

object。this值在进入上下文阶段就确定了。一旦进入执行代码阶段,this值就不会变了。

(二)“预解析”阶段创建执行上下文之后,还会对变量对象/活动对象(VO/AO)的一些属性填充数值。

(函数申明提升优先级高于变量声明提升)

函数的形参:执行上下文的变量对象的一个属性,其属性名就是形参的名字,其值就是实参的值;对于没有传递的参数,其值为undefined。

函数声明:执行上下文的变量对象的一个属性,属性名和值都是函数对象创建出来的;如果变量对象已经包含了相同名字的属性,则会替换它的值。

变量声明:执行上下文的变量对象的一个属性,其属性名即为变量名,其值为undefined;如果变量名和已经声明的函数名或者函数的参数名相同,则不会影响已经存在的函数声明的属性。

变量对象/活动对象(VO/AO)填充的顺序也是按照以上顺序:函数的形参->函数声明->变量声明;

在变量对象/活动对象(VO/AO)中权重高低也按照函数的形参->函数声明->变量声明顺序来。

如下代码:

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

1

2

3

4

5

6

7

以上代码在进入执行上下文时,按照函数的形参->函数声明->变量声明顺序来填充,并且优先权永远都是函数的形参>函数声明>变量声明,所以只要alert(a)中的a是函数中的形参,就永远不会被函数和变量声明覆盖。就算没有赋值也是默认填充的undefined值。

第二部分:执行代码

经过“预解析”创建执行上下文之后,就进入执行代码阶段,VO/AO就会重新赋予真实的值,“预解析”阶段赋予的undefined值会被覆盖。

此阶段才是程序真正进入执行阶段,Javascript引擎会一行一行的读取并运行代码。此时那些变量都会重新赋值。

假如变量是定义在函数内的,而函数从头到尾都没被激活(调用)的话,则变量值永远都是undefined值。

进入了执行代码阶段,在“预解析”阶段所创建的任何东西可能都会改变,不仅仅是VO/AO,this和作用域链也会因为某些语句而改变,后面会讲到。

了解完Javascript的解析过程最后我们再来了解下firebug的控制台对Javascript的报错提示吧。

其实firebug的控制台也算是JavaScript的解释器,而且他们会提示我们哪行出现了错误或者错误发生在哪个时期,语法检查阶段错误,还是运行期错误。

如下:

alert(var);// SyntaxError: syntax error 语法分析阶段错误 :语法错误 var=1; // SyntaxError: missing variable name 语法分析阶段错误 :var是保留字符,导致变量名丢失 a=b=v // ReferenceError: v is not defined 运行期错误: v 是未定义的JavaScript错误信息)

1

2

3

有如此详细的错误提示,是不是就很快就知道代码中到底是哪里错了呢!

##作用域链(Scope Chain)

作用域链是处理标识符时进行变量查询的变量对象列表,每个执行上下文都有自己的变量对象:对于全局上下文而言,其变量对象就是全局对象本身;对于函数而言,其变量对象就是活动对象。

###作用域链以及执行上下文的关系

在Javascript中只有函数能规定作用域,全局执行上下文中的 Scope 是全局上下文中的属性,也是最外层的作用域链。

函数的属性[[Scope]]是在“预解析”的时候就已经存在的了,它包含了所有上层变量对象,并一直保存在函数中。就算函数永远都没被激活(调用),[[Scope]]也都还是存在函数对象上。

创建执行上下文的 Scope 属性和进入执行上下文的过程如下:

Scope = AO + [[Scope]] //预解析时的 Scope 属性

Scope = [AO].concat([[Scope]]); //执行阶段,将AO添加到作用域链的最前端

###执行上下文定义的 Scope 属性变化过程

执行上下文中的[AO]是函数的活动对象,而[[Scope]]则是该函数属性作用域。当前函数的AO永远是在最前面的,保存在堆栈上,而每当函数激活的时候,这些AO都会压栈到该堆栈上,查询变量是先从栈顶开始查找,也就是说作用域链的栈顶永远是当前正在执行的代码所在环境的VO/AO(当函数调用结束后,则会从栈顶移除)。

通俗点讲就是:JavaScript解释器通过作用域链将不同执行位置上的变量对象串连成列表,并借助这个列表帮助JavaScript解释器检索变量的值。作用域链相当于一个索引表,并通过编号来存储它们的嵌套关系。当JavaScript解释器检索变量的值,会按着这个索引编号进行快速查找,直到找到全局对象为止,如果没有找到值,则传递一个特殊的 undefined值。

是不是又想到了一条JavaScript高效准则:为什么说在该函数内定义的变量,能减少函数嵌套,能提高JavaScript的效率?因为函数定义的变量,此变量永远在栈顶,这样子查询变量的时间变短了。

###作用域的特性

保证有序的访问所有变量和函数;

作用域链感觉就是一个VO链表,当访问一个变量时,先在链表的第一个VO上查找,如果没有找到则继续在第二个VO上查找,直到搜索结束,也就是搜索到全局执行环境的VO中。这也就形成了作用域链的概念。

var color="blue"; function changecolor(){ var anothercolor="red"; function swapcolors(){ var tempcolor=anothercolor; anothercolor=color; color=tempcolor; // Todo something } swapcolors(); } changecolor();//这里不能访问tempcolor和anothercolor;但是可以访问color; alert("Color is now "+color); 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

函数的作用域是在函数创建即“预解析”阶段就已经就已经定义了,而在代码执行阶段则是将函数的作用域添加到作用域链上。

##原型链查询

在介绍“预解析”阶段时,我们有提到当创建函数时,同时也会创建原型链对象。原型链对象在作用域链中没有找到变量时,那么就会通过原型链来查找。

function Foo() { function bar() { alert(x); } bar(); } Object.prototype.x = 10; Foo(); // 10

1

2

3

4

5

6

7

8

上例中在作用域链中遍历查询,到了全局对象了,该对象继承自Object.prototype,因此,最终变量“x”的值就变成了10。不过,在原型链上定义变量对象有些浏览器不支持,譬如IE6,而且这样增加了变量对象的查询时间。所以变量声明尽量在调用函数AO里,即在用到该变量的函数内声明变量对象。

作用域是在“预解析”时就已经决定的,所以作用域被叫做静态作用域,而在执行阶段的则被叫做动态链,因为在执行阶段会改变作用域链中填充的值。

代码执行阶段对“预解析”的改变

创建了函数就有一个闭包,而变量是在函数的执行上下文保存起来的静态作用域链上查询的,而当前函数内创建的的变量会在函数结束后就被销毁。而闭包就能在函数结束之后还能让这些变量一直保存在作用域链上。

##自由变量

自由变量是指在函数中使用的,但既不是函数参数也不是函数局部变量的变量。

##闭包

理论角度:所有函数都是闭包。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此,因为函数中访问全局变量就相当于是在访问自由变量。

应用角度:当在代码中引用了自由变量,即使创建它的上下文已经销毁,此变量还能访问。

ECMAScript标准中,同一个上下文创建的闭包(理论上的闭包)是共用一个作用域的,也就是说闭包中对其中变量修改会影响到其他闭包对其变量的读取。

所谓创建额外的闭包就是创建函数,不管是匿名函数、函数表达式、函数声明(除了构造函数),只要能创建作用域链就行,与函数类型无关,然而创建额外的函数不是唯一的方法。

遍历最外层代码:

for (i = 0; i < len; i++) {…//①}

遍历获取索引值最外层代码

使用函数创建闭包:

方法一:使用函数闭包获取索引值

(function(i){ lists[i].onmouseover = function () { alert(i); }; })(i);

1

2

3

4

网站开发进阶(四十九)由JS报“未结束的字符串常量”引发的思考

5

直接将匿名函数赋值给事件,创建额外的函数来创建多个作用域。

方法二:使用函数闭包获取索引值

lists[i].onmouseover = (function (x) { return function (){ alert(i); }; })(i);

1

2

3

4

5

利用return在闭包中返回,而闭包中返回的语句会将控制流返回给调用上下文,也就是返回几个就有几个执行上下文,相应的作用域链也有相同的个数。

使用try { … } catch (ex) { … }改变作用域链:

try-catch改变作用域链的原理跟with一样,try 部分包含需要运行的代码,而 catch 部分包含错误发生时运行的代码。如下:

var array = null; var x=10; try { document.write(array[0]); } catch(x) { x =20; document.writeln("catch内的x值"+x); //20 } document.writeln("catch外的x值"+x); //10

1

2

3

4

5

6

7

8

9

try-catch语句在代码调试和异常处理中非常有用,因此不建议完全避免。

##JavaScript解析引擎与ECMAScript是什么关系

JavaScript引擎是一段程序,我们写的JavaScript代码也是程序,如何让程序去读懂程序呢?这就需要定义规则。比如,之前提到的var a = 1 + 1;,它表示:

左边var代表了这是申明(declaration),它申明了a这个变量;

右边的+表示要将1和1做加法;

中间的等号表示了这是个赋值语句;

最后的分号表示这句语句结束了;

上述这些就是规则,有了它就等于有了衡量的标准,JavaScript引擎就可以根据这个标准去解析JavaScript代码了。那么这里的ECMAScript就是定义了这些规则。其中ECMAScript 262这份文档,就是对JavaScript这门语言定义了一整套完整的标准。其中包括:

var,if,else,break,continue等是JavaScript的关键词;

abstract,int,long等是JavaScript保留词;

怎么样算是数字、怎么样算是字符串等等;

定义了操作符(+,-,>,<等);

定义了JavaScript的语法;

定义了对表达式,语句等标准的处理算法,比如遇到==该如何处理;

⋯⋯

![这里写图片描述](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwOTI3MTk1MzAwMzQ4?x-oss-process=image/format,png)

![这里写图片描述](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwOTI3MTk1MzEzMDYx?x-oss-process=image/format,png)

![这里写图片描述](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwOTI3MTk1MzIyNzQ4?x-oss-process=image/format,png)

JavaScript 云速建站 网站

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:【华为云专家原创】微服务架构中使用 ELK 进行日志采集以及统一处理
下一篇:《C++代码整洁之道:C++17 可持续软件开发模式实践》 —3.4 避免复制原则(DRY)
相关文章