locked
JavaScript different approach to declare class and function RRS feed

  • 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