js插件定义事件中，this引用的实现模拟
在web项目中，经常会使用jquery和mui等js框架，之前只是按照API说明去按规则使用，比如在jq和mui中，事件处理函数中可以直接用this访问事件源，如下面的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/jquery.min.js" ></script>
</head>
<body>
<button id="msg-btn">CLICK ME!</button>
</body>
<script>
$(document).ready(function(){
$("#msg-btn").click(function(){
console.log( this.id );
});
});
</script>
</html>
在界面触发了点击事件后，打印this.id信息如下：
很显然，此处的this指向了事件源这个对象，或者说，事件处理函数的执行上下文（作用域context）被隐式的指定为事件源。
最近在做闭包编程时发现，这一模式很像bind方法和call方法的应用场景（bind方法本质上就是通过call实现的，利用了call可以绑定执行上下文的特性），即就是给函数指定了运行时所挂载的对象！下面分别按照call和bind方式，尝试模拟了具体实现：
1.通过call模拟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="test">hi</div>
</body>
<script>
var dom = document.querySelector("#test");
//通过定义自己的事件绑定函数，将事件处理函数的调用上下文指定为事件源，因此事件函数中的this
//即指向事件源，因此可以直接取其id等其他属性
dom.__proto__.myaddEventListener = function( evename, _callback){
this.addEventListener( evename, function(e){ _callback.call( e.target,e ); });
}
dom.myaddEventListener( 'click',function(e){
console.log( this.id );
console.log( this );
console.log( e );
} );
</script>
</html>
在界面上点击<div>标签，打印信息如下：
可见this,指向了实践源，可以像访问dom属性一样来访问this了。
2. 通过bind模拟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="test">hi</div>
</body>
<script>
var dom = document.querySelector("#test");
dom.__proto__.myaddEventListener = function( evename, _callback){
this.addEventListener( evename, function(e){
var __callback = _callback.bind( e.target );
__callback( e );
}); }
dom.myaddEventListener( 'click',function(e){
console.log( this.id );
console.log( this );
console.log( e );
} );
</script>
</html>
在界面上点击<div>标签，打印信息如下：
与call的模拟效果一致。
end...
js插件定义事件中，this引用的实现模拟的更多相关文章
- js的touch事件的实际引用
一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...
- thymeleaf 传参到js的onclick事件中
html: <img th:onclick="'javascript:imgClick(\''+${card.id}+'\',\''+${card.name}+'\');'" ...
- Backbone.js 的 View 中定义事件
使用 Backbone 的 View 时,可以象传统 jQuery 那样定义事件,$("selector").click(function(){...}).幸运的是 Backbon ...
- 基础篇：1.JavaScript运行在html中，引用有几种方式？—— 6.js中常用的输出方式？
书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...
- AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别
AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就 ...
- 如何定义一个高逼格的原生JS插件
插件的需求 我们写代码,并不是所有的业务或者逻辑代码都要抽出来复用.首先,我们得看一下是否需要将一部分经常重复的代码抽象出来,写到一个单独的文件中为以后再次使用.再看一下我们的业务逻辑是否可以为团队服 ...
- js插件---videojs中文文档详解
js插件---videojs中文文档详解 一.总结 一句话总结: js插件网上都有很多参考资料,使用起来也非常简单 二.lavarel中使用实例 <video id="example_ ...
- 谈谈.NET中常见的内存泄露问题——GC、委托事件和弱引用
其实吧,内存泄露一直是个令人头疼的问题,在带有GC的语言中这个情况得到了很大的好转,但是仍然可能会有问题.一.什么是内存泄露(memory leak)?内存泄露不是指内存坏了,也不是指内存没插稳漏出来 ...
- zepto源码研究 - ajax.js（请求过程中的各个事件分析）
简要:ajax请求具有能够触发各类事件的功能,包括:触发全局事件,请求发送前事件,请求开始事件,请求结束事件等等,贯穿整个ajax请求过程,这是非常有用的,我们可以利用这些事件来做一些非常有意思的事情 ...
随机推荐
- 滑动窗体的最大值(STL的应用+剑指offer)
滑动窗体的最大值 參与人数:767时间限制:1秒空间限制:32768K 通过比例:21.61% 最佳记录:0 ms|8552K(来自 ) 题目描写叙述 给定一个数组和滑动窗体的大小.找出全部滑动窗体里 ...
- Delphi XE10调用WebService服务获取图片验证码
最近做了一个程序,需要使用图片验证码,百度一下,网上一大把免费的WebService服务,随意找一个用用,效果还可以.WebService地址:http://www.webxml.com.cn/Web ...
- Python进程间通信Queue
1.Queue使用方法: Queue.qsize():返回当前队列包含的消息数量: Queue.empty():如果队列为空,返回True,反之False : Queue.full():如果队列满了, ...
- bzoj 4668 冷战 —— 并查集按秩合并
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4668 按秩合并维护并查集的树结构,然后暴力找路径上的最大边权即可. 代码如下: #inclu ...
- sum=1+2+3+…+100
sum = 1 for i in range(0,101): # sum = sum + i sum += i print(sum) sum +=i 等于 sum = sum + i
- ES6 基础知识-----简记 let const
ES5中只有函数作用域和全局作用域,声明变量使用var,在es6中添加声明变量 let const let 声明块级作用域变量, let 不存在变量提升 var命令会发生”变量提升“现象,即变量可以在 ...
- js函数定义 参数只要写名称就可以了
js函数定义 参数只要写名称就可以了 以下为标准: function add(type) { } 不要写成下面这个样子 function add(var type) { } 哎 妹的 老何ja ...
- Mysql数据库的触发器、存储引擎和存储过程
数据库的触发器 1.触发器 触发器是MySQL响应以下任意语句而自动执行的一条MySQL语句(或位于BEGIN和END语句之间的一组语句): DELETE,INSERT,UPDATE 我们可以监视某表 ...
- mybatise
http://www.cnblogs.com/xdp-gacl/p/4261895.html
- poj 3243 Clever Y && 1467: Pku3243 clever Y【扩展BSGS】
扩展BSGS的板子 对于gcd(a,p)>1的情况 即扩展BSGS 把式子变成等式的形式: \( a^x+yp=b \) 设 \( g=gcd(a,p) \) 那么两边同时除以g就会变成: \( ...