2017-12-14 17 views
0

빠른 면책 조항 : 나는 단지 매우 막연하게 html에 익숙하며 javascript; 나는 어떤 웹 개발도하지 않는다. 나는 전자 프로그래밍 을 배우고 있기 때문에 그것은 GUI 프로그래밍에 참신한 접근처럼 보입니다. 전자에서 참조 된 스크립트에서 화살표 기능이 작동하지 않는 이유는 무엇입니까?


나는 동시에 jQuery와 부트 스트랩 같은 다른 자바 스크립트 라이브러리를 배우면서 전자를 사용하는 방법을 배우는 중이에요. 저는 현재 w3schools을 통해 jQuery를 만들고 있습니다. 연결된 페이지의 example에서는 익명 함수를 사용하여 스크립트를 작성합니다. 멋지지만, 화살표 함수 구문을 사용하고 싶습니다.

이제는 대화 형 브라우저 환경에 대해 잘 모릅니다.하지만 내 자신의 환경에서 동일한 예제를 설정했습니다. 차이점은 페이지를 표시하는 데 전자를 사용하고 있고 스크립트를 index.html에 쓰는 대신 연결하는 것입니다. 즉, 내 head 태그에서 나는이

let $ = require('jquery') 

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

main.js의 모습처럼

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

script.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> 항목을 expext 것 당신이 그들을 클릭 할 때 그들은하지 않습니다. 그러나 이전의 익명 함수 구문으로 script.js의 모든 화살표 함수를 변경하면 모든 것이 예상대로 작동합니다.

main.js에 화살표 기능이 있기 때문에 왜 이런 일이 발생하는지 완전히 이해하지 못합니다. 정상적으로 작동합니다. ES6 표준을 사용하는 스크립트를 참조 할 때 수행해야 할 추가 단계가 있습니까? 아니면 전자로 진행되는 이상한 것이 있습니까?

+0

클릭 한 개체에 대해 화살표 기능을 사용하여 작업을 수행 할 수 있습니까? –

+0

이 질문에 대한 답변으로 제 문제를 완전히 해결했습니다. 나는 최선의 행동이 무엇인지 모르겠다. 당신이 이것을 받아 들일 수 있도록 대답해야합니까, 아니면 질문을 닫아야합니까? –

답변

1

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

화살표 기능들은 그들의 정의에 의해 하나의 this 인 정상 기능과 관련된 여러 변수에 값을 할당하지 않는다.

화살표 함수 표현식은 함수 표현식보다 짧은 구문을 가지고 있으며,이 자체가없는이 문제를 해결 방법은 두 가지가 있습니다

, 인수, 슈퍼, 또는 new.target. 먼저 값을 this에 할당 할 일반 함수를 사용합니다. 또는 이벤트를 이벤트 핸들러에 전달하고 요소를 액세스 할 수 있습니다.

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