閒聊~隱藏 console 輸出行數

一般網頁設計中，我們會使用到 console.log 在 Chrome Developer Tools輸出一些字串，並且可以在右邊看到這個console.log的位置

如果想隱藏 log 的來源行數讓其他用戶在 Chrome Developer Tools 無法得知程式的位置，該怎麼做呢?

取得 console.log

首先，先從取得 console.log 來了解他的屬性

我們先舉幾個例子，如果想透過一個變數來存取 console.log 並且輸出一段文字，該怎麼處裡呢?

首先，是一個錯誤的用法

const log = console.log;

log('hello world');//Error

再來看正確的使用方式

const log = console.log.bind(console);

log('hello world');//hello world

主要在於，console 是物件，而 .log 則是物件中的方法

console.log(typeof(console));//object

console.log(typeof(console.log));//function

可以以這樣的方式來檢視

//console object
const console = {
	log: ()=>{
  	//log function
  }
}

const logI = console.log;//錯誤

const logII = console.log.bind(console);//正確

當我們想用一個變數來存取 .log 時，並不能直接用第一個方式因為，log 方法必須要在 console 物件中執行才會成功。變數直接存取 log function 的方式，會造成 log function中的 this 會找不到 console，所以在變數儲存時，才需要透過 bind 的方式將 console 帶入 log 作為 this

另外，我們如果直接在 console 介面直接使用 bind ，接著傳入參數，會無法輸出正確結果

console.log.bind(console, 'hello world')  //ƒ log() { [native code] }

這時必須要用setTimeout

setTimeout(console.log.bind(console, 'hello world')) //hello world

隱藏輸出行數的作法

要隱藏輸出行數，一定要使用 setTimeout 來處理，寫法如下:

setTimeout(console.log.bind(console, 'hello world'));

當我們省略了 setTimeout 第二個時間參數，其實就會自動套用預設 0 即 ```setTimeout(fn,

雖然時間為 0，但是只要使用 setTimeout，就會自動等原本的js項目執行完畢才會開始處理這裡，我們透過直接consolel.log，以及透過 setTimeout、windows.onload 來處理觀察這裡面的順序，就會清楚很多

CVT2HUGO: 0) ```

window.onload = function(){console.log(0)}

setTimeout(function(){
    console.log(1)
})

console.log(2);


setTimeout(function(){
    console.log(3)
})

console.log(4);

/**
 * 輸出: 2,4,0,1,3 
 */


// setTimeout(console.log.bind(console,'hello world'));