Remove From My Forums

JavaScript different approach to declare class and function

Question

User1183902823 posted

see 3 different approach to create js class and object.

Approach 1
--------------
function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo1 = function() {
        return this.color + ' ' + this.type + ' apple';
    };
}

Apple.prototype.getInfo2 = function() {
    return this.color + ' ' + this.type + ' apple';
};

var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo1());
alert(apple.getInfo2());

Approach 2
--------------

var apple = {
    type: "macintosh",
    color: "red",
    getInfo: function () {
        return this.color + ' ' + this.type + ' apple';
    }
}
// calling this way
apple.color = "reddish";
alert(apple.getInfo());

Approach 3
--------------
var apple = new function() {
    this.type = "macintosh";
    this.color = "red";
    this.getInfo = function () {
        return this.color + ' ' + this.type + ' apple';
    };
}

// calling this way
apple.color = "reddish";
alert(apple.getInfo());

why different approach take to declare a function with apple class

    getInfo: function () {
        return this.color + ' ' + this.type + ' apple';
    }

    this.getInfo = function () {
        return this.color + ' ' + this.type + ' apple';
    };

some time they : function and some time they = then function name....why?

how could a declare private function inside apple class?

code taken from https://www.phpied.com/3-ways-to-define-a-javascript-class/

guide me.

Saturday, November 25, 2017 7:12 PM

Answers

User-474980206 posted

everything in javascript is a function even functions. also function/object in javascript use prototype inherence rather than class (even if you use es6 classes). the result of calling a function constructor is a new object. the constructor can add properties via the "this" reference.

// declare a variable and set to an anonymous function
var Apple1  = function() {
    this.getColor = function() {return "RED";};
}
// declare a function variable ("Apple")
function Apple2() {
    this.getColor = function() {return "RED";};
}
// declare an object variable with function property
var Apple3 = {
    getColor: function() {return "RED";}
}
// set a variable to result of calling anonymous function constructor
var Apple4  = new function() {
    this.getColor = function() {return "RED";};
}
// set a variable to result of calling defined function constructor
var Apple5 = new Apple1(); 

console.log(typeof Apple1); // function
console.log(typeof Apple2); // function
console.log(typeof Apple3); // object
console.log(typeof Apple4); // object
console.log(typeof Apple5); // object

// call methods
console.log(new Apple1().getColor()); // "RED"
console.log(new Apple2().getColor()); // "RED"
console.log(Apple3.getColor()); // "RED"
console.log(Apple4.getColor()); // "RED"
console.log(Apple5.getColor()); // "RED"

// prototype inhertance

//update Apple1's prototype 
Apple1.prototype.say = function() { return "hi";};

// call
console.log(new Apple1().say()); // "hi"

// because Apple5 has the same prototype as Apple1 via inhertance
console.log(Apple5.say()); // "hi"

the other thing to understand is the new operator. it equivelent to:

// define function
function foo() {
   this.name="foo";
}

// use new keyword
var f1 = new foo();

// use call
var f2 = {};
foo.call(f2);

console.log(f1.name); // "foo"
console.log(f1.name); // "foo"

//special note:
foo();
// is the same as foo.call(window);
console.log(name); // "foo"

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Saturday, November 25, 2017 10:19 PM

Answered by:

JavaScript different approach to declare class and function

Question

Answers