使用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 表单取值常用代码
Dec 22 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
jQuery拖拽 & 弹出层 介绍与示例
Dec 27 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 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常用函数和常见疑难问题解答
2014/03/05 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
浅析Python中的多进程与多线程的使用
2015/04/07 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
内部类的定义、种类以及优点
2013/10/16 面试题
房地产出纳岗位职责
2013/12/01 职场文书
前台文员职责范本
2014/03/07 职场文书
网站美工岗位职责
2014/04/02 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
MongoDB支持的索引类型
2022/04/11 MongoDB