使用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 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
js友好的时间返回函数
Aug 24 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
微信小程序实现点赞、取消点赞功能
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
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
Jquery 插件开发笔记整理
2011/01/17 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
jquery.map()方法的使用详解
2015/07/09 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
商业活动邀请函
2014/02/04 职场文书
电力培训心得体会
2014/09/02 职场文书
毕业典礼邀请函
2015/01/31 职场文书
教师个人年度总结
2015/02/11 职场文书
信用卡收入证明范本
2015/06/12 职场文书
关于军训的感想
2015/08/07 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python