JavaScript-класс/конструктор против определения как функции

Question

Борьба, чтобы найти документацию по этому вопросу. Ранее я разработал класс в JavaScript-то вроде этого:

class Polygon { 
    constructor(height, width) { 
    this.height = height; 
    this.width = width; 
    } 
    area = function() { 
    return this.height * this.width; 
    } 
} 

Он не работал на JSFiddle и я был кто-то сказать мне, что мне нужно сделать это следующим образом:

var Polygon = function(height, width) { 
    this.height = height; 
    this.width = width; 
    this.area = function() { return this.height * this.width; } 
} 

Я видел есть несколько способов сделать это, мне было интересно, похоже ли это на C++, где вы можете ... Polygon * myPoly = new Polygon (3, 4); сделать указатель, в отличие от Polygon myPoly (3, 4); или если это просто стилистика, и если да, то какое-то представление о том, почему один из них не работает на JSFiddle, а другой делает.

Answer 1

Ваш первый пример недопустим синтаксисом. Правильный способ написать это будет:

class Polygon { 
    constructor(height, width) { 
    this.height = height; 
    this.width = width; 
    } 
    area() { 
    return this.height * this.width; 
    } 
} 

Это должно работать в JSFiddle, если вы используете браузер, который поддерживает классы, но есть некоторые браузеры, которые там до сих пор нет (об этом ниже).

Что касается разницы между двумя способами его написания, происходит две вещи.

Во-первых, JavaScript - это очень гибкий язык, и, как правило, существуют десятки способов добиться того, что вы пытаетесь сделать.

Во-вторых, синтаксис class - это совершенно новая функция JavaScript, которая не полностью поддерживается во всех широко используемых браузерах (в частности, для всех версий Internet Explorer). Под поверхностью class действительно является просто «синтаксическим сахаром» для создания конструктивных объектов способом, который показан во втором примере, поэтому конечный результат этих двух примеров кода будет более или менее одинаковым.

Так что, чтобы ответить на вашу аналогию с C++, нет, два приведенных вами примера кода на C++ делают очень разные вещи, в то время как эти два примера дают почти тот же результат. Для того, чтобы получить результат, который почти точно так же, вы можете либо изменить первый пример этого:

class Polygon { 
    constructor(height, width) { 
    this.height = height; 
    this.width = width; 
    this.area = function() { return this.height * this.width; }; 
    } 
} 

или вместо этого изменить второй пример этого:

var Polygon = function(height, width) { 
    this.height = height; 
    this.width = width; 
}; 

Polygon.prototype.area = function() { return this.height * this.width; }; 

Answer 2

Вам нужно изменить свой код из области вара = ... в

get area() { return this.height * this.width; } 

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes

https://jsfiddle.net/dwahlin/o93Lm0rc/