使用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调试(不下载任何工具)
Apr 14 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
JS定时关闭窗口的实例
May 22 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php语法检查的方法总结
2019/01/21 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
javascript 鼠标滚轮事件
2009/04/09 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
javascript几个易错点记录
2014/11/26 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
python3.3实现乘法表示例
2014/02/07 Python
Python中存取文件的4种不同操作
2018/07/02 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
python 多线程串行和并行的实例
2019/02/22 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python自动发微信监控报警
2019/09/06 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
python脚本和网页有何区别
2020/07/02 Python
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
职务说明书范文
2014/05/07 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
2015国庆节66周年标语
2015/07/30 职场文书