Javascript监视变量变化的方法

本文实例讲述了Javascript监视变量变化的方法。分享给大家供大家参考。具体分析如下：

大家应该知道，在C#中对于属性、文件等的更改监视非常简单，因为有委托（事件）、FileSystemWatcher等好东东扶持。

那么在JavaScript中，如何对变量的更改进行监视呢？首先，我仿照c#的属性来对JS进行操作，写出了如下的示例：

function Class1()
{
  var oldValue='';
  var name='xu';
  var id='1';
  this.setName=function(n)
  {
   oldValue=name;
   name=n;
   this.propertyChange('name',oldValue,n);
 }
 this.setID=function(n)
 {
   oldValue=id;
   id=n;
   this.propertyChange('id',oldValue,n);
 }
 this.display=function()
 {
   alert(name+'\'s id is :'+id);
 }
}
Class1.prototype={
 propertyChange:function(propertyName,oldValue,newValue)
 {
   alert(propertyName+'\'s value changed from '+oldValue+' to '+newValue);
 }
};
var c=new Class1();
c.setName('xu22');
c.setID('5');
c.display();

将对对象内部变量（私有变量）的赋值操作提取到了方法中，而在该方法中触发相应的变量值更改回调方法。

按说这样搞就能监视变量 的更改了，但是在FireFox的官方网站上有一个叫Object.watch(unwatch)的东东，可以用来监视变量的变更。

非常可惜的是，这个方法在IE等浏览器下不能正常运行。俺到网上搜了一番，在

http://stackoverflow.com/questions/1269633/javascript-watch-for-object-properties-changes

中找到如下东东：

if (!Object.prototype.watch)
{
   Object.prototype.watch = function (prop, handler)
   {
     var oldval = this[prop], newval = oldval,
     getter = function ()
     {
       return newval;
     },
     setter = function (val)
     {
       oldval = newval;
       return newval = handler.call(this, prop, oldval, val);
     };
     if (delete this[prop])
     {
       if (Object.defineProperty) // ECMAScript 5
       {
         Object.defineProperty(this, prop, {get: getter,set: setter});
       }
       else if (Object.prototype.__defineGetter__ && Object.prototype.__defineSetter__)
       {
         Object.prototype.__defineGetter__.call(this, prop, getter);
         Object.prototype.__defineSetter__.call(this, prop, setter);
       }
     }
   };
}
if (!Object.prototype.unwatch)
{
   Object.prototype.unwatch = function (prop)
   {
     var val = this[prop];
     delete this[prop];
     this[prop] = val;
   };
}

通过__defineSetter__来对赋值操作监听~~~

OK，好东西。收藏一下。

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

赞 (0)

相关推荐

  • javascript判断变量是否有值的方法

    本文实例讲述了javascript判断变量是否有值的方法.分享给大家供大家参考.具体分析如下: 例如: var a = null; var b = undefined; 以上这两种情况算作没有值 if(a !== null && a !== undefined) { // } // 为什么不能单用if(a !== null) { // } var a; a !== null; // true // 为什么不能单用if(a !== undefined) { // } var a = null

  • JavaScript通过this变量快速找出用户选中radio按钮的方法

    本文实例讲述了JavaScript通过this变量快速找出用户选中radio按钮的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码通过this变量结合radio按钮的onchange事件快速找出用户选择的哪一个radio按钮 <script> function favAnimal(button) { alert('You like '+button.value+'s.'); } </script> <input type="radio" name

  • javascript变量声明实例分析

    本文实例讲述了javascript变量声明的方法.分享给大家供大家参考.具体分析如下: js中使用一个变量之前应当先声明.变量使用关键字var来声明. 如果未在var声明语句中给变量指定初始值,则该变量值为undefined. 不用在声明变量时指定变量类型,js变量可以是任意数据类型. 使用var语句重复声明变量是合法且无害的.如果重复声明带有初始化器,则就和简单的赋值语句没啥区别. 如果试图读取一个没有声明的变量,则js会报错.在ECMAScript5严格模式下,给一个没有声明的变量赋值也会报

  • javascript中局部变量和全局变量的区别详解

    javascript有两种变量:局部变量和全局变量.当然,我们这篇文章是帮助大家真正的区别这两种变量. 首先,局部变量是指只能在本变量声明的函数内部调用.全局变量时整个代码中都可以调用的变量.当然,单单从字面上理解肯定是不清楚的,下面我详细的介绍下: 大家都知道,变量是需要用var关键字声明的.但是javascript中也可以隐式的使用变量,就是不用声明,直接使用.而且,千万注意,javascript把隐式声明的变量总是当成全局变量来使用的. 例如: 复制代码 代码如下: function my

  • JavaScript 变量、作用域及内存

    JS变量是松散型的(不强制类型)本质,决定了它只是在特定时间用于保存特定值的一个名字而已; 由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变; 一 变量及作用域 1.基本类型和引用类型 // JS变量包含两种不同的数据类型的值:基本类型值和引用类型值; // 1.基本类型值:保存在栈内存中的简单数据段;即这种值完全保存在内存中的一个位置; // 基本类型值包含:Undefined|Null|Boolean|Number|String; // 这

  • Javascript变量的作用域和作用域链详解

    Javascript变量的作用域和作用域链详解

    工作这几年,js学的不是很好,正好周末有些闲时间,索性买本<js权威指南>,大名鼎鼎的犀牛书,好好的把js深入的看一看.买过这本书的第一印象就是贼厚,不过后面有一半部分都是参考手册. 一:作用域 说起变量第一个要说到的肯定就是作用域,正是因为不熟悉JS的作用域,往往就会把面向对象的作用域张冠李戴,毕竟有些东西总是习惯性的这样,但是并不是每次照搬都是可以的,那么下一个问题就来了,js到底是什么作用域,当然是函数作用域了,我们的浏览器就是一个被实例化的window对象,如果在window下定义一个

  • JavaScript判断变量是否为空的自定义函数分享

    JavaScript本身没有判断一个变量是不是空值的函数,因为变量有可能是string,object,number,boolean等类型,类型不同,判断方法也不同.所以在文章中写了一个函数,用以判断JS变量是否空值,如果是undefined, null, '', NaN,false,0,[],{} ,空白字符串,都返回true,否则返回false 复制代码 代码如下: function isEmpty(v) {     switch (typeof v) {     case 'undefine

  • Javascript基础教程之变量

    javascript 中变量通过var关键字(variable)来声明的. 复制代码 代码如下: var school = "beijingyizhong" 也可以通过var 关键字给变量多个值. 复制代码 代码如下: var school = "beijingyizhong" , diqu = "beijing" , age = 100; 此外,与java不同,javascript可以在同一个变量中存储不同的数据类型.例如 复制代码 代码如下:

  • Javascript监视变量变化的方法

    本文实例讲述了Javascript监视变量变化的方法.分享给大家供大家参考.具体分析如下: 大家应该知道,在C#中对于属性.文件等的更改监视非常简单,因为有委托(事件).FileSystemWatcher等好东东扶持. 那么在JavaScript中,如何对变量的更改进行监视呢?首先,我仿照c#的属性来对JS进行操作,写出了如下的示例: function Class1() { var oldValue=''; var name='xu'; var id='1'; this.setName=func

  • React和Vue中监听变量变化的方法

    React 中 本地调试React代码的方法 yarn build 场景 假设有这样一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state. 16之前 在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后 在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听, getDerivedStateFromProps 可以返回 null 或者一个对象,如果

  • JavaScript复制变量三种方法实例详解

    这篇文章主要介绍了JavaScript复制变量三种方法实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 直接将一个变量赋给另一个变量时,系统并不会创造一个新的变量,而是将原变量的地址赋给了新变量名.举个栗子: 复制代码 复制代码 let obj = { a: 1, b: 2, }; let copy = obj; obj.a = 5; console.log(copy.a); // Result // a = 5; // 更改obj的值,

  • 浅析javascript异步执行函数导致的变量变化问题解决思路

    浅析javascript异步执行函数导致的变量变化问题解决思路 for(var i=0;i<3;i++) { setTimeout(function(){ console.log(i) },0); } 控制台输出: 3 3 3 这是因为执行方法的时候for循环已经执行完成每次执行的时候取得都是3 而不是1-2-3这时我们可以使用立即执行函数为每一次循环创建一个变量副本来供定时器调用解决这个问题 for (var i = 0; i < 3; i++) { setTimeout( (functio

  • JavaScript判断变量是否为数组的方法(Array)

    今天小编给大家整理些关于javascript判断变量是否是数组(Array)的相关知识,主要通过以下四点给大家展开话题,具体内容如下所示: 1. typeof真的那么厉害吗?? //首先看代码 var ary = [1,23,4]; console.log(typeof ary); //输出结果是Object 上面的办法并不能实时的检测出是否是数组,只能判断其类型,所以说typeof判断基本类型数据还是挺好的,但是不能准确测试出是否是数组(typeof的具体用法以后提及,现在回归正题) 2.in

  • AngularJS 监听变量变化的实现方法

    如下所示: var timeout; $scope.$watch('search.subj',function (newVal, oldVal) { if (newVal !== oldVal) { if (timeout) $timeout.cancel(timeout); timeout = $timeout(function() { $scope.doSearch(); }, 800); } }, true); 以上这篇AngularJS 监听变量变化的实现方法就是小编分享给大家的全部内容

  • JavaScript变量基本使用方法实例分析

    本文实例讲述了JavaScript变量基本使用方法.分享给大家供大家参考,具体如下: JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定. 定义变量需要用关键字 'var' var iNum = 123; var sTr = 'asd'; //同时定义多个变量可以用","隔开,公用一个'var'关键字 var iNum = 45,sTr='qwe',sCount='68'; 变量类型 5种基本数据类型: 1.number 数字类型 2.string 字

  • JavaScript交换变量的常用方法小结【4种方法】

    本文实例讲述了JavaScript交换变量的常用方法.分享给大家供大家参考,具体如下: 许多算法需要交换2个变量.在编码面试中,可能会问您"如何在没有临时变量的情况下交换2个变量?".我很高兴知道执行变量交换的多种方法.在本文中,您将了解大约4种交换方式(2种使用额外的内存,而2种不使用额外的内存). 1. 解构赋值 解构赋值语法(ES2015的功能)使您可以将数组的项提取到变量中.例如,以下代码对数组进行解构: let a; let b; [a, b] = [1, 2, 3]; a;

  • JavaScript交换变量常用4种方法解析

    许多算法需要交换2个变量.在编码面试中,可能会问您"如何在没有临时变量的情况下交换2个变量?".我很高兴知道执行变量交换的多种方法.在本文中,您将了解大约4种交换方式(2种使用额外的内存,而2种不使用额外的内存). 1.解构赋值 解构赋值语法(ES2015的功能)使您可以将数组的项提取到变量中.例如,以下代码对数组进行解构: let a; let b; [a, b] = [1, 2, 3]; a; // => 1 b; // => 2 [a,b] = [1,2,3] 是对

随机推荐