Difference between creating javascript objects

Objects:

var MyObj = {
    myArr: [1,2,3],
    find: function(/*some arguments*/) {
        //some logic that finds something in this.myArr
    }
}

      

        
        
        
      

    

The function MyObj.find

keyword this

will point to MyObj

(which is somewhat reminiscent of how it this

works in languages ​​that have classes). You can use this functionality to do mix-ins :

var MyObj2 = {
    myArr: [4,2,6]
}

MyObj2.find = MyObj.find;

      

        
        
        
      

    

The function MyObj2.find

keyword this

will point to MyObj2

.

Also objects support getters and setters (works on IE9 + and all good browsers):

var MyObj = {
    myArr: [1,2,3],
    find: function(/*some arguments*/) {
        //some logic that finds something in this.myArr
    },
    get maxValue() {
        return Math.max.apply(null, this.myArr);// maxValue is calculated on the fly
    },
    a_: null,
    get a () {
        return this.a_;
    },
    set a (val) {
        //fire a change event, do input validation
        this.a_ = val;
    }
}

      

        
        
        
      

    

Now you can get the maximum value in the array as follows: MyObj.maxValue

. I also added a property a_

. It cannot be named the same as its getter and setter, so an underscore is added. Adding or adding an underscore is a naming convention for private variables that should not be accessed directly.

var qwe = MyObj.a // get a_
MyObj.a = 'something'; //set a_

      

        
        
        
      

    

Functions:

var u = new Uploader(); // will throw an exception
var Uploader = function() { }

      

        
        
        
      

    

Loading is done at runtime. It doesn't exist yet when I try to create it.

var u = new Uploader(); //will work
function Uploader() {}

      

        
        
        
      

    

The uploader is defined at compile time here for it to work.

Functions can be used with a dropdown pattern to hide some members. Functions do not support getters and setters, but you can place objects inside functions.

function myFunc() {
    function privateFunc() {};
    function publicFunc() {};
    var obj = {
        //members, getters, setters
    };
    return {
       publicFunc: publicFunc,
       obj: obj
    }
}

      

        
        
        
      

    

You can call muFunc.publicFunc()

outside myFunc

because it returns. But you cannot use privateFunc

outside, because it does not return. A pattern feature elicitation usually does not need to be created. This is because when you create an instance, everything inside will be copied to the new instance. Therefore, it will use more memory than if you added functions with prototype

.

myFunc.prototype.someFunc = function() {};

      

        
        
        
      

    

Likewise, all instances myFunc

will share the same instance someFunc

.

Conclusion: with functions you can model an access modifier private

, but in objects the keyword this

acts somewhat similar to what you would expect in a language that has classes. But you can always use call

, apply

and bind

to change the context (i.e. what is the 'this' keyword) for a function.