جاوااسکریپت - متد کلاس async و TypeScript - چرا دسترسی به ویژگی کلاس وجود ندارد؟


با توجه به یک کلاس ساده تایپاسکریپت:

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return "Hello, " + this.greeting;
  }

  thisworks(input) {
    console.log("I am " + input) ;
  }

  doesNotWork(input) {
    return "Hi " + this.greeting +". I am " + input;
  }   
}

یک آرایه:

let myArray = ["Joe","William","Jack","Averell"];

و یک تابع:

let myFunction = (name) => {
  let obj = new Greeter(name);
  console.log(obj.greet());
};

من میتوانم آرایه را نگاشت کنم و تابع را برای هر مقدار اجرا کنم:

async.map(
  myArray,
  myFunction
);

یا میتوانم آرایه را نگاشت کنم و یک متد کلاس را با هر مقدار اجرا کنم:

let myInput = new Greeter("John");

async.map(
  myArray,
  myInput.thisworks
);

اما نمیتوانم آرایه را نگاشت کنم، هر مقدار را به یک متد کلاس ارسال کنم و همزمان به ویژگی کلاس دسترسی داشته باشم:

let myInput = new Greeter("Bill");

async.map(
  myArray,
  myInput.doesNotWork
);

کسی میتواند لطفاً توضیح دهد چرا آخرین مثال کار نمیکند؟ و چگونه میتوان آن را کارکرد کرد؟

من انتظار داشتم نتیجه با آخرین مثال این باشد:

Hi Bill. I am Joe
Hi Bill. I am William
Hi Bill. I am Jack
Hi Bill. I am Averell

در عوض، خطای زیر را دریافت میکنم:

Uncaught TypeError: Cannot read property 'greeting' of undefined

در اینجا یک پرسش مرتبط با این سوال وجود دارد

پاسخ شماره ۱

این یک مشکل با this لغوی است.

راه حل این است که مطمئن شوید this را هنگام ایجاد تابع یا هنگام فراخوانی تابع به آن متصل میکنید.

زمانی که تابع ایجاد میشود، this را متصل کنید

class Greeter {
    greeting: string;

    constructor(message: string) {
      this.greeting = message;
    }

    doesNotWork = (input) => {
      console.log("Hi " + this.greeting +". I am " + input);
    }

}

یا

پیوند دادن this در محل فراخوانی

let myInput = new Greeter("Bill");
async.map(
    myArray,
    myInput.doesNotWork.bind(myInput)
);