不是函数，什么时候函数就在上面？

Question

我经常遇到无法在 js class 中访问我的 js classes 的功能的问题。我主要用这个来解决它。或 bind(this) 但为什么这不起作用？它与我在另一个 class.

中执行此操作的方式完全相同

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（页面是附加到的脚本）

Answer 1

您似乎有几个具有不同 this 上下文的函数相互嵌套。在 class 方法的顶部创建一个变量，而不是担心将正确的上下文传递给每个函数会简单得多。

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

Answer 2

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

Answer 3

this 实际上不是来自 class 页面。

我们按以下方式重写您的页面 class，您可以看到 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 并在以后使用它来引用 class 页面。

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

Answer 4

这是JavaScript中this的经典问题。当调用 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()

不是函数，什么时候函数就在上面？

is not a function, when function is right above?

javascript

jquery

function

this

devextreme