前几天写了一个页面，在移动端上显示的，解构也很简单，html+css+jQuery，js写法用的ES6（let，const，还有箭头函数），内容就是图片+表格，一切都很顺利，弄完了就没什么事了。
然而，今天上午的时候，同事过来说，怎么安卓手机的浏览器打开这个页面，点击里面的按钮都是没反应的呢？当时还以为他是开玩笑或者是他自己手机问题，本着负责任的态度，拿着自己安卓机打开链接，试了一下，有问题，接着有用同事的苹果机试了几个浏览器，没问题。好吧，开始塘坑。
正常的表格样式是
image.png
但是当时的样式是
image.png
没错单单样式上看没多大区别，就是三级联动的地址栏变空了，但这就是问题了，为什么会不显示呢？而且点击返回底部按钮，商品数量加减按钮，输入框设置了失焦事件）等等，没有任何效果。第一时间作出了一下判断
1.手机浏览器兼容问题
2.JQuery版本问题
针对这两个问题，立马进行验证。
验证1：
本人手机安装的浏览器有UC，QQ，360（自带的），为了测试又下载了百度浏览器，结果发现除了手机自带的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('购买数量不能大于库存');
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);
}
点击，记过还是没有效果
验证2：
原先引入的jQuery是3.1.1版本的，然后换了1.8.3的版本，不行，换了zepto.js，结果还是一样。
那么这两个方向就可以证实不是正确的了，但是基本可以确定，js没效果。
接着上网google + 百度，找了一堆东西发现没一个是有用的，包括问了一下圈里的朋友，都说没遇到过，好吧，烦恼开始了，那么为什么会这样呢？
上了个厕所回来，突然想到，会不会是浏览器需要设置开启js脚本支持，接着又一通找浏览器里的设置，然并卵。
耐着性子继续分析问题。既然页面能够显示，那么说明html跟css没有问题，dom节点操作没有反应，那就是js的问题，那么是不是js引入不成功导致的呢？
接着直接在script下加了一个alert(1)，显示没效果，那么好，基本就判断是Js没引入的问题。但是回头一想，为什么360浏览器有效果呢？360浏览器有效果不就是说明js引入了，而且代码没有问题吗？于是又推翻了这个想法。
那么会不会是js跟浏览器的兼容问题呢，就将ES6的写法改成ES5的，一测试，可以了，好吧，自己坑自己了。
最后在查找原因的时候，发现是因为箭头函数里的this的问题。
在ES5中，函数作为对象的方法调用时，this指向的是调用的对象；而在ES6的箭头函数中，箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时,它所处的对象(宿主对象),而不是执行时的对象, 如果没有，就会一层层网上找，直到window。而在自己写的箭头函数，this正好是指向widow的，导致获取不到执行时的对象，所以点击没有任何效果。
网友评论