使用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 相关文章推荐
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
Vue入门之数据绑定(小结)
Jan 08 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 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实现下载功能的代码
2012/09/29 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
jQuery解析json格式数据示例
2018/09/01 jQuery
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python实现快速多线程ping的方法
2015/07/15 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
深入理解Django的自定义过滤器
2017/10/17 Python
python输出带颜色字体实例方法
2019/09/01 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
门诊手术室工作制度
2014/01/30 职场文书
大学生社会实践方案
2014/05/11 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
行政撤诉申请书
2015/05/18 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
python 算法题——快乐数的多种解法
2021/05/27 Python
MySQL常用慢查询分析工具详解
2022/08/14 MySQL