最近在使用jQuery和ES6的箭頭函數(shù)時，遇到了一些沖突的問題。我這里分享一下我的經(jīng)驗和解決方法。

首先，要了解jQuery和ES6箭頭函數(shù)的區(qū)別。jQuery是一個JavaScript庫，提供了一系列簡潔和跨瀏覽器的API，使操作DOM和處理事件變得更加容易。而ES6箭頭函數(shù)是一種語法糖，它提供了一種更簡潔的方式來定義函數(shù)，同時具有詞法作用域和不可變this綁定的特性。

然而，當(dāng)你將箭頭函數(shù)與jQuery混合使用時，可能會遇到一些沖突。

$(document).ready(() =>{
$('.btn').click(() =>{
// some code here
});
});

在這個例子中，我們使用了箭頭函數(shù)來定義"ready"和"click"事件的回調(diào)函數(shù)。然而，問題是當(dāng)你在回調(diào)函數(shù)內(nèi)使用了"this"關(guān)鍵字時，它不再指向原來的DOM元素，而指向了"window"對象。

$('.btn').click(() =>{
const text = $(this).text();               // ERROR!
});

這個例子中，如果你像平常一樣使用"this"來獲取當(dāng)前按鈕的文本，你會發(fā)現(xiàn)它會報錯。因為在箭頭函數(shù)內(nèi)部，"this"已經(jīng)被綁定到了"window"對象上，而不是原來的DOM元素。

為了避免這個問題，你需要使用ES5的"function"關(guān)鍵字來定義回調(diào)函數(shù)，并在回調(diào)函數(shù)內(nèi)部使用"bind"方法來綁定"this"關(guān)鍵字到原來的DOM元素上。

$(document).ready(function() {
$('.btn').click(function() {
const text = $(this).text();             // OK!
}.bind(this));
});

在這個例子中，我們使用了ES5的"function"關(guān)鍵字來定義回調(diào)函數(shù)，并使用"bind"方法來綁定"this"關(guān)鍵字到原來的DOM元素上。

總之，當(dāng)你使用jQuery和ES6箭頭函數(shù)混合使用時，你需要注意"this"關(guān)鍵字的綁定問題。如果你不小心直接使用"this"關(guān)鍵字，可能會導(dǎo)致一些意想不到的問題。