使用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 相关文章推荐
coffeescript使用的方式汇总
Aug 05 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 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
COM in PHP (winows only)
2006/10/09 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
Python中__init__和__new__的区别详解
2014/07/09 Python
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
Python使用django搭建web开发环境
2017/06/09 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
python查看数据类型的方法
2019/10/12 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
如何理解Python中包的引入
2020/05/29 Python
党性锻炼的心得体会
2014/09/03 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
获奖感言范文
2015/07/31 职场文书
职工培训工作总结
2015/08/10 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers