前幾天寫(xiě)了一個(gè)頁(yè)面啤覆，在移動(dòng)端上顯示的，解構(gòu)也很簡(jiǎn)單惭聂，html+css+jQuery窗声，js寫(xiě)法用的ES6（let，const辜纲，還有箭頭函數(shù)）笨觅，內(nèi)容就是圖片+表格拦耐，一切都很順利，弄完了就沒(méi)什么事了见剩。
然而杀糯，今天上午的時(shí)候，同事過(guò)來(lái)說(shuō)苍苞，怎么安卓手機(jī)的瀏覽器打開(kāi)這個(gè)頁(yè)面固翰，點(diǎn)擊里面的按鈕都是沒(méi)反應(yīng)的呢？當(dāng)時(shí)還以為他是開(kāi)玩笑或者是他自己手機(jī)問(wèn)題羹呵，本著負(fù)責(zé)任的態(tài)度骂际，拿著自己安卓機(jī)打開(kāi)鏈接，試了一下冈欢，有問(wèn)題歉铝，接著有用同事的蘋(píng)果機(jī)試了幾個(gè)瀏覽器，沒(méi)問(wèn)題凑耻。好吧太示，開(kāi)始塘坑。
正常的表格樣式是
但是當(dāng)時(shí)的樣式是
沒(méi)錯(cuò)單單樣式上看沒(méi)多大區(qū)別香浩，就是三級(jí)聯(lián)動(dòng)的地址欄變空了先匪，但這就是問(wèn)題了，為什么會(huì)不顯示呢弃衍？而且點(diǎn)擊返回底部按鈕呀非，商品數(shù)量加減按鈕，輸入框設(shè)置了失焦事件）等等镜盯，沒(méi)有任何效果岸裙。第一時(shí)間作出了一下判斷
1.手機(jī)瀏覽器兼容問(wèn)題
2.JQuery版本問(wèn)題
針對(duì)這兩個(gè)問(wèn)題，立馬進(jìn)行驗(yàn)證速缆。
驗(yàn)證1：
本人手機(jī)安裝的瀏覽器有UC降允，QQ，360（自帶的）艺糜，為了測(cè)試又下載了百度瀏覽器剧董，結(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('購(gòu)買(mǎi)數(shù)量不能大于庫(kù)存');
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)擊，記過(guò)還是沒(méi)有效果
驗(yàn)證2：
原先引入的jQuery是3.1.1版本的真慢，然后換了1.8.3的版本毅臊，不行，換了zepto.js黑界，結(jié)果還是一樣管嬉。
那么這兩個(gè)方向就可以證實(shí)不是正確的了皂林，但是基本可以確定，js沒(méi)效果蚯撩。
接著上網(wǎng)google + 百度础倍，找了一堆東西發(fā)現(xiàn)沒(méi)一個(gè)是有用的，包括問(wèn)了一下圈里的朋友胎挎，都說(shuō)沒(méi)遇到過(guò)沟启，好吧，煩惱開(kāi)始了呀癣，那么為什么會(huì)這樣呢美浦？
上了個(gè)廁所回來(lái)，突然想到项栏，會(huì)不會(huì)是瀏覽器需要設(shè)置開(kāi)啟js腳本支持浦辨，接著又一通找瀏覽器里的設(shè)置，然并卵沼沈。
耐著性子繼續(xù)分析問(wèn)題流酬。既然頁(yè)面能夠顯示，那么說(shuō)明html跟css沒(méi)有問(wèn)題列另，dom節(jié)點(diǎn)操作沒(méi)有反應(yīng)芽腾，那就是js的問(wèn)題，那么是不是js引入不成功導(dǎo)致的呢页衙？
接著直接在script下加了一個(gè)alert(1)摊滔，顯示沒(méi)效果，那么好店乐，基本就判斷是Js沒(méi)引入的問(wèn)題艰躺。但是回頭一想，為什么360瀏覽器有效果呢眨八？360瀏覽器有效果不就是說(shuō)明js引入了腺兴，而且代碼沒(méi)有問(wèn)題嗎？于是又推翻了這個(gè)想法廉侧。
那么會(huì)不會(huì)是js跟瀏覽器的兼容問(wèn)題呢页响，就將ES6的寫(xiě)法改成ES5的，一測(cè)試段誊，可以了闰蚕，好吧，自己坑自己了枕扫。
最后在查找原因的時(shí)候陪腌，發(fā)現(xiàn)是因?yàn)榧^函數(shù)里的this的問(wèn)題。
在ES5中烟瞧，函數(shù)作為對(duì)象的方法調(diào)用時(shí)诗鸭，this指向的是調(diào)用的對(duì)象；而在ES6的箭頭函數(shù)中参滴，箭頭函數(shù)沒(méi)有自己的this, 它的this是繼承而來(lái); 默認(rèn)指向在定義它時(shí),它所處的對(duì)象(宿主對(duì)象),而不是執(zhí)行時(shí)的對(duì)象, 如果沒(méi)有强岸，就會(huì)一層層網(wǎng)上找，直到window砾赔。而在自己寫(xiě)的箭頭函數(shù)蝌箍，this正好是指向widow的，導(dǎo)致獲取不到執(zhí)行時(shí)的對(duì)象暴心，所以點(diǎn)擊沒(méi)有任何效果妓盲。
