本文實例講述了ES6中javascript實現(xiàn)函數(shù)綁定及類的事件綁定功能的方法。分享給大家供大家參考，具體如下：

函數(shù)綁定

箭頭函數(shù)可以綁定this對象，大大減少了顯式綁定this對象的寫法（call、apply、bind）。但是，箭頭函數(shù)并不適用于所有場合，所以 ES7 提出了 “ 函數(shù)綁定 ” （ function bind ）運算符，用來取代call、apply、bind調(diào)用。雖然該語法還是 ES7 的一個提案，但是 Babel 轉碼器已經(jīng)支持。

函數(shù)綁定運算符是并排的兩個雙冒號（ :: ），雙冒號左邊是一個對象，右邊是一個函數(shù)。該運算符會自動將左邊的對象，作為上下文環(huán)境（即 this 對象），綁定到右邊的函數(shù)上面。

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提供了類，給模塊化帶來了很大的幫助。在類里面綁定事件，一來是為了使得代碼結構清晰，二來是為了可以使用類的變量和方法。但是，由于事件的回調(diào)函數(shù)并不是由類的實例對象觸發(fā)，所以，事件回調(diào)函數(shù)里面并不能訪問類的this變量。另外，我們也不希望事件回調(diào)函數(shù)對外暴露，免得調(diào)用者直接調(diào)用。

簡單來說，我們就希望：

1. 事件回調(diào)函數(shù)要能訪問類的this變量
2. 事件回調(diào)函數(shù)不能直接調(diào)用

如何訪問類的this

方案一：將類的this保存成一個局部變量

this的指代是動態(tài)改變的，但是局部變量的指代卻是明確的，并且，函數(shù)定義的局部變量在整個函數(shù)里面都可以用。所以，我們可以使用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(){   //事件處理函數(shù)  }  //解綁事件  unBindEvent(){   this.button1.off();  }}

這種方法只在使用jquery時有用，因為jquery解綁事件不需要提供回調(diào)函數(shù)，直接off就可以了。但是原生js需要提供回調(diào)函數(shù)也有它的道理，因為同一個元素的同一種事件可以綁定多個回調(diào)函數(shù)，所以你需要指出釋放哪一個。