ProGraphs

به کد زیر دقت کنید: let obj = { whatIsThis: () => { console.log("this is:", this); } }; در این کد، متد whatIsThis داخل آبجکت obj تعریف شده است. اما با توجه به اینکه arrow functionها در جاوااسکریپت this ندارند، مقدار this داخل این تابع به آبجکت گلوبال…

جواب:

قبل جواب دادن به این سوال، بیاید ببینیم فیلدهای کلاس، بعد از transpile شدن چه شکلی می‌شوند:
برای این کار یه کلاس ساده با دو تا فیلد counter و handleClick تعریف می‌کنیم. خروجی ساده شده‌ی babel با presetهای ES2017 و stage-3 رو تو کد زیر می‌بینید:

class Button {
    constructor() {
        this.counter = 0;

        this.handleClick = () => {
            console.log("this is: ", this);
        };
    }
}

همینطور که می‌بینید،‌ فیلد‌های کلاس به داخل constructor منتقل شدند. حتی فیلد handleClick که با arrow function تعریف کردیم.
از این کد واضحه که متدهای کامپوننت که با arrow functionها تعریف می‌کنیم، در واقع به داخل constructor منتقل میشن.

همچنین جالبه بدونید که arrow functionها this ندارند. یعنی مقدار this داخل یه arrow function مثل یه متغیر معمولی تعیین می‌شه. به این صورت که انجین جاوااسکریپت اول داخل خود تابع دنبال identifierی به اسم this می‌گرده و وقتی پیداش نکرد، مقدار this توی تابع بیرونی رو پیدا میکنه (در نتیجه مقدار this داخل arrow functionها برابر مقدار this بیرون از اون‌هاست).

پس مقدار this داخل این arrow functionها برابر مقدار this داخل constructor خواهد بود.

از طرفی شاید بپرسید زمانی که ما متد handleClick رو صدا می‌کنیم، اجرا شدن constructor تموم شده. پس چطور همچنان arrow function به مقدار this داخل constructor دسترسی داره؟
برای فهمیدن این موضوع باید با مفهوم closure آشنا باشیم. در واقع تا زمانی که به تابع handleClick یک reference داشته باشیم، انجین جاوااسکریپت scope تابع constructor رو از memory پاک نمیکنه!
بنابراین تابع handleClick به مقدار this داخل constructor دسترسی داره. حتی با اینکه زمانی که این تابع رو صدا می‌کنیم، اجرا شدن ‌constructor تموم شده!

Twitter

getify

"Arrow functions are bound to their parent's context." Nope, inaccurate. Arrow functions do not have a `this`, which means any usage of `this` inside an arrow function is just like any other variable, and is looked up lexically through parent scopes until…

676 views16:53