Question

我对语法有疑问。我一直在寻找答案，但是没有成功，因此很抱歉，如果这里已经回答了。

我想问一下在添加事件侦听器时如何在类内部调用“ this”引用。下面的代码示例对其进行了更好的解释。

myListClass基本包含HTMLDivElement，我想添加事件监听器

        class App {
            private myList: myListClass;

            constructor() {
                this.myList = new myListClass();

                this.myList.getList().forEach(function (element) {

                    element.addEventListener('click', function (this) {
                        let itemType = this.getAttribute('data-item-type');
                        let itemId = this.getAttribute('data-item-id');

                        //dont know how to make this call
                        this(referencing to App class).myFunction(itemType, itemId);

                    }, false);
                });

            }

            public myFunction(itemType, itemId) {
                // do magic
            };
        }

Answer 1

箭头功能是您的朋友：）

箭头函数表达式的语法比函数表达式短，并且没有自己的语法

当您尝试在回调函数中访问原始上下文时，如果用function() {}替换烦人的函数() => {}，则可以访问原始this上下文！

class App {
        private myList: myListClass;

        constructor() {
            this.myList = new myListClass();

            this.myList.getList().forEach(element => {

                element.addEventListener('click',  clickEvent => {
                    let itemType = element.getAttribute('data-item-type');
                    let itemId = element.getAttribute('data-item-id');
                    //now it should work!
                    this.myFunction(itemType, itemId);

                }, false);
            });

        }

        public myFunction(itemType, itemId) {
            // do magic
        };
    }

详细了解mdn上的箭头功能

TypeScript将类传递给匿名函数

1 个答案: