Do you know the weird things in Javascript?

Our veteran predecessors have written countless codes and stepped into countless pitfalls. But there are some pitfalls that you may never step on or touch in your life, because they will never happen in the business code~~

1

Function.prototype is actually a function type. The prototype of a custom function is an object type.

typeof Function.prototype === 'function'; // true

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

So we can set an empty function like this:

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

2

Can a variable really be not equal to itself?

const x = NaN;
x !== x // true

This is the only data in the js language that is not equal to itself so far. Why? Because NaN represents a range, not a specific value.
In the earlier isNaN() function, even if a string is passed in, it will return true. This problem has been fixed in es6.

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

So if you want to be compatible with old browsers, using x !== x to determine whether it is NaN is a good solution.

3

If the constructor returns new data

// does not return function People() {}
const people = new People(); // People {}

// Returns a number function People() {
 return 1;
}
const people = new People(); // People {}

// Returns a new object function Animal() {
 return {
  hello: 'world',
 };
}
const animal = new Animal(); // { hello: 'world' }

When instantiating a constructor, returning a non-object type will not work

4

.call.call Who is it 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 .call you add, the effect is the same.

5

Can an instantiated object be instantiated again?

function People() {}

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

Because lili's prototype chain points to the People prototype, by searching upwards for properties, we eventually find the constructor, People itself, on Peopel.prototype.

6

What weird things will happen when nesting setTimeout?

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 layers 0-4, the setTimeout interval is 1ms, while at layer 5, the interval is at least 4ms.

7

es6 function with default parameters will generate declaration scope

var x = 10;

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

fn(); // 3

8

Function names in function expressions (non-function declarations) cannot be overwritten

const c = function CC() {
 CC = 123;
 return CC;
};

c(); // Function

Of course, if you set var CC = 123, adding the declaration keyword can overwrite it.

9

In strict mode, the this of the function is undefined instead of Window

// Non-strict function fn1() {
 return this;
}
fn1(); // Window

// strict function fn2() {
 'use strict';
 return this;
}
fn2(); // undefined

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

10

Rounding operations can also be done using bitwise operations

var x = 1.23 | 0; // 1

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

11

indexOf() no longer needs to compare numbers

const arr = [1, 2, 3];

// exists, equivalent to > -1
if (~arr.indexOf(1)) {

}

// does not exist, equivalent to === -1
!~arr.indexOf(1);

Bitwise operations are more efficient and the code is more concise. You can also use es6 includes(). But if you need to consider compatibility when writing open source libraries, it is better to use indexOf.

12

Can getters/setters also 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

13

0.3 - 0.2 !== 0.1 // true

Floating point operations are not precise, which is a commonplace, but the error is acceptable.

0.3 - 0.2 - 0.1 <= Number.EPSILON // true

14

How is class syntax sugar inherited?

function Super() {
 this.a = 1;
}

function Child() {
 // Property inheritance Super.call(this);
 this.b = 2;
}
// Prototype inheritance Child.prototype = new Super();

const child = new Child();
child.a; // 1

The prototype inheritance of the formal code will not directly instantiate the parent class, but instantiate an empty function to avoid repeated declaration of dynamic properties

const extends = (Child, Super) => {
 const fn = function () {};
 
 fn.prototype = Super.prototype;
 Child.prototype = new fn();
 Child.prototype.constructor = Child;
};

15

es6 can actually deconstruct objects repeatedly

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

const { a: { b }, a } = obj;

One line of code gets both a and ab.
When both a and b are used multiple times, the common logic is to deconstruct a first, and then deconstruct b in the next line.

16

It’s so cool to judge whether the code is compressed

function CustomFn() {}

const isCrashed = typeof CustomFn.name === 'string' && CustomFn.name === 'CustomFn';

17

Object === compares memory addresses, while >= compares converted values

{} === {} // false

// Implicit conversion toString()
{} >= {} // true

18

The judgment method of intanceof is whether the prototype is on the prototype chain of the current object

function People() {}
function Man() {}
Man.prototype = new People();
Man.prototype.constructor = Man;

const man = new Man();
man instanceof People; // true

//Replace People's prototype People.prototype = {};
man instanceof People; // false

If you use es6 class, the prototype prototype is not allowed to be redefined, so the above situation will not occur

19

Object.prototype.__proto__ === null; // true

This is the top level of the prototype chain, a null

20

parseInt will cause a bug if the number is too small

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

twenty one

1 + null // 1
1 + undefined // NaN

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

twenty two

The actual parameters and formal parameters will maintain a synchronized relationship

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

If the number of actual parameters passed is insufficient, the synchronization relationship will also fail.
You can also use use strict mode to avoid this behavior, so that arguments are just copied.

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

No one is related to anyone~~

twenty four

try/catch/finally also have 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());

// Printing order: 'fn1', 'fn2', 2

In the try/catch code block, if you encounter the return xxyyzz; keyword, xxyyzz will be executed first and the value will be placed in a temporary variable. Then the contents of the finally code block will be executed and the temporary variable will be returned.
If there is also return aabbcc in finally, the new data aabbcc will be returned immediately.

25

Is there a variable x such that it is equal to multiple numbers?

const x = {
 value: 0,
 toString() {
  return ++this.value;
 }
}

x == 1 && x == 2 && x == 3; // true

With implicit conversion, this is not a difficult thing to do.

26

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 mutual cleanup timers, but it is recommended to use the corresponding cleanup function.

27

What is the printing order below?

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 quest: 2, 4
Microtasks: 3, 5
Macro Tasks: 1

28

null is of object type, but it does not inherit from Object. It is more like a historical bug. Given that so many people were using this feature, fixing it would cause thousands of programs to break.

typeof null === 'object'; // true
Object.prototype.toString.call(null); // [object Null]
null instanceof Object; // false

29

When operating on basic types (except null and undefined), the engine will automatically package the data into objects and destroy the objects after the operation.

'abc'.substr(1);
(123).toFixed(2);

So any data added will be destroyed unless the prototype chain is modified

const data = 'abc';
data.x = 'y';
console.log(data.x); // undefined

data.__proto__.x = 'z';
console.log(data.x); // 'z'

30

Data becomes unsafe when it exceeds the safety value

Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2; // true

// equivalent to 2 ** 53 === 2 ** 53 + 1; // true

31

When function parameters have default values, some perceptions will change

function test(a, b = 1) {
 // alias synchronization, non-strict mode is expected to be synchronized arguments[0] = 20;
 console.log(a); // 2
}
// Check the number of function parameters, the expected value is: 2
console.log(test.length); // 1

test(123);

32

Numbers are all floating point types. When performing bitwise operations, js will first convert the number to int type. Compared to other languages, this is an additional performance overhead.

1 | 0 // 1
1.234 | 0 // 1
1.234 | 0.6 // 1

1 & 1 // 1
1.23 & 1.456 // 1

~1 // -2
~1.234 // -2

33

Assigning to location can jump directly

location = 'http://baidu.com';

34

Do you know another use of new?

function Test() {
 console.log(new.target === Test); // true
}

new Test();

If a subclass is instantiated, then new.target is not Test. This method can achieve the effect of abstract class.

35

There is a difference between +0 and -0

1/+0 === Infinity
1/-0 === -Infinity

The above is the details of the weird knowledge in Javascript, do you know? For more information about weird knowledge in JavaScript, please pay attention to other related articles on 123WORDPRESS.COM!