日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
JavaScript里的奇葩知識，你遇到過嗎？

久經(jīng)沙場的前輩們，寫了無數(shù)代碼，踩了無數(shù)的坑。但有些坑，可能一輩子也踩不到摸不著，因為根本不會發(fā)生在業(yè)務代碼里。

安圖網(wǎng)站建設公司創(chuàng)新互聯(lián),安圖網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為安圖成百上千家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設要多少錢，請找那個售后服務好的安圖做網(wǎng)站的公司定做！

1

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

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

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

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

2

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

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

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

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

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

3

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

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

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

4

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

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

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

5

實例后的對象也能再次實例嗎?

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

因為 lili 的原型鏈指向了 People 的原型，所以通過向上尋找特性，最終在 Peopel.prototype 上找到了構造器即 People 自身

6

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

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

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

7

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

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

8

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

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

當然，如果設置 var CC = 123 ，加聲明關鍵詞是可以覆蓋的。

9

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

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

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

10

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

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

因為按位操作只支持32位的整型，所以小數(shù)點部分全部都被拋棄

11

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

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

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

12

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

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

13

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

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

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

14

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

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

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

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

15

es6居然可以重復解構對象

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

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

16

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

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

17

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

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

18

intanceof 的判斷方式是原型是否在當前對象的原型鏈上面

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

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

19

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

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

20

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

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

21

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

22

arguments 和形參是別名關系

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

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

23

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

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

跟誰都不沾親~~

24

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

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

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

25

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

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

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

26

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

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

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

27

下面的打印順序是?

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

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

主線任務：2，4

微任務：3，5宏任務：1

28

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

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

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


文章名稱：JavaScript里的奇葩知識，你遇到過嗎？
鏈接URL：http://www.5511xx.com/article/cdoieid.html