我使用的代码

这是我实施的代码。请注意，问题尤其出在行window.addEventListener( 'scroll', this.i_am_watching.bind(this), false );上，但不能按预期工作。

<html><head>

    <style>
        .content { background: #f8f8f8; padding: 20px; height: 1000px; }
        .person { padding: 20px; font-size: 20px; line-height: 20px; }
        .person.mark { background: pink; }
        .person.peter { background: lightblue; }
        .person.albert { background: lightgreen; }
        div + div { margin-top: 20px; }
        div { border: 1px solid black; }
        #console { position: fixed; top: 10px; right: 10px; width: 50%; height: 300px; overflow: auto; border: 3px solid black; background: white; }
    </style>

</head><body>

    <div id="console"></div>
    <div class="content">...some content...</div>
    <div id="mark_div" class="person mark">MARK</div>
    <div class="content">...some content...</div>
    <div id="peter_div" class="person peter">PETER</div>
    <div class="content">...some content...</div>
    <div id="albert_div" class="person albert">ALBERT</div>
    <div class="content">...some content...</div>

    <script>

        function Person( name, div_id )
        {
            // properties
            this.label = name;
            this.div = document.getElementById( div_id );           

            // auxiliary function
            this.is_in_viewport = function( el )
            {
                var rect = el.getBoundingClientRect();
                return (
                    rect.top+el.offsetHeight >= 0 &&
                    rect.left >= 0 &&
                    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
                );
            }

            // i_am_watching
            this.i_am_watching = function()
            {
                if( this.is_in_viewport( this.div ) ) document.getElementById('console').innerHTML += "I'm watching <b>"+name+"<br>" ;
            }

            // listener
            window.addEventListener( 'scroll', this.i_am_watching, false );
        }

        Person( "mark", "mark_div" );
        Person( "peter", "peter_div" );
        Person( "albert", "albert_div" );

    </script>

</body></html>

小提琴：https://jsfiddle.net/bd3182zw/2/

问题

问题是，只有当Albert在视口上时，侦听器才会触发。当它触发时，所有对象都执行i_am_watching方法。

`bind`不起作用

正如MDN reference for EventTarget.addEventListener()（“处理程序中的这个值”一节）中所述，我试图在侦听器调用的函数之后添加.bind(this)，以确保{ {1}}适用于正确的对象;但正如你所看到的，它不起作用。

我做错了什么？

Answer 1

this函数中的{p> Person是window这样的全局对象。

要实例化一个类对象，请使用new运算符创建它。

    new Person( "mark", "mark_div" );
    new Person( "peter", "peter_div" );
    new Person( "albert", "albert_div" );

然后Person有他自己的背景。

PS：不要忘记你的约束力！

        // listener
        window.addEventListener( 'scroll', this.i_am_watching.bind( this ), false );

当用户滚动时，让Javascript对象执行某些操作

我使用的代码

问题

`bind`不起作用

1 个答案:

当用户滚动时，让Javascript对象执行某些操作

我使用的代码

问题

bind不起作用

1 个答案:

`bind`不起作用