終於,幫開發寫了一個bug
阿新 • • 發佈：2020-05-19
### 寫在文章的開頭
最近專案比較緊，尤其前端的的需求比較多，作為一名測試，也會些vue，本著加快專案進度的美好想法，就自告奮勇的向組長承接了一部分開發的任務，其中有個需求需要在我們的廣告管理後臺新增一個上傳圖片的功能，需要先上傳到七牛雲，然後在將圖片的地址傳給服務端。
### bug的由來
在專案裡我們使用的是Iview元件庫的Upload元件，這個元件可以設定一個回撥函式用於在檔案上傳成功後做一些處理
on-success屬性可以用於指定上傳成功後的回撥函式，我就把圖片上傳到服務端的邏輯寫在了這個回撥函式中：
```js
handleSuccess(userId, res) {
if (res.key) {
let img
if (SERVER_ENV === 'local' || SERVER_ENV === 'development') {
img = `https://t-xxxx/${res.key}`
} else {
img = `https://xxxxx/${res.key}`
}
const params = {
'id': userId,
'sign_screenshot': img
}
const result = API.signScreenShot(params)
const { status, data, msg } = result
if (status !== 1000) {
this.$message(msg)
}
}
}
```
看起來一切都還好，我就想看看功能好使不，上傳了一張圖片，可是確報錯了
報錯顯示key這個屬性是undefined，chrome定位到的錯誤程式碼行是
```js
img = `https://t-xxxx/${res.key}`
```
這就讓我很不痛快，我的第一反應就是，明明第一個if語句已經判斷了key是存在，為什麼進入if程式碼裡確提示undefined，這不科學啊！一臉懵逼的我在if的前前後後都答應了日誌，就更加的一臉懵逼了，居然真的在if前面是有的，進入if後就是undefined，這很明顯已經脫離我的js認知範圍了，就只能找前端同學了。
### 被開發虐的那一瞬間
前端同學拿過程式碼一看，不對呀這，你下面咋又定義了：
```js
const res = API.signScreenShot(params)
```
你這變數提升了哇，，？？？？？？？，，小朋友你為什麼這麼多問號，然後我就走開了。
### js的變數提升
* 什麼是提升呢
宣告變數都會被移動到各自作用域的最頂端,這個過程被稱為提升
* es6的區域性作用域
在ES6中，{}會被定義為一個塊級作用域，在這個塊級作用域內，使用const定義變數，那麼定義就會被提升到塊的最頂端。js在執行之前會先進行編譯，編譯完就會把變數的定義提升到作用域的頂部，上面我寫的程式碼，const res就會出現在這裡
```js
if (res.key) {
const res
let img
if (SERVER_ENV === 'local' || SERVER_ENV === 'development') {
img = `https://t-xxxx/${res.key}`
} else {
img = `https://xxxxx/${res.key}`
}
const params = {
'id': userId,
'sign_screenshot': img
}
res = API.signScreenShot(params)
const { status, data, msg } = res
if (status !== 1000) {
this.$message(msg)
}
}
```
所以才會出現上面的報錯，在塊裡，我只聲明瞭，但是沒有複製這個時候，就去使用了，肯定會報undefined。
### 修復
改一下後面的變數名，，很簡單麼，，有啥難的麼，，！！
```js
const result = API.signScreenShot(params)
```
### 總結
終於bug被修復了，寫js程式碼儘量避免變數名重複，不然未知的坑不少，多多小心！
開發到測試一人完成，心裡也是美滋滋，學到不少，感謝前端同學，感謝自己，感謝你們就點個贊點個關注哇，哈哈！！
> 歡迎大家去 [我的部落格](https://www.immortalp.com) 瞅瞅，裡面有更多關於測試實戰的內容哦！！