با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، در این بخش قصد داریم که شما را با یکی از کلمات کلیدی پر کاربرد در جاوا اسکریپت آشنا کنیم، کلمه ی کلیدی this در جاوا اسکریپت به عنصر یا آبجکتی که توسط جاوا اسکریپت انتخاب شده اشاره دارد. به عنوان مثال زمانیکه در یک تگ یا عنصری که در html قرار دارد می خواهید کدهای جاوا اسکریپت را بنویسید، می توانید از کلمه ی کلیدی this برای انتخاب همان عنصر یا تگ و اعمال تغییرات مورد نظر روی آن استفاده کنید، در ادامه ی این بخش برای آشنایی با کلمه ی کلیدی this در جاوا اسکریپت با ما همراه باشید.
در ادامه ی این مبحث ما شما را با مفاهیم کلمه ی کلیدی this در جاوا اسکریپت آشنا می کنیم.
کلمه ی کلیدی this در جاوا اسکریپت به شیء که به آن تعلق دارد اشاره دارد.
این مقادیر متفاوت است بسته به جایی که از آن استفاده می شود.
در یک متد، این به شی مالک مربوط می شود.
به تنهایی، این به شیء عمومی اشاره دارد.
در یک تابع، این به شیء عمومی اشاره دارد.
در یک تابع، در حالت strict، این تعریف نشده است.
در یک رویداد، این به عنصری که این رویداد را دریافت کرد اشاره دارد.
متد هایی مانند ()call و ()apply می توانند این را به هر شیء ارجاع دهند.
در یک متد شی، this به صاحب این متد اشاره دارد.
در مثال بالا این صفحه، this به شیء شخصی اشاره دارد.
آبجکت شخصی صاحب متد fullName است.
1 2 3 | fullName : function() { return this.firstName + " " + this.lastName; } |
هنگامی که this به تنهایی استفاده می شود، به آبجکت عمومی اشاره دارد.
در یک پنجره ی مرورگر ، آبجکت عمومی [object Window] است:
در حالت strict زمانیکه به تنهایی از this استفاده می کنید، this به آبجکت عمومی [object Window] اشاره دارد.
در تابع جاوا اسکریپت، صاحب تابع به طور پیش فرض برای this ساخته می شود.
بنابراین، در یک تابع، this اشاره به آبجکت عمومی [object Window] دارد.
حالت strict جاوا اسکریپت اجازه اتصال را نمی دهد.
بنابراین، هنگامی که در یک تابع استفاده می شود، در حالت strict، کلمه کلیدی this تعریف نشده است.
در رویدادهای handler در HTML ، کلمه کلیدی this به عنصر HTML اشاره دارد که رویداد را دریافت می کند:
1 2 3 | <button onclick="this.style.display='none'"> Click to Remove Me! </button> |
در این مثال ها this یک آبجکت شخصی است (آبجکت شخصی “صاحب” تابع است).
1 2 3 4 5 6 7 8 | var person = { firstName : "John", lastName : "Doe", id : 5566, myFunction : function() { return this; } }; |
1 2 3 4 5 6 7 8 | var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; |
به عبارتی دیگر this.firstName به معنی خصوصیت firstName از this آبجکت شخصی است.
متدهای ()callو ()apply متدهای از پیش تعریف شده ی جاوا اسکریپت هستند.
آنها هر دو می توانند برای فراخوانی یک آبجکت با آبجکت دیگری به عنوان آرگومان مورد استفاده قرار گیرند.
در این مثال، هنگام فراخوانی person1.fullName با person2 به عنوان آرگومان، this به person2 اشاره می کند، حتی اگر یک متد از person1 باشد:
1 2 3 4 5 6 7 8 9 10 | var person1 = { fullName: function() { return this.firstName + " " + this.lastName; } } var person2 = { firstName:"John", lastName: "Doe", } person1.fullName.call(person2); // Will return "John Doe" |
کلمه ی کلیدی this در جاوا اسکریپت یکی از پرکاربردترین کلمات کلیدی در جاوا اسکریپت می باشد، با استفاده از این کلمه ی کلیدی در زمان اشاره به آبجکت و یا عنصر جاری طول کدها کمتر خواهد بود.
غزاله
سلام وقتتان به خیر
اگر بخواهیم یک گالری تصاویر داشته باشیم..و به همه ی عکس ها یک کلاس خاص بدهیم..و هر عکس را با this فراخوانی کنیم ، بعد از این چطور میتونیم هر عکس را width و height اش را تغییر دهیم؟
امیر
سلام و خسته نباشید.
اگه این موضوع رو از قبل بدونی خوبه یه مروری میشه ولی انقد بد ترجمه شده که برای دفعه اول خیلی جاهاش قابل فهم نیست. مثلا شی Person رو ترجمه کرده به شی شخصی !!!!
پی وی لرن
ممنون از نظر شما بله درست است بعضی از پست های ابتدایی مربوط می شود به نویسندگانی که با این دوره آشنایی نداشته اند که به مرور نویسندگان دیگر جایگزین کردیم این موارد هم در پست مورد نظر اصلاح خواهد گردید.
باتشکر
امیر
توی متن به آبجکت Person در بالای همین صفحه اشاره میکنه ولی اصلا همچین چیزی نیست