[Reprint] Several meanings of parentheses in JavaScript

Source: Internet
Author: User

parentheses
JavaScript small brackets have five semantics
semantics 1, Parameter table when function declaration
functionFunc (ARG1,ARG2) {
// ...
}
semantics 2, combined with some statements to achieve certain qualifiers
Use with for
for(varAinchobj) {
// ...
}
Use with If
if(Boo) {
//...
}
Working with the while
while(Boo) {
// ...
}
Use with Do and Do{
// ...
}
while(Boo)
Note: When used with the IF, while, and do, the parentheses implicitly convert the result of the expression into a Boolean value. See implicit type conversions everywhere.
semantics 3, used with new to pass values (arguments)
Assuming that the class person is already defined, it has two field names (name), age
varP1 =NewPerson (' Jack ', 26);
semantics 4, as a call operator for a function or an object method (if a parameter is defined, it can be passed as an argument with semantic 3)
Assume that the function func has been defined
Func ();
Assume that the object obj is already defined and has the Func method
Obj.func ();
The typeof operator is mentioned here, and some people like to use it
Note that the parentheses after typeof are not semantic 4 (that is, not function calls), but rather the semantics 5 that are mentioned later. I use typeof generally without the parentheses in the back. See multiple invocation methods for named functions
semantics 5, forcing expression operations
functionStrtojson (str) {//eval string with mandatory operator ()
varJSON = eval (' (' + str + ') ');
returnJson
}
As for semantic 5, the most familiar is the use of eval to parse JSON
Another example is the use of anonymous function self-executing
(function(){
// ...
})();
Note that the 1th pair of parentheses in the above code is semantics 5, while the 3rd pair is semantic 4.

Curly Braces
There are four semantic effects of curly braces in JavaScript

Semantic 1, the organization of compound statements, which is the most common

if (condition) {
//...
}else {
//...
} for () {
//...
}

semantics 2, Object Direct Volume declaration

varobj = {name: ' Jack ', age:23};

The whole is an assignment statement, where {name: ' Jack ', age:23} is an expression.

semantics 3, declaring a function or function direct amount

Function F1 () {
//...
}
var F2 = function () {
//...
}

The difference between F1 and non-F2 is that the former is in the grammatical interpretation period, the latter in the running period. The difference is that if the code calling the function is after the function definition, then there is no difference; if the code calling the function is before the function definition, then F1 can still be called, and F2 will error, prompting F2 undefined.

Semantic 4, Syntax notation for structured exception handling
try {
//...
}catch (ex) {
//...
}finally{
//...
}

There is a difference between the curly brace and the conforming statement (semantics 1), if there is only one statement in the curly braces, the curly braces can be omitted in the if/else/for, but try/catch/finally cannot be omitted.

The following code tangled even n long

function () {} ()//Anonymous functions immediate execution, parsing period
{}.constructor//Get the constructor of object's direct amount, parse period error


It is puzzling why [].constructor writes without error, a constructor that wants to get the direct amount of the object, and a constructor that gets the direct amount of the array.

Of course, add a variable to receive will not error

The same situation as

varfn = function () {} (), and will not error.

In fact, JS's "statement precedence" in the mischief, that is, {} is understood as a compound statement block (semantics 1) instead of the object direct amount (semantics 2) or the semantics of the Declaration function (semantics 3).

function () {} (), the curly brace is interpreted as a compound statement, and the function () in front of nature declares that the syntax of the functions is incomplete resulting in a parsing period error.

{}.constructor, curly braces are interpreted as compound statements, the braces are followed by dot operators, and there is no reasonable object before the dot operator.

Fixes are well known: Add a mandatory operator ()

(function () {}) (), (function () {}),//force it to be understood as a function (semantics 3), "functions ()" means executing the function, which is executed immediately after the declaration.

({}). constructor//({}) forces the braces to be interpreted as the direct amount of the object (semantics 2), "object. xx" means to get the member of the object, and the point operator after nature can execute normally.


Middle Bracket
There are four types of semantics for JavaScript in parentheses

semantics 1, declaring an array

varary = []; Declares an empty array
varary = [1,3]; Declares an array and assigns an initial value


semantics 2, taking array members

varary = [n/a];varitem = ary[0];

semantics 3, defining object members (can not follow identifier rules)

varobj = {};
Adding an attribute to obj Name,name is a valid identifier, or it can be defined by obj.name way
obj[' name '] = ' jack ';
Adding an attribute to obj 2a,2a is not a valid identifier (cannot begin with a number) and cannot be defined by obj.2a
obj[' 2a '] = ' test ';

semantics 4, taking object members

varobj = {name: ' Jack '}; obj[' 2a '] = ' test ';
obj[' name ']; --Jack
obj[' 2a '; --Test (not available through obj.2a)

[Reprint] Several meanings of parentheses in JavaScript

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.