使用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 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 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
献给php初学者(入门学习经验谈)
2010/10/12 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
ExtJs使用总结(非常详细)
2012/03/22 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
Python学习入门之区块链详解
2017/07/25 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
Python判断telnet通不通的实例
2019/01/26 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
什么是网络协议
2016/04/07 面试题
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
团队队名口号大全
2014/06/06 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
2014年维稳工作总结
2014/11/18 职场文书
工作检讨书大全
2015/01/26 职场文书
英文慰问信范文
2015/03/24 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
世界十大狙击步枪排行榜
2022/03/20 杂记