ES6中javascript实现函数绑定及类的事件绑定功能详解


Posted in Javascript onNovember 08, 2017

本文实例讲述了ES6中javascript实现函数绑定及类的事件绑定功能的方法。分享给大家供大家参考,具体如下:

函数绑定

箭头函数可以绑定this对象,大大减少了显式绑定this对象的写法(call、apply、bind)。但是,箭头函数并不适用于所有场合,所以 ES7 提出了 “ 函数绑定 ” ( function bind )运算符,用来取代call、apply、bind调用。虽然该语法还是 ES7 的一个提案,但是 Babel 转码器已经支持。

函数绑定运算符是并排的两个双冒号( :: ),双冒号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,作为上下文环境(即 this 对象),绑定到右边的函数上面。

foo::bar;
// 等同于
bar.bind(foo);
foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);
const hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn(obj, key) {
return obj::hasOwnProperty(key);
}

如果双冒号左边为空,右边是一个对象的方法,则等于将该方法绑定在该对象上面。

var method = obj::obj.foo;
// 等同于
var method = ::obj.foo;
let log = ::console.log;
// 等同于
var log = console.log.bind(console);

由于双冒号运算符返回的还是原对象,因此可以采用链式写法。

// 例一
import { map, takeWhile, forEach } from "iterlib";
getPlayers()
::map(x => x.character())
::takeWhile(x => x.strength > 100)
::forEach(x => console.log(x));
// 例二
let { find, html } = jake;
document.querySelectorAll("div.myClass")
::find("p")
::html("hahaha");

类中事件绑定

概述

ES6提供了类,给模块化带来了很大的帮助。在类里面绑定事件,一来是为了使得代码结构清晰,二来是为了可以使用类的变量和方法。但是,由于事件的回调函数并不是由类的实例对象触发,所以,事件回调函数里面并不能访问类的this变量。另外,我们也不希望事件回调函数对外暴露,免得调用者直接调用。

简单来说,我们就希望:

1. 事件回调函数要能访问类的this变量
2. 事件回调函数不能直接调用

如何访问类的this

方案一:将类的this保存成一个局部变量

this的指代是动态改变的,但是局部变量的指代却是明确的,并且,函数定义的局部变量在整个函数里面都可以用。所以,我们可以使用let that = this保存类的this变量。

class A{
  //绑定事件的方法
  bindEvent(){
   let that = this;
   this.button1.on('click',function(e){
      this.addClass('on'); //this指代所点的元素
      that.doSomething(); //that指向类的this
   })
  }
  doSomething(){
   //事件处理函数
  }
  //解绑事件
  unBindEvent(){
   this.button1.off();
  }
}

这种方法只在使用jquery时有用,因为jquery解绑事件不需要提供回调函数,直接off就可以了。但是原生js需要提供回调函数也有它的道理,因为同一个元素的同一种事件可以绑定多个回调函数,所以你需要指出释放哪一个。

方案二:使用bind()改变this的指向

有类A,在A中要添加mousemove事件,根据需求写出下面代码:

class A{
  //添加事件
  addEvent(){
    document.addEventListener( 'mousemove', onMouseMove, false );
  }
  //添加事件
  removeEvent(){
    document.removeEventListener( 'mousemove', onMouseMove , false );
  }
}
//事件回调函数中
function onMouseMove(event){
  console.log(this);  //#document
}

但是,这样获取不到类的this。onMouseMove的this将会指向document。因为事件是添加到document上的,所以自然是由document触发事件并调用onMouseMove进行处理,所以onMouseMove中的this指向document。

比较正确的做法是:使用bind()函数改变onMouseMove中this的指向,同时将事件回调函数移到类外面

class A{
  //添加事件
  addEvent(){
    document.addEventListener( 'mousemove', onMouseMove.bind(this), false );
  }
  //添加事件
  removeEvent(){
    document.removeEventListener( 'mousemove', onMouseMove.bind(this) , false );
  }
}
//事件回调函数中
function onMouseMove(event){
  console.log(this);
}

但是这样仍然存在问题,事件移除不掉了!因为this.bind()每次调用都会返回一个新的函数,所以:

document.addEventListener( 'mousemove', onMouseMove.bind(this), false );

document.removeEventListener( 'mousemove', onMouseMove.bind(this), false );

两者的第二个参数并不相同。

正确的做法是:bind()的结果保存到一个变量中:

class A{
  constructor(){
    this._onMouseMove = onMouseMove.bind(this);  //看这里
  }
  //添加事件
  addEvent(){
    document.addEventListener( 'mousemove', this._onMouseMove , false );
  }
  //添加事件
  removeEvent(){
    document.removeEventListener( 'mousemove', this._onMouseMove , false );
  }
}
//事件回调函数中
function onMouseMove(event){
  console.log(this);
}

如何定义私有的事件回调函数

在Java中,不想对外暴露的方法可以定义为私有方法,但是ES6并没有提供私有方法,只能通过一些办法模拟。但是,事件回调函数比较特别,因为事件除了定义,还要移除,这会带来额外的麻烦。但还是有办法的:

使用Symbol变量来定义

const _onMouseMove = Symbol("_onMouseMove");
class A{
  constructor(){
    this[_onMouseMove] = onMouseMove.bind(this);
  }
  //添加事件
  addEvent(){
    document.addEventListener( 'mousemove', this[_onMouseMove] , false );
  }
  //添加事件
  removeEvent(){
    document.removeEventListener( 'mousemove', this[_onMouseMove] , false );
  }
}
//事件回调函数中
function onMouseMove(event){
  console.log(this);
}

Symbol("_onMouseMove")会产生一个唯一的值,这个值是在对象创建的时候才生成的,所以,调用者没有办法在写代码时知道这个值的,所以,就无法调用使用这个值命名的方法了,这样就定义了一个私有方法。

更多相关内容可查看本站专题:《ECMAScript6(ES6)入门教程》、《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《javascript面向对象入门教程》

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

Javascript 相关文章推荐
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
Node.js插件安装图文教程
May 06 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
学习vue.js条件渲染
Dec 03 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 #Javascript
vue中实现滚动加载更多的示例
Nov 08 #Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 #Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 #Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 #Javascript
thinkjs 文件上传功能实例代码
Nov 08 #Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 #jQuery
You might like
PHP在Web开发领域的优势
2006/10/09 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
vue中倒计时组件的实例代码
2018/07/06 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
python判断字符串是否纯数字的方法
2014/11/19 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
小学班长竞选演讲稿
2014/04/24 职场文书
同志主要表现材料
2014/08/21 职场文书
教育实习指导教师评语
2014/12/31 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
化工生产实习心得体会
2016/01/22 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis