Fancy representation of JavaScript topics 26 letters

Look at the effect first.

Let's think first:

 // What does the following sentence print? 
[+ [] [0] + []] [ 0] [1 ]

We look directly at the effect:

If you feel that printing a letter is too addictive, print a word?

 // Note that printing in Chrome

[[] [0] + []] [ 0] [5 ] + [[] [[] [0] + []] [ 0] [4 ] + [[] [0] + []] [ 0] [5 ] + [[] [0] + []] [ 0] [1 ] + [[] [0] + []] [ 0] [2 ]] + []] [0] [ 8] + [[[] == []] [ 0] + [] [ 0] [2] + [[] [[] [ 0] + [] [ 0] [4] + [[] [ 0] + [] [ 0] [5] + [[] [ 0] + [] [ 0] [1] + [[] [ 0] + [] [ 0] [2] + []] [ 0] [6 ] + [[] [[] [0] + []] [ 0] [4 ] + [[] [0] + []] [ 0] [5 ] + [[] [0] + []] [ 0] [1 ] + [[] [0] + []] [ 0] [2 ]] + []] [0] [ 23] + [[] [0 ] + []] [0] [ 3] + [[] [[] [ 0] + [] [ 0] [4] + [[] [ 0] + [] [ 0] [5] + [[] [ 0] + [] [ 0] [1] + [[] [ 0] + [] [ 0] [2] + []] [ 0] [8 ] + [+ [1+[] [ 0] + [] [ 0] [3] + 309] [0 ] + []] [0] [ 7] + [[] [[] [ 0] + [] [ 0] [4] + [[] [ 0] + [] [ 0] [5] + [[] [ 0] + [] [ 0] [1] + [[] [ 0] + [] [ 0] [2] + []] [ 0] [6 ] + [[] [0] + []] [ 0] [0 ]

Let's look at the effect again:

Basic test

If you want to understand how the above is implemented, first check your own understanding of JavaScript implicit type conversion:

 // What will the following values print? 
console.log (+ []);
console.log ( 1+ []);
console.log (+ undefined);
console.log ([] == []);
console.log (+ [] == + []); 

If you cannot accurately state the above results, or if you want to better understand the above conversion process, we recommend that you first look at two articles:

JavaScript thematic headache type conversion (Part 1) .md

JavaScript topic headache type conversion (bottom) .md

Start Decryption

First effect:

  [] [0]

Because the empty array does not have the first element, undefined will be printed

Second effect:

  undefined + []

undefined + [] is equivalent to undefined + “” resulting in a “undefined” string.

This time has obtained an undefined string, we can only use the corresponding letters through the subscript.

However, if we don't use parentheses, how do we get the value? At this point, we need to use a trick:

The third effect:

  ['undefined'] [ 0] [0 ]

This time we get the “u” letter, by changing the subscript, we can get u, n, d, e, f, i total of 6 letters

Isn't it interesting, but that's just the beginning.

NaN

First effect:

  +undefined

is equivalent to Number (undefined), the result is NaN

Second effect:

  NaN+ []

equivalent to NaN+“” result to NaN string

The third effect:

  [NaN] [0 ] [1]

In this way we can get the letter a.

false

First effect:

  [] == []

The result is naturally false

Note, because of the two previous examples, you may have gradually understood that when taking out a value, if you turn into a string, if you take the letter of the subscript

Second effect:

 // convert to string by value + []
false + []

The third effect:

 // take the letter by [value] [0] [n]
['false'] [ 0] [0 

]

we can take out the f letter.

In this way, we can take out the five letters “f”, “a”, “l”, “s”, “e”.

true

Take a direct look at the core steps:

  + [] == + []

equivalent to comparing “” == “”, the result is naturally true

The rest of us must have been cooked.

The

letters obtained by the above 4 methods are still limited, and we need some other way to get more letters.

Infinity

Note: In the front we have taken the letter e.

  + (“1e309")

to a number, the equivalent of 1 times 10 309 times, greater than the maximum number of JavaScript, so the result will be Infinity, and the rest of the The steps are the same as above and will not be discussed later.

We can remove t and y from it.

function

Note: By this point we have obtained u n d e f i t r f a l s t y, from which we can spell the string “find”.

[]["find"]

displays the find function of the array, with the result:

function find() { [native code] }

With this approach, we can take out c o v.

But note: taking the letter v this way will have compatibility issues!!!

The magic constructor

Note that we already have 17 letters, we can now spell “constructor”!

constructor can be a magical property because through it we can get constructors for various types of value objects!

0["constructor"] // function Number() { [native code] }

""["constructor"] // function String() { [native code] }

...

In the above way, we can take m, g

Perhaps we wonder, how does“” mean it?

[] + [] === "" // true

name

With m, we can now spell the name, but what is the use of name?

"to" + ""["constructor"]["name"] // "toString"

Our ultimate goal is to spell out the “toString” string

The almight toString

The reason

we spelled out toString is because using toString this method can represent 26 letters!

At this time, we would like to introduce the usual obscure, but here indeed the final protagonist toString method!

The following quote from W3C school:

Role:

The

toString () method converts a Number object to a string and returns the result.

Usage:

NumberObject.toString (radix)

Parameter Explanation:

radix: Represents the radix of a number, making an integer between 2 and 36. If this parameter is omitted, base 10 is used. Note, however, that if the parameter is a value other than 10, the ECMAScript standard allows the implementation to return arbitrary values

To take an example:

var number = new Number(10);
number.toString('16');

That is, 10 is represented in hexadecomals. The above example prints the result “a”.

Note that radix can represent 36 maximum!!!!

var number = new Number(35);
number.toString('36');

The printed letter is “z”! In this way, we can represent all the remaining letters!

But how do we use this toString method? To be precise, how do we generate a number object? Do you still need to spell new Number?

I

don't even need it! At this point, the advantages of JavaScript implicit type conversion are highlighted:

35["toString"](36) // z

Note: By this time, we also had to use ()!

By this point, we can already show all the letters, some are very easy to show, some are somewhat troublesome, and the display is very long, such as the letter p:

25[[[+[] == +[]][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6] + [[] + []][0][[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][3]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][0] + []][0][1]+[[[] == []][0] + []][0][3]+[[+[] == +[]][0] + []][0][0]+[[+[] == +[]][0] + []][0][1]+[[][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][3]+[[+[] == +[]][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[+[] == +[]][0] + []][0][1]][[[][0] + []][0][1]+[+[][0] + []][0][1]+[0[[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][3]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][0] + []][0][1]+[[[] == []][0] + []][0][3]+[[+[] == +[]][0] + []][0][0]+[[+[] == +[]][0] + []][0][1]+[[][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][3]+[[+[] == +[]][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[+[] == +[]][0] + []][0][1]]+[]][0][11]+[[][0] + []][0][3]]](27)

The Basics of JS Must Know “Strict Mode 'use strict'”

JS's strict mode'use strict'should be familiar with knowledge, literally to explain is to follow strict behavior patterns to Write code. But what are the rules that constrain us to use strict mode to regulate our own code during development? So the purpose of this article is simply to deepen the understanding of the strict model once again. Although this article is the basics, I hope it helps you.

Definitions of Strict Mode

use strict is a (strict) running mode added to ECMAscript5, which makes Javascript Operate in stricter conditions. The implementation of strict mode makes your program or function follow a strict operating environment.

The purpose of establishing the “strict model” is to:

• Eliminate some unreasonable and inrigorous aspects of Javascript syntax and reduce some weird behavior;
• Eliminate some insecure aspects of code operation and ensure the safe operation of code;
• Improve compiler efficiency and increase running speed;
Padders
• for future versions of Javascript.

Use of strict mode

Enable strict mode for scripts

To open strict mode for the entire script file, you need to put a specific statement “use strict”before all statements; (or 'use strict';)

 // syntax for opening strict mode for the entire script
“ use strict”;
var v =  “Hi! I'm a strict mode script!” 

;

This syntax is stuck if you merge a script in strict mode with a script in non-strict mode: the merge appears to be strict mode. And vice versa: non-strict merging is strictly seeming non-strict. It is therefore recommended to either switch on strict mode or not use non-strict mode.

Enable strict mode for functions

To turn on strict mode for a function, you have to put “use strict”; (or 'use strict' ;) declarations are placed without leakage before all statements of the function body.

 function  strict ( ) {
 // function level strict mode syntax
 'use strict';
 function  nested ( ) { 
 return ” And so am I!” ; 
 }
 return ” Hi! I'm a strict mode function!  “ + nested ();
}

function  notStrict ( ) { 
 return ” I'm not strict.” ; 

}

Specifications for Strict Mode

variable

Rules for using variables in strict mode

1. Do not allow accidental creation of global variables
2. Declaring variables cannot be deleted using delete operator
3. Do not use reserved words (e.g. implements, interface, let, package, private, protecte, public, static, and yield identifiers) as variable names

Rule 1

 // create a global variable called message
message = “Hello JavaScript! “; //this line will throw ReferenceError 

Rule 2

 var x;
delete x; //!!! syntax error

eval(” var y; delete y;”); //!!! syntax error

Rule 3

 var private = 123; // !!! syntax error
var public = ' hello '; //!!! syntax error

object

Rules for using objects in strict mode

1. A value for a read-only attribute throws TypeError
2. Using the delete operator on non-configurable properties throws TypeError
3. Adding properties to non-extensible objects throws TypeError
4. When using object literal, attribute names must be unique

Rule 1

 // give a value to the read-only property
var obj2 = { get x () { return  17;}};
obj2.x = 5; // Throw TypeError error

// give a value to a non-writing property
var obj1 = {};
Object.defineProperty (obj1, “ x”, {  value: 42, writable:   false});
obj1.x = 9; // Throw TypeError error

Rule 2

  delete Object.prototype; // Throw TypeError error

Rule 3

 // give a value to the new property of an object that is not expensible
var fixed = {};
Object.preventExtensions (fixed);
fixed.newProp = “ohai”; // Throw TypeError error

Rule 4

  var o = {  p: 1, p: 2 }; //!!!! syntax error

Functions

Rules for using functions in strict mode

1. Requires unique parameters for named functions

 function  sum ( a, a, c){ //!!! syntax error
 return a +a+c; // code running here will go wrong

}

eval vs. arguments

Rules for using eval and arguments in strict mode

1. eval does not create variables or functions in the context of
2. eval and arguments cannot be bound or assigned by program syntax
3. The value of the parameter does not change as the value of the arguments object changes
4. The use of arguments.callee is prohibited

 function  doSomething ( ) {
 eval(” var x=10");
 alert (x); //Throw TypeError error

}

Rule 2All attempts below will cause a syntax error:

 eval =  17;
arguments++;
++eval;
var obj = { set p (arguments) {}};
var  eval;
try {} catch ( arguments) {}
function  x ( eval){}
function  arguments ( ) {}
var y = function  eval ( ) {};
var f = new  Function (“arguments”, “ 'use strict'; return 17;”); 

Rule 3

 function  f ( a){
 a = 42;
 return [Aa arguments[ 0]];
}
var pair = f ( 17);
console.assert (pair [ 0] ==42 );
console.assert (pair [ 1] ===17 );

Rule 4

 var f = function (){ 
 return arguments.callee; 
};
f (); //throw a type error

Suppressing traversing the call stack inside a function

 function  restricted ( ) {
 restricted.caller; //throws a type error
 restricted.arguments; //throw a type error

}

Static Bindings

1. Prohibit the use of the with statement
2. eval () declaration variables and functions are valid only in the scope of the current eval

Rule 1

 var x =  17;
with (obj) { //!!! syntax error
 // If strict mode is not enabled, the x in with will point to the x above with, or obj.x? 
 // If you don't run the code, we can't know it, so this code does not allow the engine to be optimized, and the speed will change. Slow. 
 x;

}

Rule 2

 var result = eval(” var x=10, y=11; x+y”);
alert (result); //21

this points to

This
1. in a function in a global scope no longer points to global but undefined.
2. If you forget to add new when using the constructor, this no longer points to the global object, but instead undefined

 // Rule 1
function  bar ( ) {
 console.log ( this)
}
bar () //undefined


// Rule 2
function  Person ( ) {
 this.name= “ Vincent” // Uncaught TypeError: Unset property 'name' of undefined
}

Person () //error is reported. If you forget to add new, this no longer points to global object, but undefined.name. 

summary

Now a lot of people are working with various frameworks and tools, but in fact, there is no problem in our development, because it brings efficiency gains. But all things can grow without root, so the foundation is always the basic core. I also know that everyone's time is limited, and it's not enough to take care of it. But I recommend taking some time on the basis, even if it takes 10 to 20 minutes a day to take a look at the basics, because every time I read it, there will be a certain gain.

I don't have a good technical skills or a solid foundation, so I remind myself every day not to stop moving forward.

### References
- [ JavaScript Advanced Programming (3rd Edition)] ( https://item.jd.com/10951037.html)
- [Strict Mode MDN] ( https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode 

)