使用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知识点收藏
Feb 22 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
node.js 微信开发之定时获取access_token
Feb 07 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
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
详解JavaScript中的Object.is()与"==="运算符总结
2020/06/17 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
QML实现钟表效果
2020/06/02 Python
python urllib和urllib3知识点总结
2021/02/08 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
优秀求职自荐信怎样写
2013/12/18 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
学校开学标语
2014/10/06 职场文书
超市采购员岗位职责
2015/04/07 职场文书
小学大队委竞选口号
2015/12/25 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
mysql脏页是什么
2021/07/26 MySQL
解决MySQL报“too many connections“错误
2022/04/19 MySQL