javascript - 构造函数中的值不会改变

Question

我对编写 OO JavaScript 还很陌生。我尝试做这件事只是为了学习。我的问题是，我用构造函数定义了一个服务，但它只运行一次。

代码如下:

const app = angular.module('app', []);

class ViewportChecker {
    constructor() {
        this.scrollTop = window.pageYOffset;
    }
}

app.directive('sectionModule', ($window) => {
    return {
        link(scope, el) {
            const service = new ViewportChecker,
                win = angular.element($window);

            win.on('scroll', () => {
                console.log(service.scrollTop);
            });
        }
    };
});

我在控制台中只得到0。我做错了什么？

Answer 1

在实例化 ViewportChecker 变量的那一刻window.pageYOfsset 可能是 0(因为你还没有滚动)

所以当你稍后console.log(service.scrollTop)时这个变量仍然是0。

也就是说，您指定 this.scrollTop = 0，因此 service.scrollTop 将来将始终为 0。

你可以做的就是例如

constructor() {
    this.getScrollTop = function () { return window.pageYOffset; }
}

和

win.on('scroll', () => {
     console.log(service.getScrollTop());
 });