Why would I create an object with 'class' instead of 'function'?

Question

I've briefly followed a 2d game tutorial. It shows this style of object creation:

function component(width, height, color, x, y) {
   this.width = width
   ...
   this.method = function(){...}

// instantiate block using class
block = new component(30, 60, "red", 225, 225);

But I've also been told about ES6's class functionality, which I believe would do something very similar, but more inline with other language's formal object creation syntax:

class component {
    constructor(width, height, color, x, y){
        this.width = width
        ...
    }

   method(){
       ...
   }

// instantiate block using class
block = new component(30, 60, "red", 225, 225);

What are the functional differences of these two approaches? Why would I use one over the other?

@AZ_ agree that it's a dupe, but that has no accepted answer and the existing answers are... suboptimal. This is a better question. — Jared Smith, Aug 09 '19 at 12:04
Classes are a very new syntax in JavaScript. It just didn't exist until recently. — NineBerry, Aug 09 '19 at 12:11
Note (with reference to the duplicate) that `class` syntax is just the ES6 approach to writing prototypes. — Quentin, Aug 09 '19 at 12:11
Both class and function(factory) in this case are doing same thing. Class under the hood uses factory function for its execution(same prototypal inheritance even if we write in classical way). Its just Class keyword makes inheritance in java-script little easier to write(sugar syntax). — saurssaurav, Aug 09 '19 at 12:12
@NineBerry — The core functionality of class is just syntactic sugar for prototypes which have been in JS since the beginning. — Quentin, Aug 09 '19 at 12:12
@Quentin Yes, but before this syntax didn't exist, it couldn't be used. Also, there are still browsers out there (Internet Explorer) that don't understand it. so that you cannot use it if compatibility with these browsers is required. — NineBerry, Aug 09 '19 at 12:14
@Quentin there's two differences I can think of off-hand: classes can correctly extend built-ins like Array and HTMLElement, and classes will automatically throw when called without `new` without having to manually insert an `instanceof` check. — Jared Smith, Aug 09 '19 at 12:16
https://stackoverflow.com/questions/30783217/what-benefits-does-es2015-es6-class-syntax-provide This has a good answer — Mohrn, Aug 09 '19 at 12:17
@Quentin The link Mohrn provided should be the linked duplicate, since it likely address the question more than the current one. Being aware that, as you mentioned, under the hood the class is just an "easier" way to easily handle prototypal inheritance, ECMAScript specifications actually handles functions, prototypes and classes in separate sections. In a nutshell, the real question is not really what is the difference between them, but rather why you should use one or the other, which is what is answered in the link provided by Mohrn above. — briosheje, Aug 09 '19 at 12:21

StepUp · Answer 1 · 2019-08-09T12:28:05.617

Classes are new way of writing constructor functions. Under the hood your code translated into Constructor function.

E.g., you have a class:

class Person {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    getFullName() {
        return this.firstName + " " + this.lastName ;
    }
}

Under the hood you will have constructor function:

function Person(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
}

Person.prototype.getFullName()= function () {
    return this.firstName + " " + this.lastName ;
}

As mdn says:

Classes are in fact "special functions", and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations.

In addition:

Class can have constructors constructor, function are constructors.
Difference between how you can inherit. Class uses keyword extends, function uses prototype keyword
how can you define private fields. Class uses # sign. E.g.: #property and functions: function Container(param) { this.member = param; var secret = 3; // private memeber var that = this; // private memeber }

Why would I create an object with 'class' instead of 'function'?

1 Answers1