使用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 相关文章推荐
浅析hasOwnProperty方法的应用
Nov 20 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
Vue的生命周期一起来看看
Feb 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
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
php blowfish加密解密算法
2016/07/02 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
js切换光标示例代码
2013/10/10 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
Javascript window对象详解
2014/11/12 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python中List.count()方法的使用教程
2015/05/20 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
python3.x实现base64加密和解密
2019/03/28 Python
python opencv实现图像边缘检测
2019/04/29 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
如何基于python生成list的所有的子集
2019/11/11 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
Prototype如何更新局部页面
2013/03/03 面试题
采购部主管岗位职责
2014/01/01 职场文书
英语系毕业生求职信
2014/07/13 职场文书
市场营销工作计划书
2014/09/15 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
督导岗位职责范本
2015/04/10 职场文书
南极大冒险观后感
2015/06/05 职场文书