Функция обратного вызова не получает текущий объект при вызове по щелчку

Question

Я изучаю JS, и я подошел к точке, где я как бы не могу понять, что происходит.

Я звоню function при нажатии кнопки, но o / p говорит это undefined. Почему я получаю undefined? Я думаю, что я не передал объект в целом, поэтому он не может ссылаться на него, но когда я пытаюсь распечатать его за пределами функции callBack добавления прослушивателя событий, я получаю правильный O / P

const buttonM = document.getElementById("demo");

let object = {
  name: "Utkarsh",
  surname: "sharma",
  roll: 23,
  objectFunction: function () {
    console.log("Value is :" + this.name + " Surname:" + this.surname);
  },
};

object.objectFunction(); //op: Value is: Utkarsh  Surname: Sharma (correct op as expected).

buttonM.addEventListener("click", object.objectFunction);  //on pressing the button op:value is:  Surname:Undefined   (expected o/p is: Value is: Utkarsh  Surname: Sharma).

комментарии предоставляются с op (output)

Answer 1

Причина в том, что ссылка this отличается.

Когда вы первоначально вызываете функцию object.objectFunction();, ваш this является самим объектом, и у него есть ключи для name и surname.

Когда вы прикрепляете функцию object.objectFunction к прослушивателю щелчка кнопки, создается ссылка на функцию, и вы теряете остальные свойства object.

Надеюсь, пример может прояснить это:

const buttonM = document.getElementById("demo");

let object = {
  name: "Utkarsh",
  surname: "Sharma",

  objectFunction: function () {
    console.log("this    →", this); // ← I have added this line

    console.log("name    →", this.name)
    console.log("surname →", this.surname)
  },
};

object.objectFunction();
buttonM.addEventListener("click", object.objectFunction);

<button id="demo">click</button>

Answer 2

Просто привяжите объект к обратному вызову, он должен работать

   const buttonM = document.getElementById("demo");
let object = {
  name: "Utkarsh",
  surname: "sharma",
  roll: 23,
  objectFunction: function () {
    let self = this;
    console.log("Value is :" + self.name + " Surname:" + self.surname);
  },
};

object.objectFunction(); //op: Value is: Utkarsh  Surname: Sharma (correct op as expected).
buttonM.addEventListener("click",object.objectFunction.bind(object)); 

Answer 3

Когда вы звоните objectFunction из object, он работает, как вы уже выяснили. Однако когда фактический function определяется как обработчик событий, он больше не привязан к объекту. Вы можете создать функцию, которая ее вызывает, например

const buttonM = document.getElementById("demo");

let object = {
  name: "Utkarsh",
  surname: "sharma",
  roll: 23,
  objectFunction: function () {
    console.log(this);
    console.log("Value is :" + this.name + " Surname:" + this.surname);
  },
};

object.objectFunction(); //op: Value is: Utkarsh  Surname: Sharma (correct op as expected).

buttonM.addEventListener("click", () => {object.objectFunction()});  //on pressing the button op:value is:  Surname:Undefined   (expected o/p is: Value is: Utkarsh  Surname: Sharma).

См.: https://jsfiddle.net/561so8e2/

Или вы можете привязать объект к щелчку, как

const buttonM = document.getElementById("demo");

let object = {
  name: "Utkarsh",
  surname: "sharma",
  roll: 23,
  objectFunction: function () {
    console.log("Value is :" + this.name + " Surname:" + this.surname);
  },
};

object.objectFunction(); //op: Value is: Utkarsh  Surname: Sharma (correct op as expected).

buttonM.onclick = object.objectFunction;
buttonM.onclick.bind(object);
//buttonM.addEventListener("click", () => {object.objectFunction()});  //on pressing the button op:value is:  Surname:Undefined   (expected o/p is: Value is: Utkarsh  Surname: Sharma).

См. https://jsfiddle.net/561so8e2/2/