Q1 Use developer tools, console, and enter a piece of js code. What happens when you hit enter?
How to interpret the output and error in the figure below
Q2 In addition to variable declaration and definition, what happens when you click Enter when there is a comma?
How to interpret the output and error in the figure below
Q3 What happened after adding the parentheses operator and pressing Enter?
Why here, the first and third, are different from the results above
Q4 Comma, parentheses (execute the function immediately), and carriage return, the common effects are as follows
I hope I can figure it out based on the previous questions
Xiaobai is asking a question due to obsessive-compulsive disorder, thank you all in advance!
走同樣的路,發(fā)現(xiàn)不同的人生
Press Enter, the console will use the js parser of the page to execute the entered code, and display the return value obtained by executing the last statement in the console.
var a=1 // undefined
a=111 //111
111 // 111
The reason is that the return value of the var statement is undefined
, a=111
這是一個(gè)賦值運(yùn)算,賦值運(yùn)算的返回值是a
. It is a bit difficult to explain the error reported by the anonymous function.
There are two concepts about functions in js: function declaration and function expression.
var a = function(){} // 函數(shù)表達(dá)式,(匿名函數(shù)表達(dá)式)
function b(){} // 函數(shù)聲明
var c = function c(){} // 函數(shù)表達(dá)式(命名函數(shù)表達(dá)式)
// 舊IE不支持named function expression
Since function declarations are very similar to named function expressions, how does the js engine distinguish function
whether a keyword is followed by a function declaration or a function expression? The answer lies in the current context. If the context is an evaluation environment, then function is considered to introduce a function expression, otherwise it is considered to be a function declaration.
The error reported in Q1 is because the current context is not an evaluation context, and function is parsed as a function declaration. The error Uncaught SyntaxError: Unexpected token (
means an unexpected left bracket. It is easy to understand. The function declaration requires a function name, which is not given here. A left bracket appears in the function name, so the syntax error reported is in the position of the left bracket.
,
Comma is an operator in js. The comma operator will execute the expressions around the comma in sequence, and the return value is the value of the expression on the right side of the comma.
1,function(){} // => function(){}
The reason why no error is reported is because the context 1,...
constitutes an evaluation context, so the subsequent function is correctly parsed as a function expression.
The error is reported when writing in reverse, because the comma operator has not been parsed yet, and it is not currently an evaluation context, so function is recognized as a function declaration. As for why we don’t backtrack after parsing the comma, this may be due to implementation costs. There are many operators for left and right operands, and for example:
function a(){}
+“”
Do you think this kind of code should be parsed into a named function expression plus an empty string, or should it be parsed into a function declaration and a statement?
So, judging from the phenomenon, when judging the function keyword, the js engine only looks at the current context without backtracking. (There may be other potential problems that make backtracking impossible)
()
括號(hào)在 js 中也是一種運(yùn)算符,叫組運(yùn)算符
, the group operator has the highest priority, and the return value is the result of the expression evaluation within the brackets.
(function(){})
構(gòu)成了一個(gè)合法的表達(dá)式,而(var a=1)
報(bào)錯(cuò)是因?yàn)榻M運(yùn)算符內(nèi)只允許表達(dá)式,var a=1
is a statement.
(0,function(){
console.log(1)
})() // log 1, 返回 undefined
(function(){
console.log(1)
}, 2)() // 報(bào)錯(cuò),2不是函數(shù)
I believe you already understand.
Click Enter. <
后面的是返回值,變量聲明var a = 1
has no return value, so it is undefined. Direct variable + Enter is equivalent to outputting this variable.
',' is an operator. In C language, ,
is the operator with the lowest priority (presumably js should also be the same). Its function is to first calculate the formula in front of ',', and then calculate ',' The following formula, the final result returns the formula after ','.
Once this is confirmed, most of your problems will be solved.
Finally, var a = 1
根據(jù)詞法解析,其實(shí)等同于var a; a = 1
這兩句。而js里面()
又比較特殊,放表達(dá)式是沒(méi)問(wèn)題的,比如(a = 1)
或者(a ? b : c)
this kind of thing is fine.
The problem is that (var a)
是錯(cuò)的,因?yàn)檫@不是表達(dá)式,不能括起來(lái)。同樣的(if (a) else {c})
is written incorrectly. This needs to be written in such a way that it can be enclosed using the ternary operator.
In fact, the main question of the question is the difference between 語(yǔ)句
和表達(dá)式
in js. If you understand what a statement is and what an expression is, you can understand all the above questions by yourself.
Ask and answer your own questions and summarize:
Press Enter, the console will use the js parser of the page to execute the entered code, and display the return value obtained by executing the last statement in the console.
Variable declaration and function declaration do not return any value, or return undefined
JS determines whether the function keyword is followed by a function declaration or a function expression, depending on the context above.
Comma operator: perform multiple operations in one statement. When used for assignment, the comma operator returns the last item in the expression. ————The Little Red Book has
var num =(1,2,3,0) //num的值為0
Parenthes are not operators, but a grammatical construct.
var x = 1;
(x) //迷惑
var x = 1;
(x) = 2;//返回2,沒(méi)有報(bào)錯(cuò),所以“圓括號(hào)不是運(yùn)算符,而是一種語(yǔ)法結(jié)構(gòu)?!?/code>
它一共有兩種用法:
一種是把表達(dá)式放在圓括號(hào)之中,提升運(yùn)算的優(yōu)先級(jí);
另一種是跟在函數(shù)的后面,作用是調(diào)用函數(shù)。
Note: Only expressions can be placed within operator parentheses. If a statement is placed within parentheses, an error will be reported.
Immediately execute the function ()()
The first bracket must be function, specifically (combined with Q3) function expression, anonymous expression or named expression can be used
The above reference: will's answer and Ruan Yifeng's JS standard reference tutorial - operators