为什么不使用箭头函数在电子参考脚本中工作?

时间:2017-12-14 21:41:30

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

  

快速免责声明:我只是非常模糊地熟悉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标准的脚本时,我需要做一些额外的步骤吗?或者电子有什么奇怪的事吗?

1 个答案:

答案 0 :(得分: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())