使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置


Posted in Javascript onNovember 02, 2018

前言

本文主要给大家介绍的是关于使用Object.defineProperty巧妙找到修改某个变量的准确代码位置的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧

语法

Object.defineProperty(obj, prop, descriptor)

参数

  • obj 需要定义属性的对象。
  • prop 需被定义或修改的属性名。
  • descripter 需被定义或修改的属性的描述符。

发现问题

最近的工作又遇到一个难题。前端UI右下角这个按钮被设置为"禁用(disabled)"状态。

使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置

这个按钮的可用状态由属性enabled控制。我通过调试发现,一旦下图第88行代码执行完毕之后,这个按钮的属性mProperties里就多出一个enabled:false的属性。

使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置

而88行执行之前,还没有这个enabled:false的属性。正是这个属性让按钮进入了禁用状态。

使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置

我单步调试setModel函数,花了半个小时的时间也没能找到这个enabled属性到底是在哪一行代码加进去的。

解决方法

于是我只有寻求其他办法。我想到了Object.defineProperty这个方法:

使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置

使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置

我在Chrome开发者工具里执行如下代码,首先根据button的ID用ui.byId方法找到这个被禁用按钮的实例,然后用Object.defineProperty给按钮实例的属性集合mProperties注入一个get方法,实现体只有一个debugger语句。如此一来,每次button的mProperties被访问时,都会自动触发一个断点。而mProperties属性发生变化时,必定会先产生读取动作,因此断点停下来时,我通过观察调用栈的上下文就能够找到是哪一行代码修改了mProperties。

var ui = sap.ui.getCore();

var button = ui.byId("button97DXvDVKUawkYgK3YQVram_64");

Object.defineProperty(button, "mProperties", { get: function(){ debugger;}});

使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置

现在就来试试。果然断点自动触发了。我成功找到了我在寻找的给mProperties添加了enabled = false的代码位置。

使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置

使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 #Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 #Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 #Javascript
小程序实现列表点赞功能
Nov 02 #Javascript
Vue中的vue-resource示例详解
Nov 02 #Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 #Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 #Javascript
You might like
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
jQuery1.6 使用方法二
2011/11/23 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
Mac下安装vue
2018/04/11 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
详解Vue之计算属性
2020/06/20 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
python删除文件示例分享
2014/01/28 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
python动态文本进度条的实例代码
2020/01/22 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
几个常见的消息中间件(MOM)
2014/01/08 面试题
酒店前台辞职书
2015/02/26 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
2016年寒假见闻
2015/10/10 职场文书
入团申请书格式
2019/06/20 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android