Shulou(Shulou.com)06/03 Report--

Many novices are not very clear about the strange knowledge in JavaScript. In order to help you solve this problem, the following editor will explain it in detail. People with this need can come and learn. I hope you can gain something.

Experienced seniors have written countless codes and stepped on countless pits. But some pits may be untouchable for the rest of your life, because they don't happen in business code at all.

one

Function.prototype turns out to be a function type. The prototype of the custom function is the object type.

Typeof Function.prototype = = 'function'; / / true function People () {} typeof People.prototype = =' object'; / / true

So we set an empty function to do this:

/ / Good const noop = Function.prototype; / / Bad const noop = () = > {}

two

Is it true that a variable is not equal to itself?

Const x = NaN; x! = x / / true

This is so far the only data in the js language that is not equal to itself. Why? Because NaN represents a range, not a specific number. In the early isNaN () function, true was returned even if a string was passed in, which has been fixed in es6.

IsNaN ('abc'); / / true Number.isNaN (' abc') / / false

So if you want to be compatible with older browsers, it's a good idea to use x! = = x to determine if it's NaN.

three

Constructor if return has new data

/ / No function People () {} const people = new People (); / / People {} / / returns the number function People () {return 1;} const people = new People (); / / People {} / / returns the new object function Animal () {return {hello: 'world',};} const animal = new Animal (); / / {hello:' world'}

Returning a non-object type will not take effect when instantiating the constructor

four

Who on earth is call.Call cheering for?

Function fn1 () {console.log (1);} function fn2 () {console.log (2);} fn1.call.call (fn2); / / 2

So fn1.call.call (fn2) is equivalent to fn2.call (undefined). And no matter how many .calls you add, the effect is the same.

five

Can the object after the instance be instantiated again?

Function People () {} const lili = new People (); / / People {} const lucy = new tom.constructor (); / / People {}

Because the prototype chain of lili points to the prototype of People, by looking up for features, we finally find the constructor on Peopel.prototype, that is, People itself.

six

What strange things happen to setTimeout nesting?

Console.log (0, Date.now ()); setTimeout () = > {console.log (1, Date.now ()); setTimeout () = > {console.log (2, Date.now ()); setTimeout () = > {console.log (3, Date.now ()); setTimeout () = > {console.log (4, Date.now ()) SetTimeout (() = > {console.log (5, Date.now ()); setTimeout (() = > {console.log (6, Date.now ();})

At layer 0-4, the interval between setTimeout is 1ms, while at layer 5, the interval is at least 4ms.

seven

The es6 function generates a declaration scope when it takes a default argument

Var x = 10; function fn (x = 2, y = function () {return x + 1}) {var x = 5; return y ();} fn (); / / 3

eight

The function name in a function expression (not a function declaration) cannot be overridden

Const c = function CC () {CC = 123; return CC;}; c (); / / Function

Of course, if var CC is set to 123, the declaration keyword can be overridden.

nine

In strict mode, the this of a function is undefined, not Window

/ / non-strict function fn1 () {return this;} fn1 (); / / Window / / strict function fn2 () {'use strict'; return this;} fn2 (); / / undefined

For modular code packaged by webpack, it is basically strict mode code.

ten

Rounding operation can also be done with bitwise operation.

Var x = 1.23 | 0; / / 1

Because bitwise operations only support 32-bit integers, all decimal points are discarded

eleven

IndexOf () no longer needs to compare numbers

Const arr = [1,2,3]; / exist, equivalent to >-1 if (~ arr.indexOf (1)) {} / / does not exist, equivalent to = =-1! ~ arr.indexOf (1)

Bitwise operation is more efficient and the code is simpler. You can also use es6's includes (). But it is better to use indexOf for those who need to consider compatibility in writing open source library.

twelve

Can getter/setter be set dynamically?

Class Hello {_ name = 'lucy'; getName () {return this._name;} / / static getter get id () {return 1;}} const hel = new Hello (); hel.name; / / undefined hel.getName (); / / lucy / / dynamic getter Hello.prototype.__defineGetter__ (' name', function () {return this._name;}) Hello.prototype.__defineSetter__ ('name', function (value) {this._name = value;}); hel.name; / / lucy hel.getName (); / / lucy hel.name =' jimi'; hel.name; / / jimi hel.getName (); / / jimi

thirteen

0.3-0.2! = 0.1 / / true

Floating-point operations are imprecise and clich é, but errors are acceptable

0.3-0.2-0.1 {const fn = function () {}; fn.prototype = Super.prototype; Child.prototype = new fn (); ChildChild.prototype.constructor = Child;}

fifteen

Es6 can deconstruct objects repeatedly.

Const obj = {a: {b: 1}, c: 2}; const {a: {b}, a} = obj

One line of code gets both an and a.b. When both an and b are used many times, the logic of ordinary people is to deconstruct a first and then b on the next line.

sixteen

It is amazing to judge whether the code is compressed or not.

Function CustomFn () {} const isCrashed = typeof CustomFn.name = = 'string' & & CustomFn.name =' CustomFn'

seventeen

The object = compares the memory address, while > = compares the converted value

{} = = {} / / false / / implicit conversion toString () {} > = {} / / true

eighteen

Intanceof determines whether the prototype is on the prototype chain of the current object.

Function People () {} function Man () {} Man.prototype = new People (); ManMan.prototype.constructor = Man; const man = new Man (); man instanceof People; / / true / / replace the prototype People.prototype of People = {}; man instanceof People; / / false

If you use es6's class, prototype prototypes are not allowed to be redefined, so this will not happen

nineteen

Object.prototype.__proto__ = null; / / true

This is the top level that the prototype chain looks up, a null

twenty

Numbers that are too small for parseInt will produce bug

ParseInt (0.00000000454); / 4 parseInt (10.23); / / 10

twenty-one

1 + null / / 1 1 + undefined / / NaN Number (null) / / 0 Number (undefined) / / NaN

twenty-two

Arguments and formal parameter are aliases.

Function test (a, b) {console.log (a, b); / / 2,3 arguments [0] = 100; arguments [1] = 200; console.log (a, b); / / 100,200} test (2,3)

But you can use use strict strict mode to avoid this behavior, so that arguments is just a copy.

twenty-three

Void is a stubborn old man.

Void 0 = = undefined / / true void 1 = undefined / / true void {} = undefined / / true void 'hello' = undefined / / true void void 0 = undefined / / true

Don't be close to anyone.

twenty-four

Try/catch/finally also has a specific execution order.

Function fn1 () {console.log ('fn1'); return 1;} function fn2 () {console.log (' fn2'); return 2;} function getData () {try {throw new Error (');} catch (e) {return fn1 ();} finally {return fn2 ();}} console.log (getData ()); / / print order: 'fn1',' fn2', 2

In the try/catch code block, if the return xxyyzz; keyword is encountered, xxyyzz executes and places the value in the temporary variable, then executes the contents of the finally code block and then returns the temporary variable. If there is also a return aabbcc in the finally, the new data aabbcc is returned immediately.

twenty-five

Is there such a variable x so that it equals multiple numbers?

Const x = {value: 0, toString () {return + + this.value;}} x = = 1 & & x = = 2 & x = = 3; / / true

This is not a difficult thing to do through implicit conversion.

twenty-six

Can clearTimeout and clearInterval be used interchangeably?

Var timeout = setTimeout (() = > console.log (1), 1000); var interval = setInterval (() = > console.log (2,800); clearInterval (timeout); clearTimeout (interval))

The answer is YES. Most browsers support cleaning timers for each other, but it is recommended that you use the corresponding cleanup function.

twenty-seven

What is the following printing order?

SetTimeout (() = > {console.log (1);}, 0); new Promise ((resolve) = > {console.log (2); resolve ();}). Then (() = > console.log (3)); function callMe () {console.log (4);} (async () = > {await callMe (); console.log (5);}) ()

The answer is: 2, 4, 3, 5, 1

Main line task: 2pr 4

Micro tasks: 3. 5 Macro tasks: 1

twenty-eight

Null is an object type, but it does not inherit from Object, it is more like a historical legacy of bug. Given that too many people are using this feature, fixing it can lead to thousands of program errors.

Typeof null = 'object'; / / true Object.prototype.toString.call (null); / / [object Null] null instanceof Object; / / false is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.