使用JavaScript给对象修改注册监听器
时间:2022-06-10
本文章向大家介绍使用JavaScript给对象修改注册监听器,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
我们在开发一些大型前端项目时,会遇到这样一种情况,某个变量上有个字段。我们想知道是哪一段程序修改了这个变量上的字段。比如全局变量window上我们自定义了一个新字段_name,我们想知道到底有哪些程序给这个字段赋了值。
一行行地调试肯定太费时间了。如果window这个变量的_name字段被程序赋值时,能执行我们自己实现的一个监听器,这样不就方便多了么?
监听器的实现很简单:
<html>
<script>
"use strict";
function test(){
Object.defineProperty(window, "_name", {
get : function(){ console.log("gett is called ") },
set : function(newValue){
debugger;
console.log("_name is filled!!!!");
},
enumerable : true,
configurable : true
});
for( var i = 0; i < 2; i++)
console.log(i);
window._name = "2";
};
test();
</script>
使用Object对象自带的方法defineProperty, 第一个参数为要监听的对象window,第二个参数为要监听的对象字段名称,_name。
第三个参数是一个对象,属性为set,意思是我们想监听window._name被赋值的这个事件。属性set的值为一个JavaScript函数,即我们自己定义的监听器。这个监听器,当window._name被其他JavaScript函数修改之后,就会触发。
测试一下,在浏览器里执行上述代码,发现断点按照我们期望的被触发了:
从调用栈也能发现确实是window._name = "2"这一行代码触发的断点,我们自己注册的属性修改监听器确实工作了。
要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
- tensorflow系列笔记:流程,概念和代码解析
- node实现watcher的困境
- Java基础-03(02).总结运算符、键盘录入、if语句
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(十一)数据层优化-druid监控及慢sql记录
- python数据分析师面试题选
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(九)数据层优化-jdbc连接池简述、druid简介
- webpack配置别名alias出现的错误匹配
- 在Java程序中处理数据库超时与死锁
- 如何用TensorFlow和TF-Slim实现图像标注、分类与分割
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合
- 使用shell脚本查看数据库负载情况(第二篇)(r3笔记第92天)
- tensorflow LSTM + CTC实现端到端OCR
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(七)图片上传功能
- 黑客比程序员牛在哪?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 简单聊下 Java Agent
- Byte Buddy 基础知识
- 两种在SAP Cloud Application Studio里通过编程对C4C UI字段赋值的方法
- 如何使用 BTrace v.2.0.1
- 三分钟写一个 Java 多线程
- 使用纯粹的ABAP位操作实现两个整数相加
- 如何给SAP Cloud for Customer UI上的字段添加自定义校验逻辑
- guide-rpc-framework 源码学习
- 如何参与一个开源项目(多图)
- 微信小程序支付服务端.net core实现,简单直接
- PBE加密 .net 实现
- .net Core 图片验证码 基于SkiaSharp实现
- 解决git/github下载速度缓慢的问题总汇------转
- C语言程序框架注释的一种模板
- Kryo 入门指南