javascript - 为什么箭头函数不能在 Electron 引用的脚本中工作？

Question

Quick Disclaimer: I'm only very vaguely familiar with html and javascript; I never do any web development. I'm learning electron because it seems like a novel approach to gui programming.

<小时/>

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

现在，我对他们的交互式浏览器环境不太了解，但我在自己的环境中设置了相同的示例。不同之处在于我使用 Electron 来显示页面，并且链接了一个脚本而不是将其写入 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 标准的脚本时是否需要执行一些额外步骤？或者 Electron 发生了什么奇怪的事情吗？

Answer 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())