ES6 객체의 방법 : 화살표 기능 사용

ES6에서는 두 가지 모두 합법적입니다.

var chopper = {
    owner: 'Zed',
    getOwner: function() { return this.owner; }
};

그리고 속기 :

var chopper = {
    owner: 'Zed',
    getOwner() { return this.owner; }
}

새로운 화살표 기능도 사용할 수 있습니까? 같은 시도에서

var chopper = {
    owner: 'John',
    getOwner: () => { return this.owner; }
};

또는

var chopper = {
    owner: 'John',
    getOwner: () => (this.owner)
};

메서드에에 대한 액세스 권한이 없다는 오류 메시지가 표시됩니다 this. 이것은 단지 구문 문제입니까, 아니면 ES6 객체 내에서 fat-pipe 메서드를 사용할 수 없습니까?

Arrow 함수는 모든 상황에서 단순히 구식 함수의 짧은 버전으로 사용되도록 설계되지 않았습니다. function키워드를 사용하는 함수 구문을 대체하기위한 것이 아닙니다 . 화살표 함수의 가장 일반적인 사용 사례는 재정의하지 않는 짧은 '람다'로 this, 함수를 일부 함수에 대한 콜백으로 전달할 때 자주 사용됩니다.

화살표 함수는 this어휘 적으로 둘러싸는 컨텍스트에서 닫히기 때문에 화살표 함수를 사용하여 개체 메서드를 작성할 수 없습니다 this. 즉,

// Whatever `this` is here...
var chopper = {
    owner: 'Zed',
    getOwner: () => {
        return this.owner;    // ...is what `this` is here.
    }
};

귀하의 경우 객체에 대한 메소드를 작성하려면 기존 function구문 또는 ES6에 도입 된 메소드 구문을 사용해야 합니다.

var chopper = {
    owner: 'Zed',
    getOwner: function() {
        return this.owner;
    }
};

// or

var chopper = {
    owner: 'Zed',
    getOwner() {
        return this.owner;
    }
};

(그들 사이에는 작은 차이가 있지만 super에서 사용 getOwner하거나 사용하지 않는 경우 또는 getOwner다른 개체에 복사 하는 경우 에만 중요 합니다.)

es6 메일 링리스트에서 유사한 구문을 가지고 있지만 그들 자신을 가진 화살표 함수에 대한 트위스트에 대한 논쟁이있었습니다 this. 그러나이 제안은 단순한 구문 설탕이기 때문에 사람들이 몇 개의 문자를 입력하는 것을 절약 할 수 있고 기존 함수 구문보다 새로운 기능을 제공하지 않기 때문에 제대로 받아 들여지지 않았습니다. 바인딩 해제 된 화살표 기능 항목을 참조하십시오 .

이 줄 getOwner: => (this.owner)은 다음과 같아야합니다.

var chopper = {
    owner: 'John',
    getOwner: () => this.owner
}; //here `this` refers to `window` object.

this함수 로 선언해야 합니다.

var chopper = {
    owner: 'John',
    getOwner() { return this.owner }
};

또는:

var chopperFn = function(){

    this.setOwner = (name) => this.owner = name;
    Object.assign(this,{
        owner: 'Jhon',
        getOwner: () => this.owner,
    })

}

var chopper = new chopperFn();
console.log(chopper.getOwner());
chopper.setOwner('Spiderman');
console.log(chopper.getOwner());

화살표 기능을 사용하기 위해 따르는 간단한 팁입니다.

• object.method()구문을 사용할 메서드에는 화살표가 아닌 함수를 사용하십시오 . ( this이는 호출자로부터 의미있는 값을 받을 함수입니다 .)
• 거의 모든 것에 화살표 기능을 사용하십시오.

이 내부 화살표 기능은 객체의 컨텍스트를 반영하지 않습니다. 대신 개체 메서드가 호출되는 컨텍스트를 제공합니다.

이것을 확인하십시오. 이것은 화살표를 사용할 때와 사용하지 않을 때에 대한 통찰력을 제공합니다. https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/

당신이 사용 화살표 기능이있는 경우, 당신은 변경할 수 있습니다 this에 chopper,

var chopper = {
  owner: "John",
  getOwner: () => chopper.owner
};

이것이 모범 사례는 아니지만 개체 이름을 변경할 때이 화살표 기능을 변경해야합니다.

엄격 모드의 또 다른 팁 this은 여전히 ​​정의되지 않은 대신 창을 참조합니다.

  (() => {
    "use strict";
    console.log(this); // window
  })();

  (function () {
    "use strict";
    console.log(this); // undefined
  })();