我應該如何定義我的構造函數（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不再被定義，只是說'undefined' 。

我不知道如何使element指向我的類屬性。 此外， Carousel.current也沒有工作。 而且我不知道我是否做了很好的重構。 我沒有把所有的代碼（//東西放在這里），但我認為它足夠......（僅供我在代碼中稍后實例化我的Carousel功能）任何幫助表示贊賞！

Answer 1

你在showPrev函數中使用Carousel，但Carousel不是一個對象，它是一個類。

function MyClass(arg1)
{
    this.myProperty = arg1;
}

// If you want your class to inherit
MyClass.prototype = Object.create(MyParentClass.prototype);

MyClass.prototype.myMethod = function ()
{
    // You can use this inside a method
    console.log(this.myProperty);
};

MyClass.MyStaticProperty = 42;
MyClass.MyStaticMethod = function ()
{
    // You can't use this here
};

const myObject = new MyClass("Hello, World");
myObject.myMethod();

將“Carousel”替換為“this”並將方法附加到類原型。 然后將您的類安裝到一個對象中。

Answer 2

有幾種方法可以做到這一點，最好的方式是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

Answer 3

要將其轉換為實際類，它必須看起來像這樣。

您將在底部看到我有一個變量，該變量是該類的一個實例，然后您可以使用此變量調用您的函數carousel.showPrev()例如可以從類外部調用。

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

    this.showArrows();
  }

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

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

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

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

let carousel = new carouselClass('parent', 'currentItem', 'count');

這是一些進一步的閱讀

我希望你覺得這有幫助。