收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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需要提供回調函數也有它的道理,因為同一個元素的同一種事件可以綁定多個回調函數,所以你需要指出釋放哪一個。

方案二:使用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自定義事件功能與用法。分享給大家供大家參考,具體如下:概述自定義事件很難派上用場?為什么自定義事件很難派上用場,

js使用xml數據載體實現城市省份二級聯動效果
本文實例為大家分享了使用xml數據載體實現城市省份二級聯動的具體代碼,供大家參考,具體內容如下首先寫好前臺頁面testProvince.jsp,將請求通過open、

詳解用webpack的CommonsChunkPlugin提取公共代碼的3種方式
Webpack的CommonsChunkPlugin插件,負責將多次被使用的JS模塊打包在一起。CommonsChunkPlugin能解決的問題在使用插件前,考慮幾個問題:對哪些chunk進行提取,這

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
时时彩免费分析软件