首頁猿問單擊時調用回調函數未獲取當前對象

單擊時調用回調函數未獲取當前對象

JavaScript

蠱毒傳說 2022-12-18 16:03:32

我正在學習 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（輸出）一起提供

查看完整描述

3 回答

慕娘9325324

TA貢獻1783條經驗獲得超4個贊

原因是因為this引用不同。

當您最初調用該object.objectFunction();函數時，您this就是對象本身，并且它具有name和的鍵surname。

當您將object.objectFunction函數附加到按鈕的點擊偵聽器時，將創建對該函數的引用，并且您將丟失其余object屬性。

希望一個例子可以解決這個問題：

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

let object = {

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>

反對回復 2022-12-18

繁花不似錦

TA貢獻1851條經驗獲得超4個贊

當您調用objectFunction時object，它會起作用，正如您已經發現的那樣。但是，當實際function被定義為事件處理程序時，它不再綁定到對象。您可以創建一個調用它的函數，例如

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

let object = {

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

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/

反對回復 2022-12-18

縹緲止盈

TA貢獻2041條經驗獲得超4個贊

只需將對象綁定到它應該工作的回調

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

let object = {

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

反對回復 2022-12-18

3 回答
0 關注
107 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

單擊時調用回調函數未獲取當前對象

單擊時調用回調函數未獲取當前對象

3 回答

添加回答