使用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之ESC(第二类混淆)
May 06 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
js中的this关键字详解
Sep 25 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 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中session变量的销毁
2014/02/27 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
使用JavaScript switch case 另类写法
2010/03/14 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
linux 下实现python多版本安装实践
2014/11/18 Python
Python re模块介绍
2014/11/30 Python
Python中的高级函数map/reduce使用实例
2015/04/13 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
Java的基础面试题附答案
2016/01/10 面试题
班组长安全生产职责
2013/12/16 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
道歉的话语大全
2015/05/12 职场文书
考研英语辞职信
2015/05/13 职场文书
行政处罚听证告知书
2015/07/01 职场文书
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫