Execute the function
The most basic way of re-using the function as a method is to just define a method and execute the function. You can do
some() {
some()
}
However, here is a better way:
function some() {
console.log('some');
}
class MyClass {
constructor(name) {
this.name = name;
}
some() {
return some.call(this, ...arguments);
//alternatively:
//return some.apply(this, arguments);
}
}
const x = new MyClass("foo");
x.some();
This will ensure that you don not need to change the call if the some()
function is changed to accept parameters or to use this
or to return a value, etc. Changes to the function will not result in changes to the method.
function some(someParameter1, someParameter2) {
console.log('some', someParameter1, someParameter2);
return this.name + " says: " + someParameter1 + " " + someParameter2 + "!";
}
class MyClass {
constructor(name) {
this.name = name;
}
some() {
return some.call(this, ...arguments);
//alternatively
//return some.apply(this, arguments);
}
}
const x = new MyClass("foo");
console.log(x.some("hello", "world"));
The .call()
and .apply()
calls are equivalent here. See:
What is the difference between call and apply?
Attach as instance property
Instead of defining a method that calls a function, you can directly attach the function as a method. Then it is going to be equivalent to defining the same property on each instance:
function some() {
console.log('some');
}
class MyClass {
constructor(name) {
this.name = name;
}
some = some
}
const x = new MyClass("foo");
x.some();
Or:
function some() {
console.log('some');
}
class MyClass {
constructor(name) {
this.name = name;
this.some = some
}
}
const x = new MyClass("foo");
x.some();
It still works if the function some()
is changed without requiring and alteration to MyClass
:
function some(someParameter1, someParameter2) {
console.log('some', someParameter1, someParameter2);
return this.name + " says: " + someParameter1 + " " + someParameter2 + "!";
}
class MyClass {
constructor(name) {
this.name = name;
}
some = some
}
const x = new MyClass("foo");
console.log(x.some("hello", "world"));
Or:
function some(someParameter1, someParameter2) {
console.log('some', someParameter1, someParameter2);
return this.name + " says: " + someParameter1 + " " + someParameter2 + "!";
}
class MyClass {
constructor(name) {
this.name = name;
this.some = some
}
}
const x = new MyClass("foo");
console.log(x.some("hello", "world"));
Again, whether you attach it in the constructor or the body, you get the same behaviour. See:
JavaScript class property inside vs outside constructor
Attach to prototype
This is essentially the same as the above. But instead of each instance having the property, it is added to the prototype, so all instances share it, instead of each instance having a separate property.
MyClass.prototype.some = some;
See:
Use of 'prototype' vs. 'this' in JavaScript?
This works almost as if the function is actually defines using method syntax because in both cases the method is defined on the prototype:
class MyClass {
some() {
console.log('some');
}
}
console.log(MyClass.prototype.hasOwnProperty("some"));
The prototype approach is probably be the most idiomatic in JavaScript:
function some() {
console.log('some');
}
class MyClass {
constructor(name) {
this.name = name;
}
}
MyClass.prototype.some = some;
const x = new MyClass("foo");
x.some();
The function some()
can still vary independently of the class:
function some(someParameter1, someParameter2) {
console.log('some', someParameter1, someParameter2);
return this.name + " says: " + someParameter1 + " " + someParameter2 + "!";
}
class MyClass {
constructor(name) {
this.name = name;
}
}
MyClass.prototype.some = some;
const x = new MyClass("foo");
console.log(x.some("hello", "world"));