Определение функций JavaScript внутри и вне класса

Question

Я пытаюсь выяснить, есть ли различия при определении функций внутри или вне класса в JavaScript. Почему я предпочел бы сделать это одним способом по сравнению с другим? (Обратите внимание на мои getName [внутри класса] и getName2 [вне класса]).

class TestClass {
    constructor(myName) {
        this.name = myName;
    }

    getName() {
        return this.name;
    }
}

TestClass.getName2 = function() {
    //won't actually print the name variable set since not associated with an instance of the class?
    console.log(this.name);
};

var test = new TestClass("Joe");

console.log(test.getName());

///////////////

TestClass.getName2();

Выход:

Joe
TestClass

Единственное различие, которое я действительно вижу в этом тестировании, заключается в том, что я не могу получить доступ к this.name в моем getName2, так как считаю, что он не связан ни с одним экземпляром TestClass. Так что мой getName2 почти как статическая функция класса, где он не связан с экземпляром класса ?? Пожалуйста, помогите мне прояснить это и почему я выбрал бы реализацию функции одним способом над другим.

Answer 1

Из MDN doc :

Классы JavaScript, представленные в ECMAScript 2015, в основном являются синтаксическим сахаром по сравнению с существующим наследованием JavaScript на основе прототипов. Синтаксис класса не вводит новую объектно-ориентированную модель наследования в JavaScript.

Итак, это ...

class TestClass {
  constructor(myName) {
    this.name = myName;
  }

  getName() {
    return this.name;
  }

  static getName2() {
    return 'getName2 result';
  }
}

... в точности соответствует этому:

const TestClass = function(myName) {
  this.name = myName;
}

TestClass.prototype.getName = function() {
  return this.name;
}

TestClass.getName2 = function() {
  return 'getName2 result';
}

---

Так что, используете ли вы более старый синтаксис прототипа или более новый синтаксис ES6 class, это просто вопрос личных предпочтений, и, как вы подозревали, определение методов непосредственно для class в точности эквивалентно созданию static метод класса .

Answer 2

Я не думаю, что есть какая-то причина, по которой вы когда-либо сделали бы

TestClass.getName2 = function() {

Если вы хотите автономную функцию, сделайте ее автономной функцией.

, например

export function getName2() {...};
export TestClass;

Если вы хотите расширить существующий класс, вы должны сделать

TestClass.prototype.getName2 = function() {

, который позволит вам получить доступ к этому.