itsource

ECMAScript 6의 화살표 기능은 언제 사용해야 합니까?

mycopycode 2022. 10. 15. 09:13
반응형

ECMAScript 6의 화살표 기능은 언제 사용해야 합니까?

★★★★★★★★★★★★★★★★ () => {} ★★★★★★★★★★★★★★★★★」function () {}ES6에서 함수를 쓰는 매우 유사한 방법이 두 가지 있습니다.다른 언어에서는 람다 함수가 익명으로 구별되는 경우가 많지만 ECMAScript에서는 모든 함수가 익명으로 구별될 수 있습니다.사용 있습니다(즉, 「」의 사용 도메인이 있는 경우).this명시적으로 바인드하거나 명시적으로 바인드하지 않을 필요가 있습니다).그 도메인들 사이에는 어느 하나의 표기법이 적합한 경우가 매우 많다.

ES6의 화살표 기능에는 다음 두 가지 이상의 제한이 있습니다.

  • 와 함께 작업하지 않음new 때 할 수 .prototype
  • ★★★★★★this 시

이 두 가지 제한은 차치하고, 이론적으로 화살표 기능은 거의 모든 곳에서 일반 기능을 대체할 수 있습니다.실제로 사용하는 올바른 접근법은 무엇입니까?화살표 기능을 사용해야 합니까? 예:

  • 서나」, 「서나」, 「어디서나」, 「어디서나」, 「어디서나」, 「서나」, 「어디서나」, 「어디서나」, 「어디서나」, 「서나」, 「서나,this오브젝트를 작성하지 않습니다.
  • "필요한 모든 곳"만 해당됩니다. 즉, 특정 범위에 구속되어야 하는 이벤트 청취자, 타임아웃
  • '짧은' 기능은 있지만 '긴' 기능은 없습니다.
  • 다른 화살표 기능을 포함하지 않는 기능만 포함

향후 ECMAScript 버전에서 적절한 함수 표기법을 선택하기 위한 가이드라인을 찾고 있습니다.가이드라인은 팀 내 개발자에게 가르칠 수 있도록 명확해야 하며, 기능 표기법을 왔다 갔다 할 필요가 없도록 일관성을 유지해야 합니다.

이 질문은, ECMAScript 6(Harmony)의 문맥에서 코드 스타일에 대해 생각해 본 적이 있고, 그 언어를 이미 사용해 본 적이 있는 사람을 대상으로 하고 있습니다.

조금 전에 저희 팀은 모든 코드를 이행했습니다(중형 Angular).JS 앱)을 사용하여 컴파일된 JavaScript로 이동합니다. 트레이서 바벨.현재 ES6 이후의 기능에는 다음과 같은 경험 규칙을 사용하고 있습니다.

  • function및 「」의 경우Object.prototype★★★★★★ 。
  • class브젝오
  • =>른른른른

왜 거의 모든 곳에서 화살표 기능을 사용하는가?

  1. 이 동일한 기능을 할 수 .thisObject하나의 가 엉망이될 수.하나의 표준 함수 콜백이라도 화살표 함수와 함께 사용하면 스코프가 엉망이 될 수 있습니다.
  2. 콤팩트성:화살표 기능은 읽고 쓰기가 더 쉽습니다.(이것이 독단적으로 보일 수 있기 때문에 몇 가지 예를 더 들겠습니다.
  3. , 의 일반 의의,,,,, function,,,,,,, 든든,,,,, ,,,,,, 。function스코프를 정의하기 위해 즉시 튀어나옵니다.는 항상 값을 할 수 .function에서는, 「」의 할 수 있습니다.thisObject empty.month.mpti.

글로벌 스코프 또는 모듈 스코프에서 항상 일반 기능을 사용하는 이유는 무엇입니까?

  1. 할 수 thisObject.
  2. window오브젝트(글로벌스코프)는 명시적으로 대처하는 것이 가장 좋습니다.
  3. ★★★Object.prototype범위 내에 합니다(생각합니다).String.prototype.truncate과 같은 있어야 합니다.function★★★★★★★★★★★★★를 일관되게 사용.function에러를 회피할 수 있습니다.
  4. 글로벌 범위의 많은 함수는 이전 스타일의 클래스 정의를 위한 개체 생성자입니다.
  5. 함수의 이름을 지정할1 수 있습니다.이것은 두 가지 장점이 있다: (1) 쓰는 것이 덜 어색하다.function foo(){}const foo = () => {}호출이 아닌 에 표시됩니다.- 「하다」. (2) 「하다」.모든 내부 콜백에 이름을 붙이는 것은 번거로운 일이지만, 모든 공용 함수에 이름을 붙이는 것은 좋은 생각입니다.
  6. 함수 선언은 호이스트됩니다(즉, 선언하기 전에 액세스할 수 있습니다).이것은 스태틱 유틸리티 함수의 유용한 속성입니다.

오브젝트 컨스트럭터

화살표 함수를 인스턴스화하려고 하면 예외가 발생합니다.

var x = () => {};
new x(); // TypeError: x is not a constructor

따라서 화살표 함수에 비해 함수의 주요 이점 중 하나는 객체 생성자 역할을 이중으로 한다는 것입니다.

function Person(name) {
    this.name = name;
}

단, 기능적으로 동일한2 ECMAScript Harmony 초안 클래스 정의는 거의 다음과 같이 컴팩트합니다.

class Person {
    constructor(name) {
        this.name = name;
    }
}

나는 앞의 표기법을 사용하는 것이 결국 권장되지 않을 것으로 예상한다.오브젝트 컨스트럭터 표기법은 오브젝트가 프로그래밍 방식으로 생성되는 단순한 익명 오브젝트 팩토리에 대해 여전히 사용될 수 있습니다.

를 '컨스트럭터'로하는 것을 .class어나니머스 합니다.이 구문은 익명 함수/클래스에서도 작동합니다.

화살표 기능의 가독성

표준 기능을 고수하는 가장 좋은 이유는 화살표 기능이 일반 기능보다 읽기 쉽기 때문일 것입니다.애초에 코드가 기능하지 않으면 화살표 기능이 필요 없는 것처럼 보일 수 있으며 화살표 기능이 일관되게 사용되지 않으면 보기 흉합니다.

5. ECMAScript 5.1이 하게 된 ECMAScript가 되었습니다.Array.forEach,Array.map이 모든 기능 프로그래밍 기능은 이전에 루프에 사용되었던 함수를 사용합니다.비동기 JavaScript는 상당히 발전했다.ES6는 또한 물체를 배송할 것이며, 이는 더 많은 익명 기능을 의미합니다.기능적 프로그래밍은 되돌릴 수 없습니다.기능성 JavaScript에서는 일반 함수보다 화살표 함수가 선호됩니다.

예를 들어 다음과 같은 코드3(특히 혼란스러운)를 예로 들 수 있습니다.

function CommentController(articles) {
    this.comments = [];

    articles.getList()
        .then(articles => Promise.all(articles.map(article => article.comments.getList())))
        .then(commentLists => commentLists.reduce((a, b) => a.concat(b)));
        .then(comments => {
            this.comments = comments;
        })
}

일반 기능을 가진 동일한 코드 조각:

function CommentController(articles) {
    this.comments = [];

    articles.getList()
        .then(function (articles) {
            return Promise.all(articles.map(function (article) {
                return article.comments.getList();
            }));
        })
        .then(function (commentLists) {
            return commentLists.reduce(function (a, b) {
                return a.concat(b);
            });
        })
        .then(function (comments) {
            this.comments = comments;
        }.bind(this));
}

화살표 기능 중 하나는 표준 기능으로 대체할 수 있지만, 그렇게 함으로써 얻을 수 있는 것은 거의 없습니다.어떤 버전이 더 읽기 쉽습니까?난 첫 번째라고 말할 거야.

시간이 지남에 따라 화살표 기능과 일반 기능 중 어느 것을 사용할 것인가 하는 문제는 관련성이 낮아질 것이라고 생각합니다.대부분의 함수는 클래스 메서드가 되며, 이 메서드에서는function키워드를 지정하지 않으면 클래스가 됩니다. 함수는 계속 합니다.이 함수는 패치 적용 됩니다.Object.prototype 저는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★function클래스 메서드 또는 클래스여야 하는 임의의 키워드를 지정합니다.

메모들

  1. 이름 있는 화살표 함수는 ES6 사양에서 연기되었습니다.향후 버전도 추가될 수 있습니다.
  2. 초안 사양에 따르면 클래스가 다음을 사용하지 않는 한, "클래스 선언/식은 생성자 함수/프로토타입 쌍을 만듭니다."extend키워드를 지정합니다.작은 차이는 클래스 선언이 상수인 반면 함수 선언은 상수가 아니라는 것입니다.
  3. 싱글 스테이트먼트 화살표 함수의 블록에 관한 주의:부작용만으로 화살표 함수를 호출하는 블록(예: 할당)을 사용하는 것을 좋아합니다.그러면 반환값을 폐기할 수 있습니다.

제안서에 따르면 화살표는 "기존 함수 표현의 몇 가지 공통적인 문제점을 해결하고 해결하는 것"을 목표로 한다.그들은 구속함으로써 문제를 개선하려고 의도했다.this이치노

하지만,

  • 되게 할 수 this
  • 화살표 기능 구문이 섬세하고 애매함

화살표 수. 어휘는 JavaScript로 해야 합니다.function배타적으로

에 대해서this

this가 있다 문제가 있습니다.

function Book(settings) {
    this.settings = settings;
    this.pages = this.createPages();
}
Book.prototype.render = function () {
    this.pages.forEach(function (page) {
        page.draw(this.settings);
    }, this);
};

해야 하는 문제를 입니다.this몇 .을 사용하다 할당할 수 this「」, 「」를 합니다.bind 세 Array는 가장 과 같이 수 .그러나 화살표가 가장 간단한 해결 방법인 것 같기 때문에 이 방법은 다음과 같이 리팩터링할 수 있습니다.

this.pages.forEach(page => page.draw(this.settings));

가 jQuery와 , jQuery의 는 「」, 「jQuery」, 「jQuery」와 같이 바인드 됩니다.this 그럼 이제 두 개의 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 맞다.this" " " : " 。

Book.prototype.render = function () {
    var book = this;
    this.$pages.each(function (index) {
        var $page = $(this);
        book.draw(book.currentPage + index, $page);
    });
};

써야 돼요.function★★★★★★★★★★★★★★의 순서로eachthis기능을 할 수 여기서는 화살표 기능을 사용할 수 없습니다.

개의 ★★★★★★★★★★★★에 대하여this이 더 좋은지 알기 에 값도 수 this 있는 것 "Manager: " "Manager" : "Manager" :

function Reader() {
    this.book.on('change', function () {
        this.reformat();
    });
}

요?Book.prototype.reformat아니면 묶는 걸 잊었나?this 전화를 Reader.prototype.reformat, 인 것을 this그러나 화살표가 한 줄에 맞기 때문에 화살표를 선택했습니다.

function Reader() {
    this.book.on('change', () => this.reformat());
}

예를 들어 다음과 같이 생각할 수 있습니다. "화살표가 때때로 잘못된 기능이 될 수 있다는 것은 예외적인 일입니까?인 것이 거의 없는 this다'

그러나 다음과 같이 자문해 보십시오. "코드를 디버깅하고 오류의 결과가 '엣지 케이스'로 인해 발생했다는 것을 알아내는 것이 '가치 있는 일'일까요?"저는 대부분의 경우뿐만 아니라 100% 문제를 피하고 싶습니다.

있다: 사용하다: function)this는, 동적으로 바인드 할 수 또, 참조할 수 있습니다this. 이름을 합니다.변수는 어휘적이며 여러 이름을 가정합니다.「」의 할당this변수를 지정하면 다음과 같은 의도를 명확히 할 수 있습니다.

function Reader() {
    var reader = this;
    reader.book.on('change', function () {
        var book = this;
        book.reformat();
        reader.reformat();
    });
}

또한 항상 할당this(단일)이 에도)에 this또는 다른 기능이 없는 경우)는 코드가 변경된 후에도 사용자의 의도를 명확하게 유지하도록 보장합니다.

다이나믹 아, 아, 아, 아, 아, 아, 아, 아, 아, 아.this는 개 (2016년).jQuery는 5천만 개 이상의 웹 사이트에서 사용되고 있습니다(2016년 2월 현재).에도 API를 API가 있습니다.this★★★★

  • 어제 12만 는 모카를 통해 합니다.this.
  • 어제 63,는 Grunt(어제 63,000 다운로드)를 통해 빌드 합니다.this.
  • 백본 yesterday)은 백본('22,000')에 액세스하는 방법을 정의합니다.this.
  • 는 "API(DOM)" DOM을 합니다.EventTargetthis.
  • 패치 적용 또는 확장되는 프로토타입 API는 다음을 포함하는 인스턴스를 참조합니다.this.

(http://trends.builtwith.com/javascript/jQuery 및 https://www.npmjs.com을 통한 통계).

다이나믹하다, 다이나믹하다, 이런 할 것 요.this바인딩이 이미 있습니다.

휘휘 athis그렇지 않은 경우도 처럼,this때로는 예상되지만 때로는 예상되지 않습니다.을 하다이 방법은 항상 예상되는 바인딩을 생성하고 전달합니다.

간결한 구문에 대해서

화살표 함수는 함수에 대해 "짧은 구문 형식"을 제공하는 데 성공했습니다.하지만 이러한 짧은 기능이 더 성공적일까요?

이는?x => x * x가 어렵다보다 읽기가 function (x) { return x * x; }그럴지도 모릅니다. 왜냐하면 짧은 코드 한 줄을 만들 가능성이 높기 때문입니다.Dyson의 "읽기 속도와 행 길이가 화면에서 읽는 효과에 미치는 영향"에 따르면,

중간 줄 길이(1줄당 55자)는 일반 속도 및 빠른 속도에서 효과적으로 읽을 수 있도록 지원합니다.이것은 최고 수준의 이해력을 낳았다.

연산자 및 한 (삼진수) 에도 동일한 됩니다.if★★★★★★★★★★★★★★★★★★.

하지만, 당신은 정말로 제안서에 광고된 간단한 수학 함수를 쓰고 있나요?내 영역은 수학적이지 않기 때문에 서브루틴이 이렇게 우아한 경우는 거의 없습니다.오히려 편집기나 스타일 가이드로 인해 화살표 기능이 열 제한을 깨고 다른 행으로 줄 바꿈으로써 다이슨의 정의에 의한 "가독성"이 무효가 되는 것을 흔히 볼 수 있습니다.

"가능한 한 짧은 기능에 짧은 버전을 사용하는 것은 어떨까요?"라고 생각할 수 있습니다. "한 하세요." " 긴 만 바인딩될 수 ."this 은 특히 오용하기 이러한 결합으로 인해 화살이 특히 잘못 사용되기 쉽습니다.

화살표 함수 구문에는 다음과 같은 많은 문제가 있습니다.

const a = x =>
    doSomething(x);

const b = x =>
    doSomething(x);
    doSomethingElse(x);

이들 함수는 모두 구문적으로 유효합니다. ★★★★★★★★★★★★★★★★★.doSomethingElse(x);에 없다b그것은 단지 의도적이지 않은 최상급 성명일 뿐이다.

형식으로 인 '암묵적'이.return복원하는 것을 잊어버릴 수 있습니다.하지만 그 표현은 단지 부작용을 일으키기 위한 것일 수도 있습니다 그러니 누가 알겠습니까?return으로로필?필 요??

const create = () => User.create();

const create = () => {
    let user;
    User.create().then(result => {
        user = result;
        return sendEmail();
    }).then(() => user);
};

const create = () => {
    let user;
    return User.create().then(result => {
        user = result;
        return sendEmail();
    }).then(() => user);
};

정지 매개변수로 의도할 수 있는 것은 확산 연산자로 해석할 수 있습니다.

processData(data, ...results => {}) // Spread
processData(data, (...results) => {}) // Rest

할당은 기본 인수와 혼동될 수 있습니다.

const a = 1;
let x;
const b = x => {}; // No default
const b = x = a => {}; // "Adding a default" instead creates a double assignment
const b = (x = a) => {}; // Remember to add parentheses

블록은 객체처럼 보입니다.

(id) => id // Returns `id`
(id) => {name: id} // Returns `undefined` (it's a labeled statement)
(id) => ({name: id}) // Returns an object

이것은 무엇을 의미합니까?

() => {}

을 염두에 두고,는 (을) 배치해야 .){ 후에=>현현 구구 ?한 한? ???을 사용하다

=>가 마치<= ★★★★★★★★★★★★★★★★★」>=:

x => 1 ? 2 : 3
x <= 1 ? 2 : 3

if (x => 1) {}
if (x >= 1) {}

하려면 , 「화살표」를 붙여야 .()겉으로는()이치노

(() => doSomething()()) // Creates function calling value of `doSomething()`
(() => doSomething())() // Calls the arrow function

을면면면면라고 (() => doSomething()());즉석에서 추출된 함수식을 작성할 목적으로 아무 일도 일어나지 않습니다.

위의 모든 경우를 염두에 두고 화살표 기능이 "더 이해하기 쉽다"고 주장하기는 어렵다.이 구문을 사용하는 데 필요한 모든 특별한 규칙을 배울 수 있습니다.정말 그럴 가치가 있나요?

의 . " " "function는 예외적으로 일반화되어 있습니다.「」를 function언어 자체가 혼란스러운 코드를 쓰는 것을 막는다는 것을 의미합니다.해야 할 하기 위해서 저는 이 순서를 합니다.function.

가이드라인에 대해서

명확하고 일관성 있는 가이드라인을 요구합니다.화살표 함수를 사용하면 결과적으로 구문적으로 유효하고 논리적으로 무효인 코드가 생성되며, 두 함수 형식이 의미 있고 임의로 서로 얽히게 됩니다.따라서 다음 사항을 제안합니다.

ES6의 함수 표기 가이드라인:

  • '하다'로 순서를 .function.
  • 「」를 할당해 주세요.this변수로 변환합니다.「 」를하지 주세요.() => {}.

기능을 단순화하기 위해 화살표 기능이 생성되었습니다.scopethis키워드를 지정합니다.용용 the the the the the =>이치노

주의: 기존 기능은 대체되지 않습니다.모든 함수 구문을 화살표 함수로 대체하면 모든 경우에 해당되지 않습니다.

ES5를 사용하다 경우,this키워드는 객체의 메서드(객체에 속하는 함수) 안에 있었습니다.것은은 ?엇 ?? ????

var Actor = {
  name: 'RajiniKanth',
  getName: function() {
     console.log(this.name);
  }
};
Actor.getName();

은 ', 하다'를 말합니다.object해 주세요."RajiniKanth"다음 스니펫을 살펴보고 여기서 무엇을 의미하는지 알아보겠습니다.

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  showMovies: function() {
   this.movies.forEach(function(movie) {
     alert(this.name + " has acted in " + movie);
   });
  }
};

Actor.showMovies();

, 그럼 에 '나', '나'가this키워드는 안에 있었다.method’s function

에서는 ' 하다'를 가리킵니다.window objectinner function scope왜냐면this이 경우 윈도/글로벌오브젝트는 범위를 벗어났기 때문에 항상 현재 기능의 소유자를 참조합니다.

「 」의 에 .object의 메서드:function의 소유자는 오브젝트입니다.따라서 이 키워드는 오브젝트에 바인드됩니다.단, 독립형 또는 다른 방법 중 하나에서 기능 내부에 있는 경우, 이 기능은 항상window/global★★★★★★ 。

var fn = function(){
  alert(this);
}

fn(); // [object Window]

이 문제를 해결하는 방법은 ES5 자체에도 있습니다.ES6 화살표 기능에 대해 알아보기 전에 해결 방법을 알아보겠습니다.

일반적으로 메서드의 내부 함수 외부에 변수를 생성합니다., 이제 ㅇㅇ, ㅇㅇ.‘forEach’는 메서 method method method method method method method method method method method method method method method에 할 수 있습니다.this에, 「 」는object’s속성 、 값그값 。

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  showMovies: function() {
   var _this = this;
   this.movies.forEach(function(movie) {
     alert(_this.name + " has acted in " + movie);
   });
  }
};

Actor.showMovies();

「」를 사용합니다.bindthis「」의 을 .method’s inner function.

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  showMovies: function() {
   this.movies.forEach(function(movie) {
     alert(this.name + " has acted in " + movie);
   }.bind(this));
  }
};

Actor.showMovies();

ES6 화살표 기능을 통해 어휘 범위 지정 문제에 보다 쉽게 대처할 수 있습니다.

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  showMovies: function() {
   this.movies.forEach((movie) => {
     alert(this.name + " has acted in " + movie);
   });
  }
};

Actor.showMovies();

화살표 함수는 상위 스코프에 바인딩된다는 점을 제외하고는 함수 문에 가깝습니다.화살표 기능이 최상위 스코프에 있는 경우this인수는 윈도/글로벌스코프를 참조하고 일반 함수 내부의 화살표 함수는 외부 함수와 같은 인수를 가집니다.

화살표 기능 포함this는 작성 시 동봉된 범위에 바인딩되어 변경할 수 없습니다.새로운 연산자 bind, call 및 apply는 이 문제에 영향을 주지 않습니다.

var asyncFunction = (param, callback) => {
  window.setTimeout(() => {
  callback(param);
  }, 1);
};

// With a traditional function if we don't control
// the context then can we lose control of `this`.
var o = {
  doSomething: function () {
  // Here we pass `o` into the async function,
  // expecting it back as `param`
  asyncFunction(o, function (param) {
  // We made a mistake of thinking `this` is
  // the instance of `o`.
  console.log('param === this?', param === this);
  });
  }
};

o.doSomething(); // param === this? false

위의 예에서는 이 컨트롤이 상실되었습니다.는 변수 할 수 .this 「」를 사용합니다.bind하면 ES6의 가 쉬워집니다.this어휘 범위와 관련이 있기 때문입니다.

var asyncFunction = (param, callback) => {
  window.setTimeout(() => {
  callback(param);
  }, 1);
};

var o = {
  doSomething: function () {
  // Here we pass `o` into the async function,
  // expecting it back as `param`.
  //
  // Because this arrow function is created within
  // the scope of `doSomething` it is bound to this
  // lexical scope.
  asyncFunction(o, (param) => {
  console.log('param === this?', param === this);
  });
  }
};

o.doSomething(); // param === this? true

화살표 기능을 사용하지 않는 경우

오브젝트 리터럴 내부

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  getName: () => {
     alert(this.name);
  }
};

Actor.getName();

Actor.getName 호출 시되어 있지 않습니다.이는 '알림'이 '알림'이기 때문입니다.this.nameundefinedwindow.

는 화살표 입니다.window object 스코프... 아, 아, 아, 아, 아, 아." " "의 실행this.name window.name정의되어 있지 않습니다.

오브젝트 프로토타입

은, 「이러다」의 메서드를 됩니다.prototype object메서드를 정의하기 위해 sayCatName 메서드를 context window:

function Actor(name) {
  this.name = name;
}
Actor.prototype.getName = () => {
  console.log(this === window); // => true
  return this.name;
};
var act = new Actor('RajiniKanth');
act.getName(); // => undefined

컨스트럭터를 호출하고 있습니다.

this된 objectconstruction in a construction in a construction Fn()을할 때 "Fn()"의 ,constructor Fn오브젝트입니다.this instanceof Fn === true.

this는, 새롭게 작성된 오브젝트에 할당되지 않는 외부 스코프등의 외부 콘텍스트로부터의 셋업입니다.

var Message = (text) => {
  this.text = text;
};
// Throws "TypeError: Message is not a constructor"
var helloMessage = new Message('Hello World!');

다이내믹 콘텍스트를 사용한 콜백

는 화살 the the the the the the the를 .context선언을 정적으로 실행할 수 없습니다.이벤트 리스너를 DOM 요소에 연결하는 것은 클라이언트 측 프로그래밍에서 일반적인 작업입니다.이벤트는 이를 타깃 요소로 하여 핸들러 기능을 트리거합니다.

var button = document.getElementById('myButton');
button.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});

this는 글로벌 컨텍스트에 정의되어 있는 화살표 함수의 창입니다.클릭 이벤트가 발생하면 브라우저는 버튼 컨텍스트를 사용하여 핸들러 함수를 호출하려고 하지만 화살표 함수는 미리 정의된 컨텍스트를 변경하지 않습니다. this.innerHTML window.innerHTML센스가 없어요.

대상 요소에 따라 이를 변경할 수 있는 함수식을 적용해야 합니다.

var button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log(this === button); // => true
  this.innerHTML = 'Clicked button';
});

버튼을 하면 " " " " 가 됩니다.this핸들러 기능에서는 버튼이 됩니다. ★★★★★★★★★★★★★★★★★▼this.innerHTML = 'Clicked button'버튼 텍스트를 올바르게 변경하여 클릭 상태를 반영합니다.

레퍼런스

화살표 기능 - 지금까지 가장 널리 사용되는 ES6 기능...

사용방법: 다음 경우를 제외하고 모든 ES5 기능을 ES6 화살표 기능으로 대체해야 합니다.

화살표 기능은 다음과 같습니다. 것은 아니다. 사용:

  1. 기능 호이스트를 원할 때
    • 화살표 기능은 익명입니다.
  2. 「 」를하고 this/arguments함수에서.
    • 에는 '화살표'가 때문에this/arguments자신의 외부 상황에 의존합니다.
  3. 명명된 함수를 사용하고 싶은 경우
    • 화살표 기능은 익명입니다.
  4. 을 「기능」으로서constructor
    • 인 「화살표」가 때문에,this.
  5. 함수를 개체 리터럴에 속성으로 추가하고 개체 리터럴에서 개체를 사용하는 경우
    • 할 수 this이데올로기 때문에

화살표 기능의 몇 가지 변형에 대해 더 잘 이해할 수 있도록 하겠습니다.

Variant 1: 여러 인수를 함수에 전달하고 함수에서 값을 반환하는 경우.

ES5 버전:

var multiply = function (a, b) {
    return a*b;
};
console.log(multiply(5, 6)); // 30

ES6 버전:

var multiplyArrow = (a, b) => a*b;
console.log(multiplyArrow(5, 6)); // 30

주의:

function키워드는 필수가 아닙니다. =>필수 항목입니다. {}{} return되어 JavaScript를 때?{} 때 더해야 , 더해야 돼요.return필요할 때.

Variant 2: 1개의 인수만 함수에 전달하고 그 인수에서 값을 반환하는 경우.

ES5 버전:

var double = function(a) {
    return a*2;
};
console.log(double(2)); // 4

ES6 버전:

var doubleArrow  = a => a*2;
console.log(doubleArrow(2)); // 4

주의:

괄호를 할 수 있습니다.().

Variant 3: 인수를 함수에 전달하지 않고 값을 반환하지 않는 경우.

ES5 버전:

var sayHello = function() {
    console.log("Hello");
};
sayHello(); // Hello

ES6 버전:

var sayHelloArrow = () => {console.log("sayHelloArrow");}
sayHelloArrow(); // sayHelloArrow

Variant 4: 화살표 기능에서 명시적으로 복귀하는 경우.

ES6 버전:

var increment = x => {
  return x + 1;
};
console.log(increment(1)); // 2

Variant 5: 화살표 함수에서 객체를 반환하는 경우.

ES6 버전:

var returnObject = () => ({a:5});
console.log(returnObject());

주의:

안에 물건을 요.()자바스크립트

Variant 6: 화살표 기능에는 다음과 같은 기능이 없습니다.arguments이데올로기보다하다.arguments.

ES6 버전:

function foo() {
  var abc = i => arguments[0];
  console.log(abc(1));
};
foo(2); // 2

주의:

foo는 ES5 ES5 입니다.arguments개체와 같은 배열과 그에 전달되는 인수는 다음과 같습니다.2arguments[0]★★★★★★에foo2면 .

abc자체 기능이 없기 때문에 ES6 화살표 기능입니다.arguments 인쇄가 arguments[0]foo대신 외부 컨텍스트를 사용합니다.

Variant 7: 화살표 기능에는 다음과 같은 기능이 없습니다.this은 에 의존하다this

ES5 버전:

var obj5 = {
  greet: "Hi, Welcome ",
  greetUser : function(user) {
        setTimeout(function(){
        console.log(this.greet + ": " +  user); // "this" here is undefined.
        });
     }
};

obj5.greetUser("Katty"); //undefined: Katty

주의:

setTimeout ES5가 .this정의되어 있지 않습니다.use-strict 출력됩니다: 결, 음, 음, 다, 다, 다, 다, 다, 다, 다, 다, 다, 다, 다, 다, 다, 다

undefined: Katty

ES6 버전:

var obj6 = {
  greet: "Hi, Welcome ",
  greetUser : function(user) {
    setTimeout(() => console.log(this.greet + ": " +  user));
      // This here refers to outer context
   }
};

obj6.greetUser("Katty"); // Hi, Welcome: Katty

주의:

이 백콜 to to로 넘어갔습니다.setTimeoutES6 화살표 기능으로 자체 기능은 없습니다.this즉, 외부 컨텍스트에서 가져옵니다.greetUser가지고 있다this그것은obj6 다음과 같은.

Hi, Welcome: Katty

기타:

  • 해서 사용할 수 .new화살표 기능이 있습니다.
  • 화살표 기능에는 다음이 없습니다.prototype★★★★★★★★★★★★★★★★★★.
  • 우리는 의 구속력이 없다.this가 "에서 되었을 때apply ★★★★★★★★★★★★★★★★★」call.

나는 아직도 이 글에서 첫 번째 답장에 쓴 모든 것을 고수하고 있다.하지만, 그 후 코드 스타일에 대한 제 의견이 발전했기 때문에, 이 질문에 대한 새로운 답을 가지고 있습니다.

에 대해서this

마지막 답변에서 저는 이 언어에 대해 가지고 있는 근본적인 믿음은 의도적으로 피했습니다. 왜냐하면 그것은 제가 하고 있는 주장과 직접적으로 관련이 없기 때문입니다.그럼에도 불구하고, 나는 왜 많은 사람들이 화살이 매우 유용하다고 생각했을 때 화살을 사용하지 말라는 나의 권고에 그저 주저하는지 이해할 수 있다.

은 이렇습니다. '그러면 안 는죠. 우리는 이 모든 것을 사용해서는 안 됩니다.this그래서 사용을 피하게 this로 ''이라는 뜻의 '렉시컬'이라는뜻의 '렉시컬'은 '렉시컬'이다.this화살표의 특징은 거의 또는 전혀 가치가 없습니다. ,, 는, 는, 제, also,this은 나쁜은 나쁜 것이다, 화살은 나쁜 것이다.this 것의 또 다른 특징에 의 한 .좋은 일'이 아니라 또 다른 나쁜 언어 기능에 대한 피해 대책의 한 형태입니다.

않지만, 그것이 에게도 그들은 한다. 코드베이스 안에서 일하는 것을.this파일당 수백 번 나타나며, 약간의(또는 많은) 손상 대책은 합리적인 사람이 기대할 수 있는 모든 것입니다.그래서 화살은 어떤 면에서는 나쁜 상황을 개선시킬 때 좋을 수 있습니다.

를 이 더 this화살표가 없는 경우보다 화살표를 사용하는 규칙이 매우 복잡합니다(현재 스레드 참조).따라서 요청하신 대로 가이드라인은 명확하지도 않고 일관적이지도 않습니다.화살표가, 입니다. 왜냐하면 어휘의 가치는this무색하게 만들죠

것은 다음과 입니다. .this 후, 「」에 this화살이 원인이 되는 것은 보통 무관하게 됩니다.이 상황에서는 화살표가 더 중립적이 됩니다.

간결한 구문에 대해서

제가 첫 번째 답변을 쓸 때, 저는 베스트 프랙티스를 슬라브적으로 고수하는 것조차 더 완벽한 코드를 만들 수 있다면 지불할 가치가 있는 대가라고 생각했습니다.그러나, 나는 결국, 때로는 베스트 프랙티스에서 벗어나는 것을 정당화할 수 있을 만큼, 코드 품질을 향상시킬 수 있는 추상화의 한 형태로도 기능할 수 있다는 것을 깨달았다.

바꿔 말하면, 젠장, 나도 원라이너 기능을 원해!

가이드라인에 대해서

가능성이 있다this 기능,가 있는 더 한 가이드라인을 -중립화살 기능, 더 관대한 가이드라인은 다음과 같습니다.

ES6의 함수 표기 가이드라인:

  • 마세요this.
  • 이름으로 호출하는 함수에 대해 함수 선언을 사용합니다(함수가 중지되어 있기 때문에).
  • 콜백에는 화살표 기능을 사용합니다(콜백은 보다 테서인 경향이 있기 때문입니다).

지금까지의 훌륭한 답변과 더불어 화살표 함수가 어떤 의미에서 "일반" 자바스크립트 함수와 근본적으로 다른 이유를 제시하고자 합니다.

논의를 위해 일시적으로 TypeScript나 Facebook의 "Flow"와 같은 타입 체커를 사용한다고 가정해 봅시다.유효한 ECMAScript 6 코드와 플로우 타입의 주석(이 답변의 마지막에 실제로 실행할 수 있도록 Babel에서 실제로 생성되는 비타이프 코드를 포함)인 다음 장난감 모듈을 고려합니다.

export class C {
  n : number;
  f1: number => number;
  f2: number => number;

  constructor(){
    this.n = 42;
    this.f1 = (x:number) => x + this.n;
    this.f2 = function (x:number) { return  x + this.n;};
  }
}

이제 다른 모듈에서 클래스 C를 사용하면 다음과 같이 어떻게 되는지 살펴보겠습니다.

let o = { f1: new C().f1, f2: new C().f2, n: "foo" };
let n1: number = o.f1(1); // n1 = 43
console.log(n1 === 43); // true
let n2: number = o.f2(1); // n2 = "1foo"
console.log(n2 === "1foo"); // true, not a string!

보시다시피 타입 체커는 여기서 실패했습니다.f2는 번호를 반환해야 하는데 문자열을 반환했습니다.

게다가 f2의 "this"는 f2의 인수목록에서 발생하지 않기 때문에 f2에 필요한 유형을 주석으로 추가할 수 없기 때문에 생각할 수 있는 타입 체커는 일반적인 (화살표 이외의) JavaScript 함수를 처리할 수 없는 것으로 보인다.

이 문제는 타입 체커를 사용하지 않는 사람에게도 영향을 미칩니까?그런 것 같아요. 왜냐하면 정적 유형이 없는 경우에도 존재하는 것처럼 생각하기 때문입니다.(첫 번째 파라미터는 숫자, 두 번째 파라미터는 문자열 등).함수의 신체에 사용될 수도 있고 사용하지 않을 수도 있는 숨겨진 "이" 주장은 우리의 정신적 부기를 더 어렵게 만든다.

다음은 Babel이 제작하는 실행 가능한 비타이프 버전입니다.

class C {
    constructor() {
        this.n = 42;
        this.f1 = x => x + this.n;
        this.f2 = function (x) { return x + this.n; };
    }
}

let o = { f1: new C().f1, f2: new C().f2, n: "foo" };
let n1 = o.f1(1); // n1 = 43
console.log(n1 === 43); // true
let n2 = o.f2(1); // n2 = "1foo"
console.log(n2 === "1foo"); // true, not a string!

로컬에 할 수 있는 는, 항상 기능을 합니다.this화살표 함수는 자체 this, 인수, super 또는 new.target을 바인딩하지 않기 때문에 필요하지 않습니다.

화살표 기능 또는 람다 기능은 ES 6에서 도입되었습니다.최소한의 구문에서 우아함을 제외하고, 가장 주목할 만한 기능적 차이는 범위 지정입니다. this 함수 내

정규 함수 표현에서는this키워드는, 호출된 콘텍스트에 근거해 다른 값에 바인드 됩니다.

화살표 기능에서는this사전적으로 묶여있기 때문에this화살표 함수가 정의된 범위(상위-하위-하위)에서 시작되며, 어디서 어떻게 호출/호출되든 변경되지 않습니다.

오브젝트에 대한 메서드로서의 화살표 기능의 제한

// this = global Window
let objA = {
  id: 10,
  name: "Simar",
  print () { // same as print: function()
    console.log(`[${this.id} -> ${this.name}]`);
  }
}

objA.print(); // logs: [10 -> Simar]

objA = {
  id: 10,
  name: "Simar",
  print: () => {
    // Closes over this lexically (global Window)
    console.log(`[${this.id} -> ${this.name}]`);
  }
};

objA.print(); // logs: [undefined -> undefined]

objA.print() 때print() " "를 "function , , , , , , , , 하여 효과가 있습니다.thisobjA호출의 , 단, 되어 있는 했습니다.=>기능.그 이유는this( 「Method」, 「Method」, 「Method」).objA에누리하다

화살표, 단, 살, 살의 경우,this에 this 경우는 글로벌가되어 있는 이 경우는 /윈도)로, 에, (이 경우는, 「」의 유지됩니다.objA.

오브젝트의 메서드에서 화살표 함수의 장점은 일반 함수에 비해 다음과 같습니다.this는 정의 시 고정되고 바인딩될 것으로 예상됩니다.

/* this = global | Window (enclosing scope) */

let objB = {
  id: 20,
  name: "Paul",
  print () { // Same as print: function()
    setTimeout( function() {
      // Invoked async, not bound to objB
      console.log(`[${this.id} -> ${this.name}]`);
    }, 1)
  }
};

objB.print(); // Logs: [undefined -> undefined]'

objB = {
  id: 20,
  name: "Paul",
  print () { // Same as print: function()
    setTimeout( () => {
      // Closes over bind to this from objB.print()
      console.log(`[${this.id} -> ${this.name}]`);
    }, 1)
  }
};

objB.print(); // Logs: [20 -> Paul]

objB.print()서, 「」는print()는 "Method"를 됩니다.console.log(id} -> {this.name}][${this.id} -> {this.name}])한다.setTimeout,this objB화살표 함수가 콜백으로 사용되었지만 콜백이 일반 함수로 정의되었을 때 실패했습니다.

가 있기 입니다.=> " "로 전달, " "로 전달setTimeout(()=>..) over , 힘힘 ,this즉 ""의 , ""의 호출"objB.print() 화살표가 되는 것입니다.=> setTimeout(()==>... 묶이다objBthis, 「 」의 호출에 의해, 「 」의 호출이 행해지기 때문입니다.objB.print() thisobjB그 자체입니다.

우리는 쉽게 쉽게 사용할수 있습니다 사용할 수 있다.Function.prototype.bind()정확한 콜백을 올바르게 바인드함으로써 일반 함수로 정의된 콜백을 동작시킨다에 결합해서는 콜백 정칙 함수로 정의되게 만들기 위해서였다.this..

const objB = {
  id: 20,
  name: "Singh",
  print () { // The same as print: function()
    setTimeout( (function() {
      console.log(`[${this.id} -> ${this.name}]`);
    }).bind(this), 1)
  }
}

objB.print() // logs: [20 -> Singh]

하지만, 화살표 기능이 편리하고 async call-backs의 경우에 있는 오류를 덜 일으키는 경향이 우리가 단도 알다시피, 화살표 함수는 편리하며 비동기 콜백의 경우 에러 발생률이 낮습니다 온다.this이 기능 정의의 시간에서 이루어져야 한다.취득한 함수의 정의 시점 및 바인드해야 하는 함수의 정의 시점.

Arrow-Functions이 화살표기능의 제한의 제한 값:this변경 필요 invocations호출에 따라를 가로질러 바꿀 필요가 있다.

언제든지, 우리가 언제든지,우리는그 기능이 필요합니단 기능이 필요하다.this호출의 시간에서가 바뀔 수 있을까, 우리는 화살표 기능을 사용할 수 없다.호출 시 변경할 수 있으며 화살표 기능은 사용할 수 없습니다.

/* this = global | Window (enclosing scope) */

function print() {
  console.log(`[${this.id} -> {this.name}]`);
}

const obj1 = {
  id: 10,
  name: "Simar",
  print // The same as print: print
};

obj.print(); // Logs: [10 -> Simar]

const obj2 = {
  id: 20,
  name: "Paul",
};

printObj2 = obj2.bind(obj2);
printObj2(); // Logs: [20 -> Paul]
print.call(obj2); // logs: [20 -> Paul]

이 위의 아무도 화살 기능 위의 어느 것도 화살표 기능과 함께 작동하지 않습니다와 협력할 것이다.const print = () => { console.log(-LSB-달러{this.id}->,{this.name}][${this.id}->,{this.name}].);}~하듯이로this있으면서변경할 수에에 구속될 것이다 계속 없으며 마련이 바뀔 수는 없다.this은 바깥쪽 범위 중이(글로벌 / 창호)정의되었다.(글로벌/창구).

예에서는서로 오브젝트로 했습니다.obj1 ★★★★★★★★★★★★★★★★★」obj2다)의 를 잇고 .print()함수가 선언되었습니다.

이것들은 조작된 예들이지만, 좀 더 실제의 예들에 대해 생각해 봅시다. 한다면reduce()에서 방식arrays람다라고 수 . 라고 유추해야 왜냐하면 그것은 유추할 필요가 있기 때문이다.this호출 컨텍스트(즉, 호출된 배열)로부터 액세스 할 수 있습니다.

따라서 생성자 함수는 화살표 함수로 정의할 수 없습니다.this선언 시 생성자 함수를 설정할 수 없습니다. the the every every every every every 。new키워드를 지정하면 새로운 오브젝트가 생성되어 특정 호출에 바인드됩니다.

프레임워크 이 나중에 컨텍스트에서 함수를 this 수 .this호출할 때마다 변경해야 할 수 있습니다.이 상황은 일반적으로 DOM 이벤트핸들러에서 발생합니다.

'use strict'
var button = document.getElementById('button');

button.addEventListener('click', function {
  // web-api invokes with this bound to current-target in DOM
  this.classList.toggle('on');
});

var button = document.getElementById('button');

button.addEventListener('click', () => {
  // TypeError; 'use strict' -> no global this
  this.classList.toggle('on');
});

이는 Angular 2+ 및 Vue.js와 같은 프레임워크에서 템플릿 컴포넌트 바인딩 방식이 다음과 같은 일반 함수/메서드가 될 것으로 예상하는 이유이기도 합니다.this이러한 호출은 바인딩 함수의 프레임워크에 의해 관리됩니다(Angular는 뷰 템플릿바인딩 함수의 호출을 위한 비동기 컨텍스트를 관리하기 위해 Zone.js를 사용합니다).

한편, React에서는 예를 들어 컴포넌트의 메서드를 이벤트 핸들러로 전달하고 싶을 때,<input onChange={this.handleOnchange} /> 그럼 을 해 볼까요?handleOnchanage = (event)=> {this.props.onInputChange(event.target.value);}모든 호출에 대해 화살표 기능으로 사용됩니다.렌더링된 DOM 요소에 대해 JSX를 생성한 컴포넌트의 인스턴스와 동일한 인스턴스가 되어야 합니다.

이 기사는 내 중간 출판물에서도 볼 수 있습니다.기사가 마음에 드시거나 의견이나 제안이 있으시면 미디엄에 박수를 치거나 댓글을 남겨주세요.

간단하게 말하면

var a = 20; function a() {this.a = 10; console.log(a);}
//20, since the context here is window.

또 다른 인스턴스:

var a = 20;
function ex(){
    this.a = 10;
    function inner(){
        console.log(this.a); // Can you guess the output of this line?
    }
    inner();
}
var test = new ex();

ANS: 으으 ans 20달러입니다.

되기 때문입니다이 생성되어 있습니다.이 예에서는ex 함수는 이 함수로 됩니다.new또, 콘텍스트가 작성되면,inner되면 JavaScript는 하여 JavaScript를 합니다.innerglobal context하지만 로컬 전후 관계 있다.로컬 콘텍스트가 있습니다만,

그래서, 우리가 그래서고 싶어,만약 우리가.inner기능은로컬컨텍스트를 갖는 기능 로컬 전후 관계, 즉에 없다.ex, 그 다음 우리는 내부 기능 컨텍스트를 묶어야 한다.그 후 콘텍스트를 내부 함수에 바인드해야 합니다.

화살 이 문제를 푼다.화살표는이 문제를 해결합니다.대신에그 대신고Global context그들은 、을 。local context만약 어떤 존재합니다.존재하는은*given 예에서 경우, *표시된 예에서는 다음 작업이 필요합니다가 걸릴 것이다.new ex()~하듯이로this..

따라서 바인딩이 명시적인 모든 경우 기본적으로 화살표를 사용하여 문제를 해결합니다.

언급URL : https://stackoverflow.com/questions/22939130/when-should-i-use-arrow-functions-in-ecmascript-6

반응형
저작자표시 (새창열림)

'itsource' 카테고리의 다른 글

내부 교체 방법jQuery를 사용하는 div의 HTML?  (0) 2022.10.15
jQuery의 현재 날짜를 얻는 방법  (2) 2022.10.15
segfault 커널 로그 메시지를 읽는 방법  (1) 2022.10.15
JavaScript에서 날짜 차이를 계산하는 방법은 무엇입니까?  (0) 2022.10.15
ER_NOT_SUpported_AUTH_MODE - MySQL 서버  (1) 2022.10.05

'itsource'의 다른글

  • 현재글ECMAScript 6의 화살표 기능은 언제 사용해야 합니까?

관련글

댓글

티스토리툴바