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

Buy JavaScript in Depth

JavaScript in Depth

JS Obj Ref

DOM


JavaScript 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