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

本文实例讲述了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需要提供回调函数也有它的道理，因为同一个元素的同一种事件可以绑定多个回调函数，所以你需要指出释放哪一个。