javascript - 如何创建构造函数？

Question

我正在尝试创建一个滚动构造函数，因此我只想创建一个带有属性的“var”，而不是为每个页面区域提供 X 数量的每个函数来滚动(如果属性是正确使用的术语，请纠正我) 。

目前这就是我要做的事情。我知道我需要在构造函数中使用 jQuery 函数做一些事情，但不确定如何格式化它。

function Scroll(button, scrollTop) {
    this.button = button;
    this.scrollTop = scrollTop;

    $(this.button).click(function () {
        $('html').animate({
            scrollTop: $(this.scrollTop).offset().top
        }, 'slow');
    });

}

var top = new Scroll('#top', '.top-page');
var bottom = new Scroll('#bottom', '.bottom-page');
console.log(top);
Scroll(top);

Answer 1

你得到了一个有效的答案，这才是真正重要的。但如果您仍然对构造函数范例感兴趣，这里有一种使用 class 语法的方法

class Scroll {
  constructor(button, scrollTop) {
    this.button = button;
    this.scrollTop = scrollTop;
  }

  static scroll(scroll) {
    $(scroll.button).click(function () {
      $('html').animate({scrollTop: $(scroll.scrollTop).offset().top}, 'slow');
    })
  }
}

const top = new Scroll('#top', '.top-page');
const bottom = new Scroll('#about', '.about-page');
Scroll.scroll(top);
Scroll.scroll(bottom);

我不认为这比你所做的更好，只是想我会回答原来的问题。话虽这么说，由于您只是遍历并附加一堆监听器，因此您可以将所有按钮-scrollTop 对放入一个数组中，然后循环遍历它们。

const scrollArr = [['#top', '.top-page'],['#about', '.about-page']];
for (let a of scrollArr) {
  $(a[0]).click(function() {
    $('html').animate({scrollTop: $(a[1]).offset().top}, 'slow');
  })
}

那么您就没有带有 new 关键字的附加行。