Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Funksiyalarda this

ULASHISH

this nima?

this kalit so‘zi funksiyada ishlatilsa, u obyektga ishora qiladi.

Qaysi obyekt ekanligi funksiya yozilayotganda aniqlanmaydi.

this qiymati funksiya chaqirilganda aniqlanadi.

Ushbu bobda ilg‘or mavzu mavjud.

Davom etishdan oldin JavaScript funksiyalarining asoslarini tushunganingizga ishonch hosil qiling.

JavaScript funksiyalari darsligi

Funksiyalar — obyekt metodlari

Barcha JavaScript funksiyalari obyekt metodlaridir.

Funksiya quyidagicha bo‘lishi mumkin:

  • JavaScript obyektining metodi
  • Global obyektning metodi

Obyekt metodida this

Funksiya obyekt metodi bo‘lganda:

this metodga egalik qiluvchi obyektga ishora qiladi.

Misol

3 ta xususiyatga ega obyekt: firstName, lastName, fullName.

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

person.fullName();
O‘zingiz sinab ko‘ring »

Yuqoridagi misolda this person obyektiga ishora qiladi.

this.firstName personning firstName xususiyatini bildiradi.

this.firstName person.firstName bilan bir xil.

Funksiyadagi this (standart holatda)

Standart holatda this oddiy funksiyada ishlatilsa, this global obyektga ishora qiladi.

Brauzer oynasida global obyekt [object Window]:

Misol

function myFunction() {
  return this;
}
O‘zingiz sinab ko‘ring »
Yuqoridagi misolda this — global obyekt.

Funksiyadagi this (strict rejimda)

JavaScript Qat’iy rejim (Strict Mode) standart bog‘lashga (default binding) ruxsat bermaydi.

Strict rejimda funksiya ichida ishlatilgan this undefined bo‘ladi.

Misol

"use strict";
function myFunction() {
  return this;
}
O‘zingiz sinab ko‘ring »
Yuqoridagi misolda this — undefined.

Alohida this

Funksiyadan tashqarida ishlatilganda this har doim global obyektga ishora qiladi.

Brauzer oynasida global obyekt [object Window]:

Misol

let x = this;
O‘zingiz sinab ko‘ring »

Qat’iy rejimdagi oddiy funksiyada, funksiyadan tashqarida ishlatilganda ham this global obyektga ishora qiladi:

Misol

"use strict";
let x = this;
O‘zingiz sinab ko‘ring »

Yuqoridagi ikkala misolda ham this — global obyekt.

Buning sababi — this global ko‘rinish sohasida (global scope) joylashgan.

JavaScript globalThis

JavaScript-da globalThis - bu brauzer, Node.js, Web Worker yoki boshqa JS runtime bo‘ladimi, kodingiz ishlaydigan muhitdan qat’i nazar, global obyektga murojaat qilishning standart usulini ta’minlaydigan maxsus o‘rnatilgan obyekt.

Global obyekt JavaScript muhitidagi yuqori darajadagi obyektdir:

  • Brauzerlarda bu window.
  • Node.js’da bu global.
  • Web Worker’larda bu self.

Ilgari har bir muhit ushbu obyekt uchun o‘z nomiga ega edi. Bu hamma joyda ishlashga mo‘ljallangan kod uchun moslik muammolariga olib keldi.

globalThis bu muammoni hal qilish uchun ECMAScript 2020 (ES11) da joriy qilingan. U muhitdan qat’i nazar, global obyektga yagona havoladir.

Misol

globalThis === window; // true in browsers
globalThis === global; // true in Node.js
O‘zingiz sinab ko‘ring »

Hodisa ishlovchilarida (event handlers) this

HTML hodisa ishlovchilarida this hodisani qabul qilgan HTML elementiga ishora qiladi:

Misollar

<button onclick="this.innerHTML='Clicked!'">Click Me</button>
O‘zingiz sinab ko‘ring »
<button onclick="this.style.display='none'">
  Click to Remove Me!
</button>
O‘zingiz sinab ko‘ring »

Arrow funksiyalarida this

Arrow funksiyalarining o‘z this qiymati yo‘q. Ular this’ni o‘rab turgan doiradan meros qilib oladi.

Oddiy funksiyalarda this kalit so‘zi funksiyani chaqirgan obyektni ifodalaydi; bu window, document, tugma yoki boshqa narsa bo‘lishi mumkin.

Arrow funksiyalarida this kalit so‘zi har doim arrow funksiyasini aniqlagan obyektni ifodalaydi.

this nima?

JavaScript-da this kalit so‘zi obyektga ishora qiladi.

this kalit so‘zi ishlatilish o‘rniga qarab turli obyektlarni bildiradi:

Alohida holatda this global obyektni (brauzerda window) bildiradi.
Oddiy funksiyada this global obyektni bildiradi.
Strict mode rejimida Function ichida this qiymati undefined bo‘ladi.
Object metodida this ushbu obyektning o‘zini bildiradi.
Hodisada (event) this hodisani qabul qilgan elementni bildiradi.
call(), apply() va bind() kabi metodlarda this har qanday obyektga murojaat qilishi mumkin.

this o‘zgaruvchi emas.

this — kalit so‘z.

Siz this qiymatini o‘zgartira olmaysiz.

this ustuvorligi

this qaysi obyektga tegishli ekanligini aniqlash uchun quyidagi tartib ustuvorligidan foydalaning:

TartibobyektSabab
1bind() this bind() yordamida chaqirilayotgan funksiya ichida
2apply() this apply() yordamida chaqirilayotgan funksiya ichida
2call() this call() yordamida chaqirilayotgan funksiya ichida
3Obyekt metodi this obyekt funksiyasi (metod) ichida
4Global ko‘rinish sohasi (global scope) this global ko‘rinish sohasidagi funksiyada

Tushunish uchun misollar

Quyida bir xil metodni ikki marta chaqiradigan ikkita misol keltirilgan:

  • Sahifa yuklanganda
  • Foydalanuvchi tugmani bosganda

Birinchi misolda oddiy funksiya, ikkinchi misolda esa arrow funksiyasi qo‘llaniladi.

Natija shuni ko‘rsatadiki, birinchi misol ikki xil obyektni (window va button), ikkinchi misol esa window obyektini ikki marta qaytaradi, chunki window obyekti funksiyaning "egasi" hisoblanadi.

Misollar

Oddiy funksiyada this funksiyani chaqirgan obyektni ifodalaydi:

// Regular Function:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}

// The window object calls the function:
window.addEventListener("load", hello);

// A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

O‘zingiz sinab ko‘ring »

Arrow funksiyasida this funksiya egasini ifodalaydi:

// Arrow Function:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}

// The window object calls the function:
window.addEventListener("load", hello);

// A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

O‘zingiz sinab ko‘ring »

Metodlardagi arrow funksiyalar

Arrow funksiyalarida this bog‘lanmaydi (binding yo‘q).

Ular Object metodlarini aniqlash uchun unchalik mos emas.

Misol

const person = {
  firstName: "John",
  sayHello: () => {
    return this.firstName;
  }
};

person.sayHello();
O‘zingiz sinab ko‘ring »
Yuqoridagi misol kutilganidek ishlamaydi, chunki this person obyektiga ishora qilmaydi.

Arrow funksiyalari metodlar ichida bir xil this qiymatini saqlab qolmoqchi bo‘lganingizda foydali bo‘lishi mumkin.

Misol

const person = {
  firstName: "John",
  sayHello: function() {
    return () => this.firstName;
  }
};

let hello = person.sayHello();
hello();

Test

Obyekt metodi ichida this nimaga ishora qiladi?

Umumiy xatolar

  • Obyekt metodlari sifatida arrow funksiyalar

    Arrow functions do not bind their own bu.
  • this obyektga ishora qiladi deb hisoblash: this qiymati funksiya qanday chaqirilishiga bog‘liq.

  • Qat’iy rejim (strict mode) xatti-harakatini unutish

    In strict mode, bu can be Aniqlanmagan.

Keyingi qadam nima?

Endi siz this qanday ishlashini tabiiy ravishda tushunasiz.

Uni qo‘lda boshqarishni o‘rganishga tayyormisiz?

JavaScript call() funksiyasi

JavaScript apply() funksiyasi

JavaScript bind() funksiyasi

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish