调用单击时回调函数未获取当前对象答案

【问题标题】：Call back function not getting current object when calling on click调用单击时回调函数未获取当前对象
【发布时间】：2023-04-11 06:56:01
【问题描述】：

我正在学习 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).

cmets 带有 op（输出）

【问题讨论】：

标签： javascript html css angularjs reactjs

【解决方案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);

&lt;button id="demo"&gt;click&lt;/button&gt;

【讨论】：

所以基本上我将函数（只是函数）传递给回调。我对吗。 @Labu
几乎！您将引用（仅）传递给事件侦听器的函数，然后在触发侦听器时调用该引用。

【解决方案2】：

当您致电 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/

【讨论】：

【解决方案3】：

只需将对象绑定到它应该工作的回调

   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));

【讨论】：