使用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 相关文章推荐
Javascript无阻塞加载具体方式
Jun 28 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
ES6的新特性概览
Mar 10 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 Javascript
JavaScript继承的三种方法实例
May 12 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
一个简单的域名注册情况查询程序
2006/10/09 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
js Flash插入函数免激活代码
2009/03/31 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
Python中Class类用法实例分析
2015/11/12 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
python机器学习之神经网络实现
2018/10/13 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
python爬取音频下载的示例代码
2020/10/19 Python
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
会计学生自我鉴定
2014/02/06 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
工作能力自我评价2015
2015/03/05 职场文书
生产车间管理制度
2015/08/04 职场文书
mysql自增长id用完了该怎么办
2022/02/12 MySQL
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js