前幾天寫了一個(gè)頁面，在移動(dòng)端上顯示的，解構(gòu)也很簡單，html+css+jQuery，js寫法用的ES6（let，const，還有箭頭函數(shù)），內(nèi)容就是圖片+表格，一切都很順利，弄完了就沒什么事了。
然而，今天上午的時(shí)候，同事過來說，怎么安卓手機(jī)的瀏覽器打開這個(gè)頁面，點(diǎn)擊里面的按鈕都是沒反應(yīng)的呢？當(dāng)時(shí)還以為他是開玩笑或者是他自己手機(jī)問題，本著負(fù)責(zé)任的態(tài)度，拿著自己安卓機(jī)打開鏈接，試了一下，有問題，接著有用同事的蘋果機(jī)試了幾個(gè)瀏覽器，沒問題。好吧，開始塘坑。
正常的表格樣式是
但是當(dāng)時(shí)的樣式是
沒錯(cuò)單單樣式上看沒多大區(qū)別，就是三級(jí)聯(lián)動(dòng)的地址欄變空了，但這就是問題了，為什么會(huì)不顯示呢？而且點(diǎn)擊返回底部按鈕，商品數(shù)量加減按鈕，輸入框設(shè)置了失焦事件）等等，沒有任何效果。第一時(shí)間作出了一下判斷
1.手機(jī)瀏覽器兼容問題
2.JQuery版本問題
針對這兩個(gè)問題，立馬進(jìn)行驗(yàn)證。
驗(yàn)證1：
本人手機(jī)安裝的瀏覽器有UC，QQ，360（自帶的），為了測試又下載了百度瀏覽器，結(jié)果發(fā)現(xiàn)除了手機(jī)自帶的360瀏覽器使用正常外，其余瀏覽器均不正常。
然后呢，將jQuery操作的代碼
$('.add').click(function(){
var a_num = Number($(this).siblings('input').val());
var inventory = Number($(this).siblings('input').attr('data-q'));
if(inventory <= a_num){
popW('購買數(shù)量不能大于庫存');
return;
}
a_num++
var price = $(this).siblings('input').attr('data-price');
var Total = price * a_num;
$(this).parents().siblings().children('span[class=price]').html(Total+'.00');
$(this).siblings('input').val(a_num);
})
改成了原生的JS
function addNum(){
alert(1);
}
點(diǎn)擊，記過還是沒有效果
驗(yàn)證2：
原先引入的jQuery是3.1.1版本的，然后換了1.8.3的版本，不行，換了zepto.js，結(jié)果還是一樣。
那么這兩個(gè)方向就可以證實(shí)不是正確的了，但是基本可以確定，js沒效果。
接著上網(wǎng)google + 百度，找了一堆東西發(fā)現(xiàn)沒一個(gè)是有用的，包括問了一下圈里的朋友，都說沒遇到過，好吧，煩惱開始了，那么為什么會(huì)這樣呢？
上了個(gè)廁所回來，突然想到，會(huì)不會(huì)是瀏覽器需要設(shè)置開啟js腳本支持，接著又一通找瀏覽器里的設(shè)置，然并卵。
耐著性子繼續(xù)分析問題。既然頁面能夠顯示，那么說明html跟css沒有問題，dom節(jié)點(diǎn)操作沒有反應(yīng)，那就是js的問題，那么是不是js引入不成功導(dǎo)致的呢？
接著直接在script下加了一個(gè)alert(1)，顯示沒效果，那么好，基本就判斷是Js沒引入的問題。但是回頭一想，為什么360瀏覽器有效果呢？360瀏覽器有效果不就是說明js引入了，而且代碼沒有問題嗎？于是又推翻了這個(gè)想法。
那么會(huì)不會(huì)是js跟瀏覽器的兼容問題呢，就將ES6的寫法改成ES5的，一測試，可以了，好吧，自己坑自己了。
最后在查找原因的時(shí)候，發(fā)現(xiàn)是因?yàn)榧^函數(shù)里的this的問題。
在ES5中，函數(shù)作為對象的方法調(diào)用時(shí)，this指向的是調(diào)用的對象；而在ES6的箭頭函數(shù)中，箭頭函數(shù)沒有自己的this, 它的this是繼承而來; 默認(rèn)指向在定義它時(shí),它所處的對象(宿主對象),而不是執(zhí)行時(shí)的對象, 如果沒有，就會(huì)一層層網(wǎng)上找，直到window。而在自己寫的箭頭函數(shù)，this正好是指向widow的，導(dǎo)致獲取不到執(zhí)行時(shí)的對象，所以點(diǎn)擊沒有任何效果。
