ສິ່ງຄົນ this

ບົດສະຫຼຸບ

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

ທ້າທາຍພິຈາລະນາ

ມັນ this ແມ່ນຫຍັງ?

JavaScript this ຄຳສັ່ງຄົນມັນຈະຈະປະກອບທີ່ມັນກຳລັງພົວພັນ.

ມັນມີຄຸນຄ່າທີ່ຕ່າງກັນ ສະນັ້ນຈະຕິດຕາມການໃຊ້:

  • ໃນການຫົວຫຼັງ:this ມັນແມ່ນອົງປະກອບເປັນເຈົ້າ.
  • ພຽງຢ່າງດຽວ:this ມັນແມ່ນອົງປະກອບໂລກ.
  • ໃນການປະຕິບັດວິທີສະເໜີ:this ມັນແມ່ນອົງປະກອບໂລກ.
  • ໃນການປະຕິບັດວິທີສະເໜີ:this undefined.
  • ໃນການເຫດການ:this ມັນແມ່ນປະກອບທີ່ຮັບການເຫດການ.

ຄື call() ແລະ apply() ການຫົວຫຼັງທີ່ສາມາດຫົວຫຼັງ this ໃຫ້ກັບອົງປະກອບໃດກໍ່ໄດ້.

this ໃນການຫົວຫຼັງ:

ໃນການຫົວຫຼັງອົງປະກອບ:this ມັນແມ່ນ "ເຈົ້າ"ຂອງການສະເໜີຂອງການສະເໜີນີ້:

ໃນກໍລະນີນີ້:this ມັນແມ່ນ person ອົງປະກອບ.

person ອົງປະກອບແມ່ນ "ເຈົ້າ"ຂອງການສະເໜີ fullName:

fullName : function() {
  return this.firstName + " " + this.lastName;
}

ທ້າທາຍພິຈາລະນາ

this ພຽງຢ່າງດຽວ

ໃນການປະຕິບັດວິທີສະເໜີພຽງຢ່າງດຽວ ૻວຫຼັງແມ່ນອົງປະກອບໂລກ: this ມັນແມ່ນອົງປະກອບໂລກ.

ມັນແມ່ນອົງປະກອບໂລກ. [object Window]ໃນການປະຕິບັດວິທີສະເໜີທີ່ປະຕິບັດວິທີສະເໜີພຽງຢ່າງດຽວ ຫົວຫຼັງແມ່ນ:

ບົດສະຫຼຸບ

:

ທ້າທາຍພິຈາລະນາ

ໃນສາທາລະນະບານບຸກຄົນ ຫົວຫຼັງແມ່ນ: this ມັນແມ່ນອົງປະກອບໂລກ. [object Window]ໃນການປະຕິບັດວິທີສະເໜີທີ່ປະຕິບັດວິທີສະເໜີພຽງຢ່າງດຽວ ຫົວຫຼັງແມ່ນ:

ບົດສະຫຼຸບ

"use strict";
:

ທ້າທາຍພິຈາລະນາ

this ໃນການປະຕິບັດວິທີສະເໜີ (ທີ່ປະຕິບັດວິທີສະເໜີ):

ການປະຕິບັດວິທີສະເໜີອົງປະກອບໃນການສະເໜີ JavaScript ແມ່ນຫົວຫຼັງມະນຸດລະບຸໄດ້. this.

ຍ້ອນນັ້ນ ໃນການໃຊ້ພວກມັນໃນການສະເໜີ ໃນການປະຕິບັດ ທີ່ປະຕິບັດວິທີສະເໜີ:this ມັນແມ່ນອົງປະກອບໂລກ. [object Window].

ບົດສະຫຼຸບ

function myFunction() {
  return this;
}

ທ້າທາຍພິຈາລະນາ

this ໃນການປະຕິບັດວິທີສະເໜີ (ທີ່ປະຕິບັດວິທີສະເໜີ):

ການປະຕິບັດວິທີສະເໜີ JavaScript ທີ່ປະຕິບັດວິທີສະເໜີບໍ່ອະນຸຍາດການຫົວຫຼັງມັນເປັນມະນຸດ.

ຍ້ອນນັ້ນ ໃນການໃຊ້ພວກມັນໃນການສະເໜີ ໃນການປະຕິບັດ ທີ່ປະຕິບັດວິທີການຂັ້ນວິທີສະເໜີ:this ມັນ undefined (undefined})

ບົດສະຫຼຸບ

"use strict";
function myFunction() {
  return this;
}

ທ້າທາຍພິຈາລະນາ

this ໃນເຫດການຈັດການ:

ໃນການຈັດການເຫດການ HTML:this ມັນແມ່ນປະກອບ HTML ທີ່ຮັບການເຫດການ:

ບົດສະຫຼຸບ

<button onclick="this.style.display='none'">
  ການຄັດຄິດມາລົບຂ້າພະເຈົ້າ!
</button>

ທ້າທາຍພິຈາລະນາ

ການຫົວຫຼັງອົງປະກອບ

ໃນກໍລະນີນີ້:this ມັນ person ອົງປະກອບ (person ອົງປະກອບແມ່ນ "ເປັນເຈົ້າ"ຂອງການສະເໜີ):

ບົດສະຫຼຸບ

var person = {
  firstName  : "Bill",
  lastName   : "Gates",
  id         : 678,
  myFunction : function() {
    return this;
  }
};

ທ້າທາຍພິຈາລະນາ

ບົດສະຫຼຸບ

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

ທ້າທາຍພິຈາລະນາ

ກໍ່ວ່າthis.firstName ມີຄວາມໝາຍວ່າ thisຂອງວັດຖຸ firstName ປະກອບສ່ວນ.

ການຫຼຸດຫຼາຍວິທີການ

call() ແລະ apply() ວິທີການແມ່ນວິທີການທີ່ອອກແບບໄວ້ຂອງ JavaScript.

ທັງສອງສາມາດນຳໃຊ້ເພື່ອການເລະດັບການເລືອກຕົວວັດຖຸອື່ນມາເພີ່ມຕົວວິທີການ.

ທ່ານສາມາດອ່ານຂໍ້ມູນໃນການສອນຫຼັງນີ້. call() ແລະ apply() ຂໍ້ມູນຫຼາຍກວ່າ.

ເມື່ອນຳໃຊ້ person2 ຄືປະຕິບັດພາບຂອງ person1.fullName,this ຈະອີງຕາມ person2, ເຖິງວ່າມັນແມ່ນວິທີການຂອງ person1:

ບົດສະຫຼຸບ

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // ຈະກັບຄື "Bill Gates"

ທ້າທາຍພິຈາລະນາ