ค้นหาเว็บไซต์

javascript - ES6 getter/เมธอดโดยไม่ใช้วงเล็บเคอร์ลี่


ฉันมีคลาสบางคลาสซึ่งประกอบด้วยตัวดึง/เมธอดสั้น ๆ หลายตัว

ตัวอย่าง :

get jQuery() {
  return this.pageConfig.jQuery || jQuery;
}

ฟังก์ชันลูกศรที่มีเนื้อหาคล้ายกันสามารถเขียนได้ดังนี้:

() => this.pageConfig.jQuery || jQuery;

ซึ่งเป็นบรรทัดเดียวและดังนั้นจึงใช้พื้นที่แนวตั้งเพียง 1/3

แต่มันไม่ใช่ getter หรือเมธอด

มีวิธีแนะนำในการเขียน getter/เมธอดในรูปแบบบรรทัดเดียวหรือไม่? (ถ้าเป็นไปได้โดยไม่ใช้วงเล็บปีกกาและไม่ใช้คีย์เวิร์ด return)

Getter และเมธอดของฉันไม่จำเป็นต้องปรับเปลี่ยนวัตถุ พวกมันเพียงแค่ทำการอ่าน

คำตอบ #1

สำหรับประโยคสั้น ๆ ให้ใช้แบบนี้:

get jQuery() {return this.pageConfig.jQuery || jQuery;}

ฟังก์ชันลูกศรไม่เหมาะสำหรับการกำหนดวิธีการเพราะพวกมันใช้ this แบบเล็กซิคอล ในขณะที่วิธีการต้องการ this ของวัตถุ จำไว้ว่าขณะที่ฟังก์ชันลูกศรเป็นทางลัดที่ดี แต่ก็ส่งผลต่อค่าของ this ในลักษณะที่มักไม่เข้ากันกับการกำหนดวิธีการ

คำตอบ #2

ไม่ ไม่มีอะไรสั้นกว่านี้ (คุณสามารถข้าม ; ได้)

get jQuery() { return this.pageConfig.jQuery || jQuery }

อธิบายเพิ่มอีกหน่อย

คุณไม่สามารถใช้ฟังก์ชันลูกศร (() => this.pageConfig.jQuery || jQuery) ได้ เพราะอย่างแรกมันไม่ใช่ฟังก์ชัน getter และ this ไม่อ้างอิงไปที่บริบทของวัตถุ แต่ไปยังบริบทของการทำงาน (ซึ่งอาจเป็นวัตถุแต่ก็ไม่จำเป็นต้องเป็น).

มี/เคยมีฟังก์ชัน __defineGetter__ (เอกสารบางส่วน) ที่อนุญาตให้คุณกำหนด getter ได้ ตอนนี้มันถูกยกเลิกแล้วและอาจซับซ้อนกว่าฟังก์ชัน get แต่ตามที่เอกสารกล่าว มันถูกใช้กันอย่างแพร่หลายและน่าจะไม่มีวันถูกลบออก

โชคดีสำหรับคุณ: ฉันสนับสนุนทุกวิธีแก้ปัญหาแบบบ้าๆ

class Test {
  
  constructor() {
    this.pageConfig = {}
    this.pageConfig.jQuery = "value"
    
    let properties = {
      'jQuery': () => this.pageConfig.jQuery || "Default",
      'text': () => this.pageConfig.text || "Default"
    }
    for(let prop in properties) this.__defineGetter__(prop, properties[prop])
    
  }
  
}

let t = new Test
console.log(t.jQuery)
console.log(t.text)

มีความสุขกับการเขียนบรรทัดเดียว (แต่จริง ๆ แล้วแค่ใช้ get จาก ECMA 5)

บทความที่เกี่ยวข้อง