화살표 기능을 사용하면 안 되는 이유는 무엇입니까?

누가 화살표 기능의 단순함을 좋아하지 않습니까? ECMAScript 6의 일부로 도입된 화살표 기능은 널리 퍼졌습니다. 함수를 선언하는 새로운 구문은 시간을 절약하고 많은 상황에서 명확성을 향상시켜 일반적으로 JS 함수 선언과 함께 제공되는 산만하고 불필요한 덩어리를 모두 제거합니다 😫. 이 기사에서는 화살표 기능을 사용해야 하는 경우와 사용하지 말아야 하는 경우에 대해 더 자세히 이야기할 것입니다. 그러니 혼란을 피하기 위해 끝까지 저와 함께 해주세요.

정규 함수 선언

function holidays(){ 
return "Merry Christmas and a happy new year 😀!"
}

const result = list.map(function(item) { return item; })

Es6 기능으로

const holidays = () => "Merry Christmas and a happy new year 😀!"

const result = list.map((item) => item)

사랑스럽지 않니? 어쨌든 둘 사이의 차이점은 구문뿐 아니라 모든 상황에서 사용할 수 없으므로 주의해야 합니다.

그렇다면 언제 화살표 기능을 사용하는 것이 바람직하지 않습니까? 🙄?

1. 객체 메소드

const post= {
likes: 0,
like: () => {
this.likes++;
}
}

위의 예에서 post.like()를 호출할 때마다 속성post.likes이 처음에는 0에서 1로 1씩 증가할 것이라고 생각하는 것은 본능적일 것입니다.
안타깝게도 그렇지 않습니다. 좋아요의 가치는 슬프게도 동일하게 유지되며 이 게시물은 절대 인기를 얻지 못할 것입니다.

like() 메서드를 호출하면 단순히 전역 창 개체에서 like 속성을 증가시키려고 시도할 것입니다.

그러나 대신 다음과 같은 기존 구문을 사용합니다.

const post = {
likes: 0,
like: function() {
this.likes++;
}
}

2. 객체 프로토타입

위의 예와 마찬가지로 개체 프로토타입은 다음 예와 같이 이것을 전역 창 개체로 평가합니다.

class Post {
constructor(title) {
this.title = title;
this.shared = false;
}
};

Post.prototype.share = () => {
return this.shared = true;
};

유사하게, 앞의 경우에서 메소드 share()는 window 객체에 대한 범위로 인해 작동하지 않습니다. 그리고 다시 솔루션이 친숙해 보일 것입니다.

Post.prototype.share2 = function() { return this.shared = true; };

위에서 본 것 외에도 화살표 기능의 몇 가지 제한 사항이 있습니다.

this 또는 super에 대한 자체 바인딩이 없음

이벤트 핸들러, 객체의 메서드, 클래스의 메서드 또는 프로토타입 메서드로 사용하거나 인수 객체를 사용하는 함수가 있을 때 사용하면 안 됩니다.

일반적으로 범위 설정에 의존하는 호출, 적용 및 바인딩 방법에 적합하지 않음

생성자로 사용할 수 없음

본체 내에서 yield를 사용할 수 없음

MDN에서 가져옴

계속하려면...

시간을 내어 이 게시물을 읽어주셔서 감사합니다. 즐거우셨기를 바랍니다. 댓글에서 어떻게 생각하는지 알려주시고 저와 연락하거나 , 및 에서 연락하는 것을 잊지 마세요. 다시 한 번 메리 크리스마스, 2021년 새해 복 많이 받으세요🌲.