javascript - 普通 Javascript 插件在控制台中返回错误

Question

我是 javascript 的新手，所以我需要一些帮助。
我正在尝试制作一个简单的插件(当然只是为了学习，以便更好地理解事物)，但我遇到了一些麻烦，我将不胜感激。
我的插件是基本的，我正在尝试为 scroll 上的一些内容设置动画，所以这是我的代码:
JS:

(function() {
  //=============================
  //=======CONSTRUCTOR===========
  //=============================
  this.hAnimate = function() {
    this.hanimate = null;
    this.el = null;


    //default options
    var defaults = {
      class : 'hanimate'
    }

   // Create options and extend defaults
   if (arguments[0] && typeof arguments[0] === "object") {
     this.options = extendDefaults(defaults, arguments[0]);
   }

  }
  //==============================
  //===========FUNCTIONS==========
  //==============================

  hAnimate.prototype.init = function() {

    window.addEventListener('scroll' , function(){
      this.el = document.querySelector(this.options.class);
    var distanceY = window.pageYOffset || document.documentElement.srollTop,
        scrollDelay = this.el.getAttribute('data-scroll');

        if ( distanceY > scrollDelay ){
          this.el.classList.add('scrolled');
        }
        else{
          if(this.el.classList.contains('scrolled')){
            this.el.classList.remove('scrolled')
          }
        }
     });
   }
  function extendDefaults(source, properties) {
    var property;
    for (property in properties) {
      if (properties.hasOwnProperty(property)) {
        source[property] = properties[property];
      }
    }
    return source;
  }

}());

HTML:

<header class='hanimate' data-scroll='1000' data-effect='bg-red'>
    <h1>This is my header</h1>
  </header>
  <main class='wrapper'>

  </main>
  <script src='scripts/hAnimate.js'></script>
  <script>
     window.onload = function(){
       new hAnimate().init();
     }
  </script>

和 CSS:

.wrapper{
  width:80%;
  margin:0 auto;
  min-height:5000px}

.hanimate{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:5em;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f2f2f2;
}

[data-effect='bg-red']{
  transition:background .7s;
}
.scrolled[data-effect='bg-red']{
  background:red;
}

所以当我尝试运行它时，它在控制台中给我一个错误

ReferenceError: options is not defined

this.el = document.querySelector(this.options.class);

演示 here

更新
所以我做了一些研究，但我就是想不通，我是初学者，我知道，但我就是不明白，这是我更新的代码:

// Create an immediately invoked functional expression to wrap our code
;(function(window) {
  'use strict';
  function extend( a, b ) {
        for( var key in b ) {
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }
  // Define our constructor
   function hAnimate(el, options) {
     this.el = document.querySelector(el);
     this.options = extend( this.defaults, options );
     this.init();
  }

  hAnimate.prototype = {
    defaults : {
            classToAdd : 'scrolled'
        },
    init: function() {
      window.addEventListener('scroll', function(){
          var self = this,
              distanceY = window.pageYOffset || document.documentElement.scrollTop,
              scrollDel = 100;

          if (distanceY > scrollDel) {
            this.el.classList.add(this.options.classToAdd);
          } else {
              if (this.el.classList.contains(this.options.classToAdd)) {
                this.el.classList.remove(this.options.classToAdd);
              }
          }
      });
  }

}
window.hAnimate = hAnimate;

})(window);


document.addEventListener('DOMContentLoaded', function() {
  //var el = document.querySelector('.hAnimate');
  new hAnimate('.hanimate', {classToAdd : 'green'});
});  

错误是

TypeError: this.el is undefined, i tried self.el too but don't work either.
Instead this work :

// Create an immediately invoked functional expression to wrap our code
;(function(window) {
  'use strict';
  function extend( a, b ) {
        for( var key in b ) {
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }
  // Define our constructor
   function plugin(el, options) {
     this.el = document.querySelector(el);
     this.options = extend( this.defaults, options );
     this.init();
  }

  plugin.prototype = {
    defaults : {
            color : 'red'
        },
    init: function() {
      this.el.style.color = this.options.color;
  }

}
window.plugin = plugin;

})(window);

document.addEventListener('DOMContentLoaded', function() {

//var el = document.querySelector('.plugin');
new plugin('.plugin', {color: 'blue'});

});

我希望有人能给我一些建议，我真的很想熟悉 javascript

Answer 1

正如我在评论中所说，您遇到的问题类似于 this one .

简单地说，当您定义事件处理程序时，this 指的是事件发生的元素，而不是您的对象。如果您不想重写代码，对您来说简单的解决方法是在定义 init 行为时创建一个引用对象的别名。

hAnimate.prototype.init = function() {
    var obj = this;
    window.addEventListener('scroll' , function(){
        ....
    }
}

因此，在定义为滚动事件处理程序的函数中，obj 将引用 hAnimate 实例，而 this 将引用一个元素。因此，您需要做的就是用“obj”替换所有相关的“this”。

但是您的代码中还有另一个错误，确切地说是这一行:

this.el = document.querySelector(this.options.class);

假设 this.options.class 只包含类名，将它用作 querySelector 不会产生任何结果(因为它会被解释为标签名而不是类名)。使用这个:

obj.el = document.getElementsByClassName(obj.options.class)[0];

其中 [0] 用于仅获取第一个元素。请注意，您更愿意使用#id，但这取决于您。

这里修改了fiddle

注意:它在 jsfiddle 上对我不起作用，但话又说回来，什么都不是。我想知道为什么。不过它在本地主机上运行良好。