javascript - 1开发者工具的回车，2逗号 圆括号的意义是什么？

问题描述

问 题

Q1使用开发者工具，控制台，输入一段js代码。点击回车时发生了什么？
如何解释下图的输出和报错

Q2除了变量声明和定义时，有逗号时，点击回车发生了什么？
如何解释下图的输出和报错

Q3加上圆括号运算符之后，回车，发生了什么？
为什么这里，第一个 第三个，和上面的结果不一样

Q4逗号，圆括号（立即执行函数），回车，共同的效果如下
希望能在前面问题的基础上，弄明白

小白+强迫症发问，先谢谢大家！

解决方案

Q1

敲击回车，控制台会使用页面的 js 解析器执行输入的代码，并把执行最后一条语句得到的返回值显示在控制台。

var a=1 // undefined
a=111 //111
111 // 111

原因是 var 语句的返回值是 undefined, a=111这是一个赋值运算，赋值运算的返回值是a。匿名function报错这个解释起来有点费劲。

js 中关于函数有两个概念：函数声明 和 函数表达式。

var a = function(){} // 函数表达式,（匿名函数表达式）
function b(){} // 函数声明
var c = function c(){} // 函数表达式（命名函数表达式）
// 旧IE不支持named function expression

由于函数声明和命名函数表达式很像，js 引擎是怎样区分 function 关键字后跟的到底是函数声明还是函数表达式呢？答案是看当前的上下文语境。如果上下文语境是一个求值环境，那么 function 就被认定为引出一个函数表达式，否则即认为是函数声明。

Q1的这个报错就是因为，目前上下文不是一个求值语境，function 被解析为函数声明，报错的Uncaught SyntaxError: Unexpected token (意思是不可预期的左括号，很好理解，函数声明需要一个函数名字，这里没有给出函数名就出现左括号，因此报语法错报的是左括号这个位置。

Q2

, 逗号是 js 中的运算符，逗号运算符会依次执行逗号左右的表达式，返回值是逗号右侧的表达式的值。

1,function(){} // => function(){}

这个不报错的原因就是因为，语境1,...构成了一个求值上下文，因此后面的 function 被正确解析为函数表达式。

而反过来书写报错，是因为逗号运算符还没有解析到，当前还不是一个求值语境，所以 function 被认作是函数声明。至于为什么不在解析到逗号后回溯，这个可能是考虑实现成本，左右操作数的操作符有很多，而且例如：

function a(){}
+

这种代码，你说是解析成命名函数表达式加上一个空字符串，还是解析成函数声明和一条语句呢？

因此，从现象上看，在判断 function 关键字的时候，js 引擎只看当前的上下文语境，而不进行回溯。（可能还有其他的潜在的问题导致不可能回溯）

Q3

()括号在 js 中也是一种运算符，叫组运算符，组运算符优先级最高，返回值是括号内的表达式求值的结果。

(function(){})构成了一个合法的表达式，而(var a=1)报错是因为组运算符内只允许表达式，var a=1是语句。

Q4

(0,function(){
  console.log(1)
})() // log 1, 返回 undefined
(function(){
  console.log(1)
}, 2)() // 报错，2不是函数

相信你已经明白了。

这篇关于javascript - 1开发者工具的回车，2逗号 圆括号的意义是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！