使用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 页面滚动到底部自动加载插件集合
Jan 31 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
JS常见内存泄漏及解决方案解析
May 30 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
php遍历CSV类实例
2015/04/14 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
python 队列详解及实例代码
2016/10/18 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
python频繁写入文件时提速的方法
2019/06/26 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
文明班级申报材料
2014/12/24 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
农贸批发市场管理制度
2015/08/07 职场文书