ES6 nesnelerindeki yöntemler: ok işlevlerini kullanma

ES6'da bunların ikisi de yasaldır:

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

ve kısaca:

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

Yeni ok işlevlerini de kullanmak mümkün mü? Gibi bir şey denerken

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

veya

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

Yöntemin erişiminin olmadığını gösteren bir hata mesajı alıyorum this. Bu sadece bir sözdizimi sorunu mu yoksa ES6 nesnelerinin içinde yağ borusu yöntemlerini kullanamaz mısınız?

Ok işlevleri, her durumda yalnızca eski moda işlevlerin daha kısa bir versiyonu olarak kullanılmak üzere tasarlanmamıştır. functionAnahtar kelimeyi kullanarak işlev sözdizimini değiştirmeleri amaçlanmamıştır . Ok işlevlerinin en yaygın kullanım durumu, yeniden tanımlamayan kısa "lambdalar" dır ve thisgenellikle bir işlevi bazı işleve geri çağrı olarak iletirken kullanılır.

Ok fonksiyonları nesne yöntemlerini yazmak için kullanılamaz, çünkü bulduğunuz gibi, ok işlevleri thissözcüksel olarak çevreleyen bağlamın üzerine yakın olduğundan, ok thisiçindeki, nesneyi tanımladığınız yerde geçerli olandır. Söylenmek istenen:

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

Sizin durumunuzda, bir nesneye bir yöntem yazmak istiyorsanız, yalnızca geleneksel functionsözdizimini veya ES6'da tanıtılan yöntem sözdizimini kullanmalısınız:

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

// or

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

(Aralarında küçük farklar vardır, ancak bunlar yalnızca superiçinde kullanırsanız getOwner, kullanmıyorsanız veya getOwnerbaşka bir nesneye kopyalarsanız önemlidir .)

Es6 posta listesinde, benzer sözdizimine sahip ancak kendilerine ait olan ok işlevlerinde bir bükülme hakkında bazı tartışmalar vardı this. Bununla birlikte, bu öneri zayıf bir şekilde alındı ​​çünkü bu sadece sözdizimi şekeri, insanların birkaç karakter yazarak kaydetmelerine izin veriyor ve mevcut işlev sözdizimi üzerinde yeni işlevler sağlamıyor. Sınırsız ok işlevleri konusuna bakın .

Bu satırda getOwner: => (this.owner)şunlar olmalıdır:

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

thisBir işleve şunları bildirmeniz gerekir :

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

Veya:

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());

Ok işlevlerini kullanmak için takip ettiğim hızlı bir ipucu.

• object.method()Sözdizimi kullanacak yöntemler için ok içermeyen işlevleri kullanın. (Bunlar, thisarayan kişiden anlamlı değer alacak işlevlerdir .)
• Hemen hemen her şey için ok işlevini kullanın.

Bu iç ok işlevi, nesnenin bağlamını yansıtmaz. Bunun yerine, nesne yönteminin çağrıldığı bağlamı verir.

Şunu kontrol edin, Bu, okun ne zaman kullanılacağı ve ne zaman kullanılmayacağı konusunda biraz fikir verir. https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/

Eğer kullanım ok işlevine varsa, değiştirebilir thisiçin chopper,

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

Bu en iyi uygulama olmasa da, nesne adını değiştirdiğinizde bu ok işlevini değiştirmeniz gerekir.

Katı modda başka bir ipucu, thistanımsız yerine Pencereye atıfta bulunur.

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

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