Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ❀ đŸ’»
We are community of people that helps each other.

If you are beginner in IT field, you are more then welcome to ask questions, it will help you to learn faster. We are here to help you.

We are always beginner in something, we just need to remember it along the way.

there are no wrong questions - Ask Question

JavaScript - interesting trick, it is possible to create both class and function in one definition

1 contributions
14 points

In this article, we're going to have a look at how to create class that allows user to create object with or without new operator in JavaScript.

Overview:

function MyClass() { }

// how to make new operator optional?
var object1 = MyClass();
var object2 = new MyClass();

Simple problem solutions are presented below:

1. Optional new operator for class object with strict mode example

In this case recept how to make new object for same class definition with and without new keyword with strict mode is described.

Note: this approach works for web broser and NodeJS JavaScript with strict mode.

// ONLINE-RUNNER:browser;

'use strict'; // optional for NodeJS

var ClassFunction = function() {
    var self = this || { };
  
  	self.printText = function(text) {
        console.log(text);
    };

    return self;
};

var object1 = ClassFunction();
var object2 = new ClassFunction();

object1.printText('This text comes from function result object!');
object2.printText('This text comes from class instance object!');

2. Optional new operator for class object without strict mode example

In this case recept how to make new object for same class definition with and without new keyword without strict mode is described.

2.1. Dedicated runtime environment example

Note: this approach requires to adjust source code for web browser or node js - look on comment - to solve this problem check example 2.

// ONLINE-RUNNER:browser;

var ClassFunction = function() {
    var self = (this == window || this == null ? { } : this); // for web browser
    // var self = (this == global || this == null ? { } : this); // for nodejs
  
  	self.printText = function(text) {
        console.log(text);
    };

    return self;
};

var object1 = ClassFunction();
var object2 = new ClassFunction();

object1.printText('This text comes from function result object!');
object2.printText('This text comes from class instance object!');

2.2. Web browser or NodeJS auto detecting

This universal approach is useful to write code for web browser and node js both.

// ONLINE-RUNNER:browser;

function getRoot() {
    if (typeof window != 'undefined') {
      	return window;
    }

    if (typeof global != 'undefined') {
      	return global;
    } 

  	throw new Error('Unsupported platform!');
}

var root = getRoot();

root.createScope = function(self) {
  	return (self == root ? { } : self);
};

// Example:

var ClassFunction = function() {
    var self = createScope(this);
  
  	self.printText = function(text) {
        console.log(text);
    };

    return self;
}

var object1 = ClassFunction();
var object2 = new ClassFunction();

object1.printText('This text comes from function result object!');
object2.printText('This text comes from class instance object!');
1 contributions
3 points

With instanceof operation it works well too.

// ONLINE-RUNNER:browser;

'use strict';

var ClassFunction = function() {
    var self = this;
  
  	if (self instanceof ClassFunction) {
    	self.printText = function(text) {
        	console.log(text);
    	};
    } else {
    	return new ClassFunction();
    }
};

var object1 = ClassFunction();
var object2 = new ClassFunction();

object1.printText('This text comes from function result object!');
object2.printText('This text comes from class instance object!');

 

0 comments Add comment

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more