Illegal use of reserved word 'class'

[Siev]

 immediately ran into an error when trying to create a class in a script file. I want to use a class with a constructor instead of defining objects individually. This code works. I can access the properties and the method just fine:

const mockupSize = {
	w:595.2756, 
	h:841.8898,
	compare: function(testW, testH){
		return (testH==this.h)&&(testW==this.w);
	}
}

but this code threw an "Illegal use of reserved word 'class'" error. What am I missing? Am I not allowed to create a class?

class StdBoardSize {
	constructor(width, height){
		this.h = height;
		this.w = width;
	}
	compare(testW, testH){
		return (testH==this.h)&&(testW==this.w);
	}
}
const mockupSize = new StdBoardSize(595.2756,841.8898);

[Doug A Roberts]

Refer to this thread for a similar question and answer:

https://community.adobe.com/t5/after-effects-discussions/classes-in-extendscript-object-orientation/...

It is an After Effects question, but Illustrator also uses ExtendScript.

[femkeblanco · Accepted solution]

ExtendScript is JavaScript ES3 (ECMAScript 3), which has no "classes".  The "class" keyword, together with "const" and "let", was introduced in ES6 in the mid 2010s.  The equivalent for creating an object would be the good old fashioned "constructor" notation (shown below) or even the "factory" notation.

function StdBoardSize(width, height) {
	this.h = height;
	this.w = width;
	this.compare = function (testW, testH) {
		return (testH == this.h) && (testW == this.w);
	}
}
var mockupSize = new StdBoardSize(595.2756, 841.8898);
alert(mockupSize.compare(500, 800));  // false

[hhas01]

ExtendScript is JavaScript ES3 (ECMAScript 3), which has no "classes". 

Correct. To clarify further: ES6 doesn’t have classes either. What ES6 adds is some syntactic sugar over ES3’s original prototypal object-oriented programming model. This is really a marketing move, to make JS look more attractive to traditional OO developers. Underneath, ES6 still has all the original JS semantics and behaviors, including various gotchas to trip unwary “class” syntax users, e.g. dynamic `this` binding (which is NOT the same thing as `self` in Smalltalk and Python or `this` in Java). Therefore it’s a really good idea to understand how JS’s OO model actually works, regardless of which syntax you use in your scripts. This looks like a good intro:

https://alistapart.com/article/prototypal-object-oriented-programming-using-javascript/

Short version: JS’s `new` keyword, when applied to a function call, modifies the function’s behavior so that, instead of evaluating the function body and returning that code’s result, a brand new empty Object is created and temporarily bound to `this`. The function body can then attach functions and other values to the object, and when the function returns the result is this new object.

A very simple, completely uniform system that gives you all the power of class-based OOP with none of the complexities and inconsistencies of the traditional two-tier class vs instance approach. Everything is an instance (object); no need for separate classes. It does have a certain number of warts, such as `new` appearing at the call site instead of the function definition, attaching prototypes to create an inheritance chain being a bit of a fiddle, and `this` not behaving as you’d expect. But those are JS design issues, not prototypal OOP design issues; and hey, it wouldn’t be JavaScript if it weren’t warty as a toad.

(ES6’s “class” syntax addresses some of those warts—e.g. inheritance chains are now easy to declare using the `extends` keyword—while masking others—`this` will still catch uwary users out, even moreso than before. So it goes.)

…

p.s. FWIW, while ExtendScript is forever stuck on ancient mouldering ES3, Adobe’s new UXP builds on modern Node.js so will bring all the benefits of that highly active platform: ES6 (V8), npm, and tons of developer tools and other resources. Adobe are currently phasing in UXP support for PS; no word yet on when it will land in AI and ID, but I expect sometime over the next few years. Should be interesting. Adobe’s Tech Blog is worth keeping an eye on:

https://medium.com/adobetech

p.p.s. Vassily Hall has also done work creating a VSCode project template using polyfilled TypeScript for ExtendScript development, which you can find on his GitHub:

https://github.com/Silly-V