js代码运行【js代码运行网站】 收藏 0

JS｜7种JavaScript代码调试的方法

JS是解释型语言，是逐条语句解释执行的，如果错误发生在某个语句块，此语句块以前的语句一般都可以正常执行。这不同于C等编译型语言。

代码调试的重点在于找到错误发生点，然后才能有的放矢。

通常可以使用警告框来提示变量信息。

alert(document.body.innerHTML);

当警告框弹出时，用户将需要单击“确定”来继续。

需要注意的是是，以下写法会替换整个页面的内容：

<button type=\”button\” onclick=\”document.write(5 + 6)\”>试一试</button>

即使是函数调用也是如此。

document.getElementById(\”demo\”).innerHTML =\”\”

JS的运行环境是浏览器，由浏览器引擎解释执行JS代码，一般来说，浏览器也提供调试器，如chrome按F12即可调出高试器：

如果您的浏览器支持调试，那么您可以使用 console.log() 在调试窗口中显示 JavaScript 的值：

内置的调试器可打开或关闭，强制将错误报告给用户。

通过调试器，您也可以设置断点（代码执行被中断的位置），并在代码执行时检查变量。

JavaScript 实际上会创建带有两个属性的 Error 对象：name 和 message。

name 设置或返回错误名。

message 设置或返回错误消息（一条字符串）。

debugger停止执行 JavaScript，并调用调试函数（如果可用）。

可以注释掉一些可疑代码来确定错误发生点。

或者考虑逐步增加代码的方法，逐步验证，以避免错误。

8.1 意外使用赋值运算符

如果程序员在 if 语句中意外使用赋值运算符（=）而不是比较运算符（===），JavaScript 程序可能会产生一些无法预料的结果。

8.2 令人困惑的加法和级联

加法用于加数值。

级联（Concatenation）用于加字符串。

在 JavaScript 中，这两种运算均使用相同的 + 运算符。

正因如此，将数字作为数值相加，与将数字作为字符串相加，将产生不同的结果：

而加法以外的其它算法运算符可以将字符串进行自动类型转换。

10-\”5\” // 5

8.3 令人误解的浮点数

JavaScript 中的数字均保存为 64 位的浮点数（Floats），符合IEEE754的标准。

所有编程语言，包括 JavaScript，都存在处理浮点值的困难：

8.4 错位的分号

因为一个错误的分号，此代码块无论 x 的值如何都会执行：

在一行的结尾自动关闭语句是默认的 JavaScript 行为。

在 JavaScript 中，用分号来关闭（结束）语句是可选的。

8.5 对象使用命名索引

在 JavaScript 中，数组使用数字索引。

在 JavaScript 中，对象使用命名索引。

如果您使用命名索引，那么在访问数组时，JavaScript 会将数组重新定义为标准对象。

8.6 Undefined 不是 Null

Undefined 的类型是 Undefined，Null的类型是Object。

JavaScript 对象、变量、属性和方法可以是未定义的。

此外，空的 JavaScript 对象的值可以为 null。

在测试非 null 之前，必须先测试未定义：

if (typeof myObj !== \”undefined\” && myObj !== null)

8.7 JS没有块作用域（与C语言不同）

在 ES2015 之前，JavaScript 只有两种类型的作用域：全局作用域和函数作用域。

ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。

这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。

-End-

程序员的 JavaScript 代码该如何让计算机搞懂？

出自程序员之手的 JavaScript 代码，该如何变成计算机所能理解的机器语言呢？本文将带你走进 JavaScript 引擎内部，一探究竟。

作者 | Lydia Hallie

译者 | 弯月，责编 | 屠敏

以下为译文：

JavaScript 很酷（这一点不用我说），但一台机器究竟是怎样理解我们编写的代码呢？作为JavaScript 开发者，我们通常不需要处理编译器的东西。但是，了解 JavaScript 引擎的基础知识，知道它如何将人类能看懂的JS代码变成机器能理解的东西，是绝对是有好处的！

注意：这篇文章主要根据 Node.js 和基于 Chromium 的浏览器使用的V8引擎撰写。

当HTML解析器遇到代码中的script标签时，就会从网络、缓存或者已安装的service worker里加载源代码。这一步的结果就是脚本内容，以字节流的形式返回，这个字节流需要解码器来处理！字节流解码器会在字节流的时候进行解码。

字节流解码器根据流中的字节数据来创建符号（token）。例如，0066解码成f，0075解码成u，006e解码成n，0063解码成c，0074解码成t，0069解码成i，006f解码成o，006e解码成n，然后是一个空格。似乎你写了一个function！这是JavaScript的保留关键字，因此就会创建一个符号，然后发给解析器（以及预解析器，我的GIF图里没有说，但我会稍后解释）。字节流中的其余内容也会类似处理。

引擎有两个解析器：一个是预解析器（pre-parser），另一个是解析器（parser）。预解析器只负责尽早检查符号，找出其中的语法错误。这样可以减少在代码中发现错误所需的时间。否则这些错误就要由解析器负责发现了！

如果没有错误，解析器就会根据它从字节流解码器收到的符号创建节点，然后使用这些节点创建一颗抽象语法树，简称AST。

接下来就是解释器（interpreter）出场了！解释器会遍历整个AST，根据AST的内容生成字节码。字节码生成完成后，就会删除AST以释放更多的内存。这样就得到了机器能够运行的代码！

虽然字节码很快，但它还可以更快。字节码在运行的时候会生成信息。它可以检测到哪些行为会更频繁发生，哪些类型的数据会更经常被使用。如果某个函数被调用了许多次，那么就可以通过优化加快速度！

字节码会连同生成的类型反馈一起发送到优化编译器（optimizing compiler）。优化编译器会处理负责处理字节码和类型反馈，然后生成高度优化过的机器码。

JavaScript 是一个动态类型语言，这意味着数据类型经常会变化。如果 JavaScript 引擎每次都必须检查值的类型，那就会非常慢。

然而，JavaScript 的引擎使用了一种叫做内联缓存（inline caching）的方法。它会在内存中缓存代码，期待着以后会用同样的行为返回同样的值！比如，一个函数被调用100次，到目前为止每次都返回同样的值。那么引擎就会假设该函数在第101次调用时依然会返回同样的值。

我们假设有一个函数sum，到目前为止每次调用都使用两个数值作为参数：

上面的调用会返回3！下次被调用时，引擎就会假设我们依然会用两个数值进行调用。

如果这个假设正确，那就不需要进行动态查找，可以直接使用内存中保存的值。否则，如果假设错误，就会进行反优化，将代码从优化过的机器码恢复成原始的字节码。

例如，假设下次调用时传递了一个字符串而不是数值。由于 JavaScript 是动态类型，这样做不会产生任何错误！

这意味着数字被强制转换成字符串，然后函数会返回字符串\”12\”。因此引擎会去执行字节码，然后更新类型反馈。

希望这篇文章对你有帮助性！当然，引擎还有许多其他方面我没有讨论到（如JS heap，call stack等），也许以后会讨论！如果你对JavaScript的内部原理有兴趣，我强烈你自己做一些研究，V8是开源的，关于其工作原理的文档也非常好！

原文：https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf

本文为 CSDN 翻译，

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com