I have some old code that I would like to refactor and improve, currently the code looks something like this:
function objFunction1(obj){
//do something
console.log(obj, 1);
}
function objFunction2(obj){
//do something else
console.log(obj, 2)
}
var obj = {test: true};
objFunction1(obj);
objFunction2(obj);I am thinking of makeing it into a class eg:
class item{
constructor(test){
this.test = test;
return this;
}
function1(){
console.log(this, 1);
}
function2(){
console.log(this, 2);
}
}
var obj = new item(true);
obj.function1();
obj.function2();How does JavaScript handle this? if I was to have 10,000 instances of item does JavaScript duplicate those methods for each instance or does it just store a reference to the class declaration?
what I am basically asking, is my original code more efficient?
If you have 100000 or any number of objects, but function1 and function2 will have only single copy in its prototype
Since class syntax is just syntactic sugar over the old function constructor. When you write above class syntax then the methods are declared in the prototype of that class and you can verify it as:
const obj1 = new item(true);
const obj2 = new item(false);
obj1.function1 === obj2.function1;
If obj1.function1 === obj2.function1 expression returns true then that means, there is only one function that is defined in its prototype
class item {
constructor(test) {
this.test = test;
return this;
}
function1() {
console.log(this, 1);
}
function2() {
console.log(this, 2);
}
}
const obj1 = new item(true);
const obj2 = new item(false);
console.log(obj1.function1 === obj2.function1); // trueNote: I've capitalize the first-letter of constructor function that externally specifies that it is a constructor function. It is just a convention used in JS community
The above class syntax will be equal to the following function constructor syntax as:
function function1() {
console.log(this, 1);
}
function function2() {
console.log(this, 2);
}
function Item(test) {
this.test = test;
}
Item.prototype.function1 = function1;
Item.prototype.function2 = function2;
const obj1 = new Item(true);
const obj2 = new Item(false);
console.log(obj1);
console.log(obj2);
console.log(obj1.function1 === obj2.function1);The short answer is: no.
The functions would not be duplicated; only one definition for each function would be created as the objects' prototype.
JavaScript uses prototype-based inheritance, which means that objects have a prototype that "contain" the methods shared by all the objects from the same prototype:
JavaScript is often described as a prototype-based language — to provide inheritance, objects can have a prototype object, which acts as a template object that it inherits methods and properties from.
(source: Mozilla)
If you declare two objects using the same "class" you can see that their instances are different but the methods are the same
var objA = new item(true);
var objB = new item(true);
objA === objB // false
objA.function1 === objA.function // true
You can access to the prototype of the object by using the somewhat deprecated (but still supported by Chrome) __proto__ property:
objA.__proto__ === objB.__proto__ // true
So in terms of both memory and execution time, the two options are probably nearly identical.