使用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 哈希表(hashtable)的简单实现
Jan 20 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
ant design 日期格式化的实现
Oct 27 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
Terran兵种对照表
2020/03/14 星际争霸
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python实现简单登录验证
2016/04/13 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
python ChainMap的使用和说明详解
2019/06/11 Python
python输入多行字符串的方法总结
2019/07/02 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
初中三好学生自我鉴定
2014/04/07 职场文书
服务行业演讲稿
2014/09/02 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
旷课检讨书范文
2015/01/27 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript