- Simple attributes and simple methods
- Calculating attribute name and [[the prototype]]
- super objects (escrow resolved)
- Literal template (template string)
First, the simple attributes and simple methods
ES6 in order to continuously optimize the code to reduce coupling of the code in syntax and down a lot of effort, a blog on deconstruction is one of them, in the name of the object properties and methods have also been optimized, this blog is to parse simple attributes and simple methods.
What is the simple attribute it? When a literal way through declare an object, attribute names and variable names assigned when a match, you can use simple attributes, example:
1 // object literal ES6 simple attribute 2 var X = 2, Y =. 3 , . 3 obj = { . 4 X, . 5 Y . 6 }; . 7 // compile the results of ES5 . 8 var X = 2 , . 9 Y =. 3 , 10 obj = { . 11 X: X, 12 is Y: Y 13 is };
What is the simple way to do that? When objects are declared using object literals, character function method can be omitted, examples:
1 // object literal ES6 simple method 2 var obj = { . 3 foo () { . 4 // ... . 5 }, . 6 Fun () { . 7 // ... . 8 } . 9 } 10 // the ES5 compiled results . 11 var obj = { 12 is foo: function foo () { // ... 13 is }, 14 Fun: function Fun () { // ... 15 } 16 };
But the simple method should be noted that, if present in the object method needs to implement a recursive algorithm, then it can not use the simple method of grammar, such as the following codes (ES5 code) can not be converted into a simple method of writing:
. 1 function ruSomething (O) { 2 var X = Math.random (), . 3 Y = Math.random (); . 4 return o.something (X, Y); . 5 } . 6 . 7 ruSomething ({ . 8 something: function something ( X, Y) { . 9 IF (X> Y) { 10 return something (Y, X); // this recursion, do not use simple syntax . 11 } 12 is return Y - X; 13 is } 14 });
Why not? Then look at the wording simple syntax:
. 1 // for ES6 with simple grammar to write a sample code (error code, do not use) 2 ruSomething ({ . 3 something (X, Y) { . 4 IF (X> Y) { . 5 return something (Y, X); . 6 } . 7 return Y - X; . 8 } . 9 }); 10 // compiled results of ES5 . 11 ruSomething ({ 12 is something: function (_something) { 13 is function something (the _x, _x2) { 14 return _something.apply ( the this , arguments) ; 15 } 16 17 something.toString = function () { 18 return _something.toString(); 19 }; 20 21 return something; 22 }(function (x, y) { 23 if (x > y) { 24 return something(y, x); 25 } 26 27 return y - x; 28 }) 29 });
Because something (y, x) recursion can not find a reference to this method, at compile time will be considered the front parentheses concise writing method is executed, followed by a scoping block you would think there is a function something (x compile time , y) {...} on the scope, and finally compile the results derived ES5 is this strange code.
This time might be thought to something (y, x) plus a recursive this point, can be solved, take a look at this conjecture is established:
. 1 // for ES6 objects recursively implemented using this 2 ruSomething ({ . 3 something (X, Y) { . 4 IF (X> Y) { . 5 return this .something (Y, X); . 6 } . 7 return Y - X; 8 } 9 }); 10 // compiled results of ES5 . 11 ruSomething ({ 12 is something: function something (X, Y) { 13 is IF (X> Y) { 14 return the this .something (Y, X); 15 } 16 17 return y - x; 18 } 19 });
Looked at the code seems to compile correctly, no problem, but such an approach has a flaw, look at the following simulation code:
1 var controller = { 2 makeRequest(..){ 3 //.. 4 this.makeRequest(..); 5 } 6 } 7 bun.addEventListener("click",controller.makeRequest,false);
This code simulates the method is the object of the event is triggered, you think it's this point to who? No need for me to say it. Therefore, when the method of the object needs to be executed for the recursive computation it is preferable to use the syntax of ES5.
Second, the calculation of the property name
Calculated attribute name starting in ES5 already in existence, but the relatively ES6 computed attribute name is still not reached the easiest way. The property name is actually calculated using the expression evaluates to get an object attribute name, first name attribute is calculated to recall the ES5:
. 1 // the ES5 calculated attribute name 2 var prefix = "USER_" ; . 3 var O = { . 4 baz: function () {} . 5 } . 6 O [prefix + "foo"] = function () {}; . 7 O [ + prefix "bar"] = function () {};
ES5 calculated using property name can not be directly written in the object literal, but rather by way of additional bonds to achieve the object, and can be directly written on ES6 object literal:
1 var prefix = "user_"; 2 var obj = { 3 baz:function(){}, 4 [prefix + "foo"] : function(){}, 5 [prefix + "bar"] : function(){} 6 }
In this part of the literal object properties, Incidentally, ES6 standard of [[prototype]] property of the prototype can add objects to use point directly, but this standardization there is a considerable controversy, this standardization is in order before all compatible js code words have grammatical standards.
1 var a = {...} 2 var obj = { 3 __proto__:a, 4 ... 5 }
Third, the template literal
Template literal have often referred to as template string, some people say is an enhanced version of the string, identified by the anti-quotation marks ( `). Template string can be used as an ordinary character string, it may be used to define multiple rows of strings, or embedded in the string variable.
. 1 // for ES6 template literal Syntax 2 // ordinary strings . 3 the console.log ( `the In the JavaScript \ n IS-feed.` Line A); // can use \ n to achieve wrap 4 // multiline string, templates can be automatically wrap . 5 the console.log ( . 6 `the in the JavaScript the this IS . 7 Not legal`); . 8 // string embedded variable . 9 var name =" Bob ", Time =" Today " ; 10 the console.log (` $ {name} hello, How are you $ {} `Time); . 11 12 is // the ES5 compile the results 13 is the console.log (" the In the JavaScript \ n-IS-A Line Feed. " ); 14 console.log("In JavaScript this is\nnot legal"); 15 var name = "Bob", 16 time = "today"; 17 console.log("Hello ".concat(name, ", how are you ").concat(time));
May be used in the template grammar embedding $ {...}, so that you can use templates to reuse, because if it is of plain character string concatenation using only "+", this wording is acquired character string value stitching, rather than splicing expression templates with literal $ {..} and embedded in the template string syntax can achieve reuse.
. 1 // for ES6 insert (insert) expression can be nested, and the use of templates 2 function Upper (S) { . 3 return s.toUpperCase (); . 4 } . 5 var WHO = "Reader" ; . 6 var text = . 7 ` Upper Rey $ {a ( "Warm" )} available for purchase . 8 ! All of you to Upper {$ ( `$ {} s` WHO)} `; . 9 the console.log (text); 10 // compiled results of ES5: 11 function Upper (S) { 12 is return s.toUpperCase (); 13 is } 14 15 var WHO = "Reader" ; 16 var text = "A rey ".concat(upper("warm"), " welcome\nto all of you ").concat(upper("".concat(who, "s")), "!"); 17 console.log(text);
About the label template to use as a literal method parameters, it will be like a string string the same? Do not literal alternative parameter template, since the template used as a literal argument is a method of independent syntax, commonly referred to as literal label templates, look example:
1 function foo(strings, ...values){ 2 console.log(strings), 3 console.log(values) 4 } 5 6 function bar(){ 7 return function foo(strings, ...values){ 8 console.log(strings), 9 console.log(values) 10 } 11 } 12 var desc = "awesome"; 13 foo `Everything is ${desc}!`; 14 bar()`Everything is ${desc}!`; 15 //上面两种执行结果一致 16 //["Everything is ", "!"] 17 //["awesome"]
In literal label template grammar, the first parameter is embedded collection template expression $ {...} divided string array, the second parameter to be used "..." syntax collector embedding Expression formula acquired data sets. You can learn more about "You do not know js" lower volume P100 ~ P103