使用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静态的动态
Sep 18 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
微信小程序实现横向滚动导航栏效果
Dec 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
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
PHP闭包实例解析
2014/09/08 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
Python计算一个文件里字数的方法
2015/06/15 Python
python的Tqdm模块的使用
2018/01/10 Python
基于Django用户认证系统详解
2018/02/21 Python
Django 路由控制的实现代码
2018/11/08 Python
python实现电子产品商店
2019/02/26 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
物业门卫岗位职责
2013/12/28 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python