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

Question

我正在学习 JS，但我有点无法理解发生了什么。

我function在按下按钮时打电话给 a，但 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（输出）一起提供

Answer 1

原因是因为this引用不同。当您最初调用该object.objectFunction();函数时，您this就是对象本身，并且它具有name和的键surname。当您将object.objectFunction函数附加到按钮的点击侦听器时，将创建对该函数的引用，并且您将丢失其余object属性。希望一个例子可以解决这个问题：const buttonM = document.getElementById("demo");let object = {&nbsp; name: "Utkarsh",&nbsp; surname: "Sharma",&nbsp; objectFunction: function () {&nbsp; &nbsp; console.log("this&nbsp; &nbsp; →", this); // ← I have added this line&nbsp; &nbsp; console.log("name&nbsp; &nbsp; →", this.name)&nbsp; &nbsp; console.log("surname →", this.surname)&nbsp; },};object.objectFunction();buttonM.addEventListener("click", object.objectFunction);<button id="demo">click</button>

Answer 2

当您调用objectFunction时object，它会起作用，正如您已经发现的那样。但是，当实际function被定义为事件处理程序时，它不再绑定到对象。您可以创建一个调用它的函数，例如const buttonM = document.getElementById("demo");let object = {&nbsp; name: "Utkarsh",&nbsp; surname: "sharma",&nbsp; roll: 23,&nbsp; objectFunction: function () {&nbsp; &nbsp; console.log(this);&nbsp; &nbsp; console.log("Value is :" + this.name + " Surname:" + this.surname);&nbsp; },};object.objectFunction(); //op: Value is: Utkarsh&nbsp; Surname: Sharma (correct op as expected).buttonM.addEventListener("click", () => {object.objectFunction()});&nbsp; //on pressing the button op:value is:&nbsp; Surname:Undefined&nbsp; &nbsp;(expected o/p is: Value is: Utkarsh&nbsp; Surname: Sharma).请参阅：https ://jsfiddle.net/561so8e2/或者您可以将对象绑定到点击，如const buttonM = document.getElementById("demo");let object = {&nbsp; name: "Utkarsh",&nbsp; surname: "sharma",&nbsp; roll: 23,&nbsp; objectFunction: function () {&nbsp; &nbsp; console.log("Value is :" + this.name + " Surname:" + this.surname);&nbsp; },};object.objectFunction(); //op: Value is: Utkarsh&nbsp; Surname: Sharma (correct op as expected).buttonM.onclick = object.objectFunction;buttonM.onclick.bind(object);//buttonM.addEventListener("click", () => {object.objectFunction()});&nbsp; //on pressing the button op:value is:&nbsp; Surname:Undefined&nbsp; &nbsp;(expected o/p is: Value is: Utkarsh&nbsp; Surname: Sharma).请参阅https://jsfiddle.net/561so8e2/2/

Answer 3

只需将对象绑定到它应该工作的回调&nbsp; &nbsp;const buttonM = document.getElementById("demo");let object = {&nbsp; name: "Utkarsh",&nbsp; surname: "sharma",&nbsp; roll: 23,&nbsp; objectFunction: function () {&nbsp; &nbsp; let self = this;&nbsp; &nbsp; console.log("Value is :" + self.name + " Surname:" + self.surname);&nbsp; },};object.objectFunction(); //op: Value is: Utkarsh&nbsp; Surname: Sharma (correct op as expected).buttonM.addEventListener("click",object.objectFunction.bind(object));&nbsp;