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 相关文章推荐
Javascript中Eval函数的使用
Mar 23 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
php与js的区别是什么
Aug 05 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
手把手教你使用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程序中防止盗链
2008/04/09 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
php实现等比例压缩图片
2018/07/26 PHP
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
python获取豆瓣电影简介代码分享
2014/01/16 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
python中的列表与元组的使用
2019/08/08 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
大学生涯自我鉴定
2014/01/16 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
运动会100米加油稿
2015/07/21 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle