javascript - 我应该如何定义我的构造函数(JS)

Question

目前我的构造函数是这样定义的并且可以工作:

function Carousel(parent, currentItem, count) {
    var element = parent;
    var count = count;
    var arrPrev = document.createTextNode('‹');
    var arrNext = document.createTextNode('›');
    var cPrevClass = 'cPrevClass';
    var cNextClass = 'cNextClass';
    var crslClass = 'js-Carousel';
    var current = currentItem;

    showArrows();

    /**
    * Create the navigation arrows (prev/next) and attach to carousel.
    */
    function showArrows() {
       // stuff here
       // Event listener (important for my question)
        buttonPrev.addEventListener('click', showPrev);
        buttonNext.addEventListener('click', showNext);
    }
}

因为当时我不知何故忘记了我应该使用 this 关键字定义我的类构造函数(我猜)，我现在重写了它:

function Carousel(parent, currentItem, count) {
    this.element = parent;
    this.count = count;
    this.current = currentItem;
    this.showArrows = showArrows;
    this.showArrows();
}

/**
 * Create the navigation arrows (prev/next) and attach to carousel.
 */
function showArrows() {
    // stuff here...
    var modal = document.getElementById("netreviews_media_modal");

    // then adding event listener
    buttonPrev.addEventListener('click', showPrev);
    buttonNext.addEventListener('click', showNext);

    modal.appendChild(buttonPrev);
    modal.appendChild(buttonNext);
}

/**
 * Go back
 */
function showPrev() {
    if (Carousel.current == 0) {
        Carousel.current = Carousel.count - 1;
    }
    else {
        Carousel.current = Carousel.current - 1;
    }
    updateModal(element.querySelectorAll('.' + crslClass + ' > ul li > a')[Carousel.current]);
}

现在，当 updateModal() 函数运行时(请参阅文件末尾)，我遇到了一个错误，告诉我“无法读取未定义的属性‘querySelectorAll’” 当然，element 不再定义，只是说“未定义”。

我不知道如何使 element 指向我的类属性。此外，Carousel.current 也不起作用。而且我不知道我是否在重构它方面做得很好。我没有把所有的代码(//东西放在这里)但我认为它足够了...... (仅供引用，我稍后会在代码中实例化我的 Carousel 函数) 任何帮助表示赞赏!

Answer 1

有几种方法可以做到这一点，最好的方法是 es6 或 ECMAScript2015 方法。只需像这样创建一个类:

class Foo {
  constructor(bar) {
    this.bar = bar
  }

  baz() {
    console.log(this.bar) // prints Hello world
  }
}

const foo = new Foo('Hello world') // your instance
foo.baz()

另一种方法是“旧”方法，即创建一个函数，您已经非常接近了。但是有一个问题；

function Foo(bar) {
  this.bar = bar;

  this.baz = function() {
    console.log(this.bar) // this would point to the anonymous function scope, not the class scope, so this.bar would be undefined
  }
}

const foo = new Foo('Hello world') // your instance
foo.baz() // throws an error

如注释中所述，this 不是类或 Foo 作用域，而是匿名函数的作用域。我通常如何解决这个问题，是使用自执行匿名函数。现在this作用域保存在self中，你可以这样使用它；

function Foo(bar) {
  this.bar = bar;

  this.baz = (function(self) {
    return function() {
      console.log(self.bar); // prints Hello world
    }
  })(this);
}

const foo = new Foo('Hello world') // your instance
foo.baz() // all good

正如@Kulvar 所指出的，将 this 存储在常量/变量中也是可能的(并且可能性能更高)。我个人不是很喜欢这种方法，感觉有点hacky；

function Foo(bar) {
  this.bar = bar;

  var self = this;

  this.baz = function() {
    console.log(self.bar) // note the use of `self` instead of `this`
  }
}

const foo = new Foo('Hello world') // your instance
foo.baz() // all good