我正在学习JS，我到了一个点，我有点不明白发生了什么。
我正在按下按钮时调用一个函数，但O/P说它是未定义。 为什么我得到未定义？ 我认为我还没有将对象作为一个整体传递出去，所以它不能从此引用，但是当我试图在add event listener的回调函数之外打印它时，我得到了正确的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（输出）一起提供
原因是因为此引用不同。
当您最初调用object.ObjectFunction（）；函数时，您的this是对象本身，它具有名称和姓氏的键。
将Object.ObjectFunction函数附加到按钮的click侦听器时，将创建对该函数的引用，并丢失Object的其余属性。
希望有一个例子可以澄清这一点:
null
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>
当您调用object的objectfunction时，它会起作用，正如您已经发现的那样。 但是，当实际的函数被定义为事件处理程序时，它不再绑定到对象。 您可以创建一个函数来调用它，比如
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/
只需将对象绑定到它应该工作的回调
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));
