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

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 = {

  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

当您调用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/

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