JS: Class Without Class Keyword

By Xah Lee. Date: . Last updated: .

This page shows you how to define a class without using the keyword class [see Class] , and then another version without using any keywords class, new, this.

Suppose we want to define a class CC, with a constructor CC(x) that adds a property key kk with value x, and one prototype method ff, and one static method sm.

Here's a typical way by using the keyword class.

Using Keyword 「class」

class CC {
    constructor(x) {
        this.kk = x;
        console.log("constructor called with arg " + x)
    }
    ff (x) {console.log("ff called with arg " + x)}
    static sm (x) {console.log("sm called with arg " + x)}
}

// --------------------------------------------------
// using the class

const obj = new CC(4);
console.log(obj);
obj.ff(2);
CC.sm(3);
console.log( Reflect.getPrototypeOf ( obj ) === CC.prototype );
console.log( obj.constructor === CC );

// prints
// constructor called with arg 4
// CC { kk: 4 }
// ff called with arg 2
// sm called with arg 3
// true
// true

Without Keyword 「class」

function CC (x) {
 this.kk = x;
 console.log("constructor called with arg " + x)
};

CC.sm = function (x) {console.log("sm called with arg " + x)}

CC.prototype.ff = function (x) {console.log("ff called with arg " + x)};

// --------------------------------------------------
// using the class

const obj = new CC(4);
console.log(obj);
obj.ff(2);
CC.sm(3);
console.log( Reflect.getPrototypeOf ( obj ) === CC.prototype );
console.log( obj.constructor === CC );

// prints
// constructor called with arg 4
// CC { kk: 4 }
// ff called with arg 2
// sm called with arg 3
// true
// true

Without Keywords 「class」, 「new」, 「this」

This makes it easier to see what class is doing, because all parent child relationship are explicit. Here's the code:

const CC = (x => {
    console.log("constructor called with arg " + x);
    return Object.create ( CC.prototype, { 'kk': { value : x, writable: true, enumerable: true, configurable: true } }) } );

CC.sm = function (x) {console.log("sm called with arg " + x)};

CC.prototype = {
    ff: function (x) {console.log("ff called with arg " + x)},
    constructor:CC
};

// --------------------------------------------------
// using the class

const obj = CC(4);
console.log(obj);
obj.ff(2);
CC.sm(3);
console.log( Reflect.getPrototypeOf ( obj ) === CC.prototype );
console.log( obj.constructor === CC );

// prints
// constructor called with arg 4
// CC { kk: 4 }
// ff called with arg 2
// sm called with arg 3
// true
// true

Without Keywords 「class」, 「new」, 「this」, 「function」

const CC = (x => {
    console.log("constructor called with arg " + x);
    return Object.create ( CC.prototype, { 'kk': { value : x, writable: true, enumerable: true, configurable: true }, }) ;
} );

CC.sm = (x => {console.log("sm called with arg " + x)}) ;

CC.prototype = {
    ff: (x => {console.log("ff called with arg " + x)}) ,
    constructor:CC
};

// --------------------------------------------------
// using the class

const obj = CC(4);
console.log(obj);
obj.ff(2);
CC.sm(3);
console.log( Reflect.getPrototypeOf ( obj ) === CC.prototype );
console.log( obj.constructor === CC );

// prints
// constructor called with arg 4
// CC { kk: 4 }
// ff called with arg 2
// sm called with arg 3
// true
// true
JS in Depth
XAH
Buy Xah JavaScript Tutorial
JS in Depth
XAH

JS Obj Ref

DOM


JS in Depth

Basic Syntax

Value Types

Variable

String

Function

Property

Object and Inheritance

Array

Constructor/Class

Iterable 🌟

Regular Expression

Date

Set Object

Map Object

Number

Misc