自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

JavaScript 里的奇葩知識，你遇到過嗎？

作者： 原罪
開發(fā) 前端
久經(jīng)沙場的前輩們，寫了無數(shù)代碼，踩了無數(shù)的坑。但有些坑，可能一輩子也踩不到摸不著，因?yàn)楦静粫l(fā)生在業(yè)務(wù)代碼里。

久經(jīng)沙場的前輩們，寫了無數(shù)代碼，踩了無數(shù)的坑。但有些坑，可能一輩子也踩不到摸不著，因?yàn)楦静粫l(fā)生在業(yè)務(wù)代碼里。

[[350932]]

1

Function.prototype 竟然是個函數(shù)類型。而自定義函數(shù)的原型卻是對象類型。

  1. typeof Function.prototype === 'function';  // true 
  2.  
  3. function People() {} 
  4. typeof People.prototype === 'object';      // true 

所以我們設(shè)置空函數(shù)可以這么做：

  1. // Good  
  2. const noop = Function.prototype; 
  3.  
  4. // Bad 
  5. const noop = () => {}; 

2

一個變量真的會不等于自身嗎?

  1. const x = NaN; 
  2. x !== x  // true 

這是目前為止 js 語言中唯一的一個不等于自己的數(shù)據(jù)。為什么?因?yàn)?NaN 代表的是一個范圍，而不是一個具體的數(shù)值。在早期的 isNaN() 函數(shù)中，即使傳入字符串，也會返回 true ，這個問題已經(jīng)在 es6 中修復(fù)。

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

所以如果您想兼容舊瀏覽器，用 x !== x 來判斷是不是NaN，是一個不錯的方案。

3

構(gòu)造函數(shù)如果 return了新的數(shù)據(jù)

  1. // 不返回 
  2. function People() {} 
  3. const people = new People();   // People {} 
  4.  
  5. // 返回數(shù)字 
  6. function People() { 
  7.   return 1; 
  8. } 
  9. const people = new People();   // People {} 
  10.  
  11. // 返回新對象 
  12. function Animal() { 
  13.   return { 
  14.     hello: 'world', 
  15.   }; 
  16. } 
  17. const animal = new Animal();  // { hello: 'world' } 

在實(shí)例化構(gòu)造函數(shù)時，返回非對象類型將不生效

4

.call.call 到底在為誰瘋狂打call?

  1. function fn1() { 
  2.   console.log(1); 
  3. } 
  4.  
  5. function fn2() { 
  6.   console.log(2); 
  7. } 
  8.  
  9. fn1.call.call(fn2); // 2 

所以 fn1.call.call(fn2) 等效于 fn2.call(undefined)。而且無論您加多少個 .call，效果也是一樣的。

5

實(shí)例后的對象也能再次實(shí)例嗎?

  1. function People() {} 
  2.  
  3. const lili = new People();            // People {} 
  4. const lucy = new tom.constructor();   // People {} 

因?yàn)?lili 的原型鏈指向了 People 的原型，所以通過向上尋找特性，最終在 Peopel.prototype 上找到了構(gòu)造器即 People 自身

6

setTimeout 嵌套會發(fā)生什么奇怪的事情?

  1. console.log(0, Date.now()); 
  2.  
  3. setTimeout(() => { 
  4.   console.log(1, Date.now()); 
  5.   setTimeout(() => { 
  6.     console.log(2, Date.now()); 
  7.     setTimeout(() => { 
  8.       console.log(3, Date.now()); 
  9.       setTimeout(() => { 
  10.         console.log(4, Date.now()); 
  11.         setTimeout(() => { 
  12.           console.log(5, Date.now()); 
  13.           setTimeout(() => { 
  14.             console.log(6, Date.now()); 
  15.           }); 
  16.         }); 
  17.       }); 
  18.     }); 
  19.   }); 
  20. }); 

在0-4層，setTimeout 的間隔是 1ms ，而到第 5 層時，間隔至少是 4ms 。

7

es6函數(shù)帶默認(rèn)參數(shù)時將生成聲明作用域

  1. var x = 10; 
  2.  
  3. function fn(x = 2, y = function () { return x + 1 }) { 
  4.   var x = 5; 
  5.   return y(); 
  6. } 
  7.  
  8. fn();   // 3 

 

8

函數(shù)表達(dá)式(非函數(shù)聲明)中的函數(shù)名不可覆蓋

  1. const c = function CC() { 
  2.   CC = 123; 
  3.   return CC; 
  4. }; 
  5.  
  6. c(); // Function 

當(dāng)然，如果設(shè)置 var CC = 123 ，加聲明關(guān)鍵詞是可以覆蓋的。

9

嚴(yán)格模式下，函數(shù)的 this 是 undefined 而不是 Window

  1. // 非嚴(yán)格 
  2. function fn1() { 
  3.   return this; 
  4. } 
  5. fn1(); // Window 
  6.  
  7. // 嚴(yán)格 
  8. function fn2() { 
  9.   'use strict'; 
  10.   return this; 
  11. } 
  12. fn2(); // undefined 

對于模塊化的經(jīng)過webpack打包的代碼，基本都是嚴(yán)格模式的代碼。

10

取整操作也可以用按位操作

  1. var x = 1.23 | 0;  // 1 

因?yàn)榘次徊僮髦恢С?2位的整型，所以小數(shù)點(diǎn)部分全部都被拋棄

11

indexOf() 不需要再比較數(shù)字

  1. const arr = [1, 2, 3]; 
  2.  
  3. // 存在，等效于 > -1 
  4. if (～arr.indexOf(1)) { 
  5.  
  6. } 
  7.  
  8. // 不存在，等效于 === -1 
  9. !~arr.indexOf(1); 

按位操作效率高點(diǎn)，代碼也簡潔一些。也可以使用es6的 includes() 。但寫開源庫需要考慮兼容性的道友還是用 indexOf 比較好

12

getter/setter 也可以動態(tài)設(shè)置嗎?

  1. class Hello { 
  2.   _name = 'lucy'; 
  3.   
  4.   getName() { 
  5.     return this._name; 
  6.   } 
  7.    
  8.   // 靜態(tài)的getter 
  9.   get id() { 
  10.     return 1; 
  11.   } 
  12. } 
  13.  
  14. const hel = new Hello(); 
  15.  
  16. hel.name;       // undefined 
  17. hel.getName();  // lucy 
  18.  
  19. // 動態(tài)的getter 
  20. Hello.prototype.__defineGetter__('name', function() { 
  21.   return this._name; 
  22. }); 
  23.  
  24. Hello.prototype.__defineSetter__('name', function(value) { 
  25.   this._name = value; 
  26. }); 
  27.  
  28. hel.name;       // lucy 
  29. hel.getName();  // lucy 
  30.  
  31. hel.name = 'jimi'; 
  32. hel.name;       // jimi 
  33. hel.getName();  // jimi 

13

  1. 0.3 - 0.2 !== 0.1  // true 

浮點(diǎn)操作不精確，老生常談了，不過可以接受誤差

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

14

class 語法糖到底是怎么繼承的?

  1. function Super() { 
  2.   this.a = 1; 
  3. } 
  4.  
  5. function Child() { 
  6.   // 屬性繼承 
  7.   Super.call(this); 
  8.   this.b = 2; 
  9. } 
  10. // 原型繼承 
  11. Child.prototype = new Super(); 
  12.  
  13. const child = new Child(); 
  14. child.a;  // 1 

正式代碼的原型繼承，不會直接實(shí)例父類，而是實(shí)例一個空函數(shù)，避免重復(fù)聲明動態(tài)屬性

  1. const extends = (Child, Super) => { 
  2.   const fn = function () {}; 
  3.    
  4.   fn.prototype = Super.prototype; 
  5.   Child.prototype = new fn(); 
  6.   ChildChild.prototype.constructor = Child; 
  7. }; 

15

es6居然可以重復(fù)解構(gòu)對象

  1. const obj = { 
  2.   a: { 
  3.     b: 1 
  4.   }, 
  5.   c: 2 
  6. }; 
  7.  
  8. const { a: { b }, a } = obj; 

一行代碼同時獲取 a 和 a.b 。在a和b都要多次用到的情況下，普通人的邏輯就是先解構(gòu)出 a ，再在下一行解構(gòu)出 b 。

16

判斷代碼是否壓縮居然也這么秀

  1. function CustomFn() {} 
  2.  
  3. const isCrashed = typeof CustomFn.name === 'string' && CustomFn.name === 'CustomFn'; 

17

對象 === 比較的是內(nèi)存地址，而 >= 將比較轉(zhuǎn)換后的值

  1. {} === {} // false 
  2.  
  3. // 隱式轉(zhuǎn)換 toString() 
  4. {} >= {}  // true 

18

intanceof 的判斷方式是原型是否在當(dāng)前對象的原型鏈上面

  1. function People() {} 
  2. function Man() {} 
  3. Man.prototype = new People(); 
  4. ManMan.prototype.constructor = Man; 
  5.  
  6. const man = new Man(); 
  7. man instanceof People;    // true 
  8.  
  9. // 替換People的原型 
  10. People.prototype = {}; 
  11. man instanceof People;    // false 

如果您用es6的class的話，prototype原型是不允許被重新定義的，所以不會出現(xiàn)上述情況

19

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

這是原型鏈向上查找的最頂層，一個 null

20

parseInt 太小的數(shù)字會產(chǎn)生 bug

  1. parseInt(0.00000000454);  // 4 
  2. parseInt(10.23);          // 10 

21

  1. 1 + null          // 1 
  2. 1 + undefined     // NaN 
  3.  
  4. Number(null)      // 0 
  5. Number(undefined) // NaN 

22

arguments 和形參是別名關(guān)系

  1. function test(a, b) { 
  2.   console.log(a, b); // 2, 3 
  3.    
  4.   arguments[0] = 100; 
  5.   arguments[1] = 200; 
  6.    
  7.   console.log(a, b); // 100, 200 
  8. } 
  9. test(2, 3); 

但是您可以用 use strict 嚴(yán)格模式來避免這一行為，這樣 arguments 就只是個副本了。

23

void 是個固執(zhí)的老頭

  1. void 0 === undefined          // true 
  2. void 1 === undefined          // true 
  3. void {} === undefined         // true 
  4. void 'hello' === undefined    // true 
  5. void void 0 === undefined     // true 

跟誰都不沾親~~

24

try/catch/finally 也有特定的執(zhí)行順序

  1. function fn1() { 
  2.   console.log('fn1'); 
  3.   return 1; 
  4. } 
  5.  
  6. function fn2() { 
  7.   console.log('fn2'); 
  8.   return 2; 
  9. } 
  10.  
  11. function getData() { 
  12.   try { 
  13.     throw new Error(''); 
  14.   } catch (e) { 
  15.     return fn1(); 
  16.   } finally { 
  17.     return fn2(); 
  18.   } 
  19. } 
  20.  
  21. console.log(getData()); 
  22.  
  23. // 打印順序: 'fn1', 'fn2', 2 

在 try/catch 代碼塊中，如果碰到 return xxyyzz; 關(guān)鍵詞，那么 xxyyzz 會先執(zhí)行并把值放在臨時變量里，接著去執(zhí)行 finally 代碼塊的內(nèi)容后再返回該臨時變量。如果 finally 中也有 return aabbcc ，那么會立即返回新的數(shù)據(jù) aabbcc 。

25

是否存在這樣的變量 x ，使得它等于多個數(shù)字?

  1. const x = { 
  2.   value: 0, 
  3.   toString() { 
  4.     return ++this.value; 
  5.   } 
  6. } 
  7.  
  8. x == 1 && x == 2 && x == 3;    // true 

通過隱式轉(zhuǎn)換，這樣不是什么難的事情。

26

clearTimeout 和 clearInterval 可以互換~~~~使用嗎

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

答案是：YES 。大部分瀏覽器都支持互相清理定時器，但是建議使用對應(yīng)的清理函數(shù)。

27

下面的打印順序是?

  1. setTimeout(() => { 
  2.   console.log(1); 
  3. }, 0); 
  4.  
  5. new Promise((resolve) => { 
  6.   console.log(2); 
  7.   resolve(); 
  8. }).then(() => console.log(3)); 
  9.  
  10. function callMe() { 
  11.   console.log(4); 
  12. } 
  13.  
  14. (async () => { 
  15.   await callMe(); 
  16.   console.log(5); 
  17. })(); 

答案是：2, 4, 3, 5, 1

主線任務(wù)：2，4

微任務(wù)：3，5宏任務(wù)：1

28

null 是 object 類型，但又不是繼承于 Object ，它更像一個歷史遺留的 bug 。鑒于太多人在用這個特性，修復(fù)它反而會導(dǎo)致成千上萬的程序出錯。

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

腦袋空了，想到再加。。。

 

責(zé)任編輯：趙寧寧 來源： Segmntfault
JavaScript代碼開發(fā)
相關(guān)推薦

2022-10-20 18:00:59

OCP模型參數(shù)

2009-07-23 15:07:32

2011-04-26 09:22:05

SQLite

2018-04-25 10:57:00

AIX報錯vios

2020-10-12 09:49:14

C++ 開發(fā)代碼

2023-03-13 07:41:34

分頁查詢數(shù)據(jù)排序

2019-09-15 22:36:26

數(shù)據(jù)庫查詢?nèi)罩?/a>檢索

2020-09-24 10:49:09

iOSiPadOSBug

2021-08-29 18:36:17

MySQL技術(shù)面試題

2024-03-18 08:14:07

SpringDAOAppConfig

2021-12-26 14:32:11

緩存數(shù)據(jù)庫數(shù)據(jù)

2021-04-04 22:31:26

白帽子廠商漏洞

2019-10-28 14:07:29

研發(fā)管理技術(shù)

2017-07-14 09:29:45

AndroidWebview

2020-11-04 12:00:05

JavaScript前端代碼

2021-02-19 11:01:46

異步競態(tài)接口異步

2021-05-27 09:27:35

開發(fā)技能緩存

2020-04-26 14:40:19

戴爾

2018-03-26 09:39:06

大數(shù)據(jù)IT互聯(lián)網(wǎng)

2021-12-30 09:32:04

緩存數(shù)據(jù)庫數(shù)據(jù)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號