JavaScript Classes: Difference between revisions

From NovaOrdis Knowledge Base
Jump to navigation Jump to search
 
(17 intermediate revisions by the same user not shown)
Line 8: Line 8:
=Overview=
=Overview=


A JavaScript class is a syntactical superstructure in top of the language's existing prototype-based inheritance, and it does not introduce a new object-oriented inheritance model in JavaScript. A class is a special [[JavaScript_Functions|function]], so like in the functions' case, a class syntax has two components: [[#Declaration|declarations]] and [[#Class_Expressions|expressions]]. An important difference between function declaration and class declaration is that function declaration and [[JavaScript Hoisting|hoisted]], while the class declarations are not: you first need to declare the class and then access it, otherwise a ReferenceError is thrown.
A JavaScript class is a syntactical superstructure in top of the language's existing prototype-based inheritance, and it does not introduce a new object-oriented inheritance model in JavaScript. A class is a special [[JavaScript_Functions|function]], so like in the functions' case, a class syntax has two components: [[#Declaration|declarations]] and [[#Class_Expressions|expressions]].  
 
=Class Hoisting=
 
An important difference between function declaration and class declaration is that function declaration and [[JavaScript Hoisting|hoisted]], while the class declarations are not: you first need to declare the class and then access it, otherwise a ReferenceError is thrown.


=Declaration=
=Declaration=
Line 22: Line 26:


=Class Expression=
=Class Expression=
A class expression is another way to define a class, and it can be named or unnamed. The name given to a named expression is local to the class' body. It can be retrieved through the class' and not an instance's name property.
<syntaxhighlight lang='js'>
let Simplest = class {
  constructor(content) {
    this.content = content;
  }
}
console.log(Rectangle.name);
</syntaxhighlight>
=Syntax Elements=
==Body==
The body of a class is contained within curly braces {...}. It contains class members: constructor and methods. The body of a class is executed in [[JavaScript_Concepts#Strict_Mode|strict mode]], the code is subject to stricter syntax for increased performance, some otherwise silent errors will be thrown, and certain keywords are reserved for future versions of ECMAScript.
===Constructor===
{{External|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor}}
The constructor method is a special method for creating and initializing an object created with a class. There can only be one special method with the name "constructor" in a class. A SyntaxError will be thrown if the class contains more than one occurrence of a constructor method. A constructor can use the <code>super</code> keyword to call the constructor of the super class.
<syntaxhighlight lang='js'>
class Simplest  {
  constructor(content, size) {
    this.content = content;
    this.size = size;
  }
  ...
}
</syntaxhighlight>
Constructor invocation:
<syntaxhighlight lang='js'>
var s = new Simplest("blue")
</syntaxhighlight>
===Prototype Methods===
<syntaxhighlight lang='js'>
class Simplest  {
...
get content() {
    return.content;
}
calculateSomething() {
    return this.size * 10
}
}
</syntaxhighlight>
===Static Methods===
The <code>static</code> keyword defines a static method for a class. Static methods are called without instantiating their class and cannot be called through a class instance. Static methods are often used to create utility functions for an application.
<syntaxhighlight lang='js'>
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;
    return Math.hypot(dx, dy);
  }
}
</syntaxhighlight>
===Instance Properties===
Instance properties must be defined inside the constructor or other class methods:
<syntaxhighlight lang='js'>
class Something {
  constructor(content) {
    this.content = content;
  }
}
</syntaxhighlight>
They must be accessed while being prefixed to <code>this.</code>.
===Static Properties===
Static (class-side) data properties and prototype data properties must be defined outside of the class body declaration:
<syntaxhighlight lang='js'>
Something.somethingElse = 10;
Something.prototype.color = "blue";
</syntaxhighlight>
===Boxing with Prototype and Static Methods===
TODO: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
===Field Declarations===
TODO: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Latest revision as of 01:00, 22 January 2020

External

Internal

Overview

A JavaScript class is a syntactical superstructure in top of the language's existing prototype-based inheritance, and it does not introduce a new object-oriented inheritance model in JavaScript. A class is a special function, so like in the functions' case, a class syntax has two components: declarations and expressions.

Class Hoisting

An important difference between function declaration and class declaration is that function declaration and hoisted, while the class declarations are not: you first need to declare the class and then access it, otherwise a ReferenceError is thrown.

Declaration

Use the class keyword:

class Simplest {
  constructor(content) {
    this.content = content;
  }
}

Class Expression

A class expression is another way to define a class, and it can be named or unnamed. The name given to a named expression is local to the class' body. It can be retrieved through the class' and not an instance's name property.

let Simplest = class {
  constructor(content) {
    this.content = content;
  }
}
console.log(Rectangle.name);

Syntax Elements

Body

The body of a class is contained within curly braces {...}. It contains class members: constructor and methods. The body of a class is executed in strict mode, the code is subject to stricter syntax for increased performance, some otherwise silent errors will be thrown, and certain keywords are reserved for future versions of ECMAScript.

Constructor

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

The constructor method is a special method for creating and initializing an object created with a class. There can only be one special method with the name "constructor" in a class. A SyntaxError will be thrown if the class contains more than one occurrence of a constructor method. A constructor can use the super keyword to call the constructor of the super class.

class Simplest  {

  constructor(content, size) {
    this.content = content;
    this.size = size;
  }

  ...
}


Constructor invocation:

var s = new Simplest("blue")

Prototype Methods

class Simplest  {
 ...

 get content() {
    return.content;
 }

 calculateSomething() {
    return this.size * 10
 }
}

Static Methods

The static keyword defines a static method for a class. Static methods are called without instantiating their class and cannot be called through a class instance. Static methods are often used to create utility functions for an application.

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

Instance Properties

Instance properties must be defined inside the constructor or other class methods:

class Something {
  constructor(content) {
    this.content = content;
   }
}

They must be accessed while being prefixed to this..

Static Properties

Static (class-side) data properties and prototype data properties must be defined outside of the class body declaration:

Something.somethingElse = 10;
Something.prototype.color = "blue";

Boxing with Prototype and Static Methods

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

Field Declarations

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