วิธีการในวัตถุ 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 ได้หรือไม่?

ฟังก์ชั่น Arrow ไม่ได้ออกแบบมาเพื่อใช้ในทุกสถานการณ์เพียง แต่เป็นฟังก์ชันที่ล้าสมัยในเวอร์ชันที่สั้นกว่าเท่านั้น ไม่ได้มีวัตถุประสงค์เพื่อแทนที่ไวยากรณ์ของฟังก์ชันโดยใช้functionคีย์เวิร์ด กรณีการใช้งานที่พบบ่อยที่สุดสำหรับฟังก์ชันลูกศรคือ "lambdas" สั้น ๆ ซึ่งไม่ได้กำหนดนิยามใหม่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ยังคงอ้างถึง Window แทนที่จะไม่ได้กำหนด

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

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