我經常遇到無法訪問 js 類中的 js 類的功能的問題。我主要用這個來修復它。或 bind(this) 但為什么這不起作用？它與我在另一堂課中這樣做的方式完全相同。
class Page {
// constructor and props
ShowNewJobPopup() {
var popupNewJobElement = $("<div>").attr("id", "popupNewJob");
console.log(data, element);
}
InitializeFilterElements(filterItems) {
filterItems["Control"].Items.push({
Template: function (itemElement) {
itemElement.append("<div id=\"btnNeuerJob\" style=\"width: 100%; margin-top: 4px;\"></div>");
$("#btnNeuerJob").dxButton({
type: "default",
text: "Neuer Job",
disabled: false,
onClick: function () {
this.ShowNewJobPopup(); // how is this not a function
}.bind(this)
});
}
});
return filterItems;
}
}
當我在開發控制臺中時。我可以寫 Page.ShowNewJobPopup （Page 是附加的腳本）
uj5u.com熱心網友回復：
在this從類網頁實際上并不是。
我們重寫Page類在下面的方式，你可以看到this被提及的obj。
class Page {
constructor() {}
ShowNewJobPopup() {
var popupNewJobElement = $("<div>").attr("id", "popupNewJob");
console.log(data, element);
}
InitializeFilterElements(filterItems) {
const obj = {
Template: function (itemElement) {
itemElement.append(
'<div id="btnNeuerJob" style="width: 100%; margin-top: 4px;"></div>'
);
$("#btnNeuerJob").dxButton({
type: "default",
text: "Neuer Job",
disabled: false,
onClick: function () {
this.ShowNewJobPopup();
}.bind(this), // this is referred to obj
});
},
};
filterItems["Control"].Items.push(obj);
return filterItems;
}
}
您可以做的是創建一個變數self來存盤this并在以后使用它來參考 Page 類。
class Page {
constructor() {}
ShowNewJobPopup() {
var popupNewJobElement = $("<div>").attr("id", "popupNewJob");
console.log(data, element);
}
InitializeFilterElements(filterItems) {
const self = this; // this here is referred to the class Page
const obj = {
Template: function (itemElement) {
itemElement.append(
'<div id="btnNeuerJob" style="width: 100%; margin-top: 4px;"></div>'
);
$("#btnNeuerJob").dxButton({
type: "default",
text: "Neuer Job",
disabled: false,
onClick: function () {
self.ShowNewJobPopup(); // self is referred to Page Class
},
});
},
};
filterItems["Control"].Items.push(obj);
return filterItems;
}
}
uj5u.com熱心網友回復：
您似乎有幾個具有不同this背景關系的函式相互嵌套。在類方法的頂部創建一個變數會簡單得多，而不是擔心將正確的背景關系傳遞給每個函式。
InitializeFilterElements(filterItems) {
const thisPage = this; // SET THE VARIABLE
filterItems["Control"].Items.push({
Template: function (itemElement) {
itemElement.append("<div id=\"btnNeuerJob\" style=\"width: 100%; margin-top: 4px;\"></div>");
$("#btnNeuerJob").dxButton({
type: "default",
text: "Neuer Job",
disabled: false,
onClick: function () {
thisPage.ShowNewJobPopup();
}
});
}
});
return filterItems;
}
uj5u.com熱心網友回復：
的值this取決于函式的呼叫方式（運行時系結）。執行時不能通過賦值來設定，每次呼叫函式時可能都不一樣。
InitializeFilterElements(filterItems) {
const self = this; // self now holds the value of this reference
filterItems["Control"].Items.push({
Template: function (itemElement) {
itemElement.append("<div id=\"btnNeuerJob\" style=\"width: 100%; margin-top: 4px;\"></div>");
$("#btnNeuerJob").dxButton({
type: "default",
text: "Neuer Job",
disabled: false,
onClick: function () {
self.ShowNewJobPopup();
}
});
}
});
return filterItems;
}
uj5u.com熱心網友回復：
這是thisJavaScript 中的一個經典問題。當Template被呼叫的功能，的基準this變化的物件，其中，所述函式被呼叫的任何背景關系。
檢查錯誤的示例
一個可能的解決方法是
class Page {
// constructor and props
ShowNewJobPopup() {
var popupNewJobElement = $("<div>").attr("id", "popupNewJob");
console.log(data, element);
}
InitializeFilterElements(filterItems) {
var that = this;
filterItems["Control"].Items.push({
Template: function (itemElement) {
itemElement.append("<div id=\"btnNeuerJob\" style=\"width: 100%; margin-top: 4px;\"></div>");
$("#btnNeuerJob").dxButton({
type: "default",
text: "Neuer Job",
disabled: false,
onClick: function () {
this.ShowNewJobPopup(); // how is this not a function
}.bind(that)
});
}
});
return filterItems;
}
}
class A {
test() {
console.log("test")
}
test2() {
let a = []
a.push({
template() {
function abc() {
console.log(this)
this.test()
}
abc.bind(this)()
}
})
return a
}
}
let a = new A()
let arr = a.test2()
//this will work
arr[0].template.bind(a)()
console.log("===========")
arr[0].template()轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/405948.html
標籤：