JS使用对象的defineProperty进行变量监控操作示例

 更新时间:2019年02月02日 09:34:16   作者:前端林三哥  
这篇文章主要介绍了JS使用对象的defineProperty进行变量监控操作,结合实例形式分析了对象defineProperty方法的功能及简单使用技巧,需要的朋友可以参考下

本文实例讲述了JS使用对象的defineProperty进行变量监控操作。分享给大家供大家参考,具体如下:

以前觉得检测变量angular的$watch还挺好用的,但是一旦离开angular就无法下手了,今天看到一个方法,觉得挺好的,可能还

有别的办法,我会继续探索的

贴上代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var data = {key:1};
Object.defineProperty(data, "key", {
set: function(value) {
value++
console.log(value)
}
});
// window.onload = function(){
// data.key = 2;
// data.key = 3;
// }
var num = 0;
var timer = setInterval(function(){
data.key = num;
num++;
},2000)
</script>
</body>
</html>

这样效果就出来了,截个图

每隔两秒会打印一次,哈哈

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • 仿jQuery的siblings效果的js代码

    仿jQuery的siblings效果的js代码

    取一个DOM元素的兄弟节点,仿jQuery的siblings方法,用原生JS代码完成
    2011-08-08
  • 教你如何自定义百度分享插件以及bshare分享插件的分享按钮

    教你如何自定义百度分享插件以及bshare分享插件的分享按钮

    在项目中我们常用到百度分享插件或者bshare分享插件,虽然官方都有自定义按钮的功能,但是毕竟还是只有少数几种,我们如何来制作有自己特色的分享按钮呢?
    2014-06-06
  • uni-app使用swiper实现轮播图的方法

    uni-app使用swiper实现轮播图的方法

    做音乐播放器小程序时,因为swiper的问题耽误不少时间,所以下面这篇文章主要给大家介绍了关于uni-app使用swiper实现轮播图的相关资料,需要的朋友可以参考下
    2022-11-11
  • Bootstrap 模态框(Modal)带参数传值实例

    Bootstrap 模态框(Modal)带参数传值实例

    模态框(Modal)是覆盖在父窗体上的子窗体。下面通过本文给大家介绍Bootstrap 模态框(Modal)带参数传值实例代码,需要的朋友参考下吧
    2017-08-08
  • 微信小程序通过一个json实现分享朋友圈图片

    微信小程序通过一个json实现分享朋友圈图片

    这篇文章主要给大家介绍了关于微信小程序通过一个json实现分享朋友圈图片的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • JS块级作用域和私有变量实例分析

    JS块级作用域和私有变量实例分析

    这篇文章主要介绍了JS块级作用域和私有变量,结合实例形式较为详细的分析了javascript块级作用域和私有变量相关概念、原理、操作技巧,需要的朋友可以参考下
    2019-05-05
  • uniapp小程序自定义tabbar以及初次加载闪屏解决方法

    uniapp小程序自定义tabbar以及初次加载闪屏解决方法

    Uniapp小程序可以通过自定义tabbar来实现更加个性化的界面设计,下面这篇文章主要给大家介绍了关于uniapp小程序自定义tabbar以及初次加载闪屏解决方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • js实现滚动条滚动到页面底部继续加载

    js实现滚动条滚动到页面底部继续加载

    这篇文章主要为大家详细介绍了js实现滚动条滚动到页面底部继续加载,原理很简单,就是为window添加一个scroll事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • Layui 带多选框表格监听事件以及按钮自动点击写法实例

    Layui 带多选框表格监听事件以及按钮自动点击写法实例

    今天小编就为大家分享一篇Layui 带多选框表格监听事件以及按钮自动点击写法实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • HTML的select控件美化

    HTML的select控件美化

    本文主要介绍了HTML的select控件美化以及js实现select选择功能的方法步骤。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论