为什么箭头函数在电子的引用脚本中不起作用？ [复制]答案

【问题标题】：Why don't arrow functions work in a referenced script in electron? [duplicate]为什么箭头函数在电子的引用脚本中不起作用？ [复制]
【发布时间】：2017-12-14 21:41:29
【问题描述】：

快速免责声明：我对 html 和 javascript;我从不做任何网络开发。我在学电子因为它似乎是一种新颖的 gui 编程方法。

我正在学习如何使用电子，同时还学习不同的 javascript 库，例如 jQuery 和 bootstrap。我目前正在通过w3schools 开发 jQuery。在链接页面上的example 中，他们使用匿名函数来编写脚本。很酷，但我想使用箭头函数语法。

现在，我对他们的交互式浏览器环境了解不多，但我在自己的环境中设置了相同的示例。不同之处在于我使用电子来显示页面，并且我正在链接脚本而不是在index.html 中编写它。即在我的head 标签下我有

 <script src="./script.js"></script>

script.js 看起来像这样

let $ = require('jquery')

$(document).ready(() => {
    $('p').click(() => {
        $(this).hide()
    })
})

main.js 看起来像这样

const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')

app.on('ready', () => {
    let win = new BrowserWindow({width: 800, height: 600})
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }))
})

当我运行electron ./main.js 时，您会认为任何<p> 项目在您单击它们时会消失，但它们不会。但是，如果我将 script.js 中的所有箭头函数改回旧的匿名函数语法，一切都会按预期进行。

我不明白为什么会发生这种情况，因为main.js 中有箭头函数，而且它工作得很好。引用使用 ES6 标准的脚本时，我需要做一些额外的步骤吗？还是电子发生了什么奇怪的事情？

【问题讨论】：

那么就不能用箭头函数对点击的对象进行操作了吗？
这回答了我的问题并完全解决了我的问题。我不知道最好的做法是什么：您应该回答这个问题以便我接受，还是应该结束这个问题？

标签： javascript jquery ecmascript-6 electron arrow-functions

【解决方案1】：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

根据他们的定义，箭头函数不会为与普通函数相关的各种变量赋值，其中之一是this。

箭头函数表达式的语法比函数表达式短，并且没有自己的 this、arguments、super 或 new.target

有两种方法可以解决这个问题。首先，使用将值分配给this 的普通函数。或者，您可以将事件传递给事件处理程序并从中访问元素。

$('p').on('click', e => $(e.target).hide())

【讨论】：