使用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 相关文章推荐
js 表单验证方法(实用)
Apr 28 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
php 地区分类排序算法
2013/07/01 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python之父谈Python的未来形式
2016/07/01 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
幼儿教师考核制度
2014/01/25 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
大学生党课心得体会
2016/01/07 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android