善用Object.defineProperty巧妙找到修改某个变量的准确代码位置

我今天的工作又遇到一个难题。前端UI右下角这个按钮被设置为"禁用(disabled)"状态。

这个按钮的可用状态由属性enabled控制。我通过调试发现，一旦下图第88行代码执行完毕之后，这个按钮的属性mProperties里就多出一个enabled:false的属性。

而88行执行之前，还没有这个enabled:false的属性。正是这个属性让按钮进入了禁用状态。

我单步调试setModel函数，花了半个小时的时间也没能找到这个enabled属性到底是在哪一行代码加进去的。

于是我只有寻求其他办法。我想到了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;}});

现在就来试试。果然断点自动触发了。我成功找到了我在寻找的给mProperties添加了enabled = false的代码位置。

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

善用Object.defineProperty巧妙找到修改某个变量的准确代码位置相关推荐

对javscript中Object.defineProperty的理解
自己在使用vue的过程中经常会用到听到数据双向绑定这个词,而且我们还可以直接通过调用this.msg(this表示vue实例),来获取data上的数据,以前一直不太明白为什么可以这样获取,直到有一 ...
Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
Object.defineProperty()个人理解
Object.defineProperty()个人理解 Object.defineProperty()用于定义对象中属性的特性,这些特性属于对象内部值,因此在JS中不能直接访问它们. 在ES5中,有两 ...
【C 语言】指针间接赋值 ( 直接修改和间接修改指针变量的值 | 在函数中间接修改指针变量的值 | 在函数中间接修改外部变量的原理 )
文章目录一.直接修改和间接修改指针变量的值二.在函数中间接修改指针变量的值三.在函数中间接修改外部变量的原理一.直接修改和间接修改指针变量的值直接修改指针变量 ...
JavaScript变量高级定义之Object.defineProperty()方法讲解
简介 Object.defineProperty()方法是用于声明一个变量,类似var let,但是他可以做一些比较高级的选项. 最基本的使用: <!DOCTYPE html> <h ...
js中Object类型和Array类型的变量被赋值(复制)给其他变量后，修改被赋值(复制)的新变量的值，会影响原始变量的值，这是为什么呢？
JavaScript中的Object和Array都是指针变量类型,例如我声明 let obj={a:1};let arr=[1,2,3]; 其中的obj和arr存放的仅仅是对应的对象和数组内容所存放的 ...
利用Object.defineProperty挂接set钩子，监控对象属性的修改事件
测试代码: <html> <script> "use strict"; function test(){Object.defineProperty(wind ...
es6相关面试题:1.rest参数；2.new.target；3.object.defineProperty与Proxy的区别；4.Reflect对象作用；5.lterator迭代器；6.async
文章目录说说对ES6中rest参数的理解说说你对new.target的理解谈谈object.defineProperty与Proxy的区别 ES6中的Reflect对象有什么用? 简单介绍下ES ...
Vue2双向绑定，Object.defineProperty、Observe、Compile、Watcher、Dep各显神通，相辅相成
这个问题真的可以说是一个好问题,毕竟基本上面试时也总会被问到,一问双向绑定原理怎么回事儿啊?就说,用了Object.defineProperty()做得数据劫持,劫持了get()和set(),然后巴拉 ...

善用Object.defineProperty巧妙找到修改某个变量的准确代码位置

善用Object.defineProperty巧妙找到修改某个变量的准确代码位置相关推荐

最新文章

热门文章