Question

背景：

当用户将页面向下滚动到图表所在的位置时，我想显示一个图表。

我有jQ背景，并且正在慢慢地转向纯js，因此很抱歉为混合使用。强迫自己使用ECMA6并以此学习，因此对您的帮助深表感谢。

设置：

// components.js
class Components {
    onwindowScroll(fn) {
        window.onscroll = fn;
    }
}

// charts.js
class Charts {
    constructor($chart) {
        this.chartTop = $chart.offset().top - window.innerHeight;
        this.chartHidden = true;
    }

    showChart() {
        const top = window.pageYOffset;
        if(top > this.chartTop && this.chartHidden) {
            this.chartHidden = false;
            this.displayChart();
        }
    }

    displayChart() {
        // render the chart
    }
}

// main.js
import {Components} from 'components';
import {Charts} from 'charts';

const main = () => {
    const components = new Components();
    const charts = new Charts($('#chartElement'));

    init();

    function init() {
        components.onwindowScroll(charts.showChart);
    }
}

问题：

在Charts.showChart中，“ this”是窗口而不是Charts，因此this.chartTop是未定义的，并且图表无法呈现。

分配window.onscroll函数时如何控制“ this”？

我读过这篇文章（对双关语）： Passing this to window.onscroll function

...但是看不到如何将该逻辑应用于我的设置。

非常感谢

如何控制window.onscroll的“ this”

0 个答案: