使用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的复制网页内容到WORD的实现代码
Feb 16 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
php基于redis处理session的方法
Mar 14 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python3读取zip文件信息的方法
2015/05/22 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
tensorflow的计算图总结
2020/01/12 Python
python异常处理try except过程解析
2020/02/03 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
实习求职信
2013/12/01 职场文书
公积金转移接收函
2014/01/11 职场文书
计算机相关的自我评价
2014/01/15 职场文书
创意婚礼策划方案
2014/05/18 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书