Object Oriented JavaScript Part 1

David Tang / ITP 404 / 2015

What are Objects?

Objects are containers for a collection of related variables (properties) and functions (methods)

document

window

document.URL
document.getElementById()
document.getElementsByTagName()
document.querySelector()
window.alert()
window.parseFloat()
window.parseInt()
window.document == document

When accessing a global variable, window is implied

Object Literals

var cat = {
  name: 'Fiona',
  age: 1.5,
  'for': 'David',
  siblings: ['Chestnut', 'Biscuit']
};

Object keys must:

  • start with a letter, dollar sign, or underscore
  • only contain alphanumeric characters, underscores, and dollar signs
  • cannot be a reserved word in JS
  • If you must use a reserved word or a special character for the key name, you must put the key in quotes

Object keys can contain:

  • strings
  • numbers
  • booleans
  • arrays
  • functions
  • other objects

Read properties

Change properties

var cat = {
  name: 'Fiona',
  age: 1.5,
  siblings: ['Chestnut', 'Biscuit']
};

console.log(cat.name); // Fiona
cat.name = 'Chestnut';
cat.color = 'white';

Write properties

Dot Notation

var cat = {
  name: 'Fiona',
  age: 1.5,
  siblings: ['Chestnut', 'Biscuit'],
  meow: function() {
    console.log(cat.name);
  }
};
cat.meow();
var cat = {
  name: 'Fiona',
  age: 1.5,
  siblings: ['Chestnut', 'Biscuit'],
  meow: function() {
    console.log(this.name); // Fiona
  }
};

"this"

Methods

function getTweets(user, count, startDate, stopDate) {
  // the order of these params might be hard to remember
}

getTweets('BurnNoticeUSA', 10, '2013-05-12', '2013-09-22');

Objects as function arguments

eliminates the need to specify the function arguments in a specific order

function getTweets(properties) {
  // properties.user
  // properties.count
}

getTweets({
  stopDate: '2013-09-22',
  count: 10,
  startDate: '2013-05-12',
  user: 'BurnNoticeUSA'
});

Bracket Notation

var config = {
  url: 'some-url-here',
  apiKey: '90399492',
  ajaxRoute: 'some-ajax-route'
};

config['url'];
config['apiKey'];
var apiKey = 'apiKey';
config[apiKey];

variable as a key

Bracket Notation

var searchCache = {};

function search(term) {
  var results;

  if (searchCache[term]) {
    return searchCache[term];
  } else {
    results = getResults(term);
    searchCache[term] = results;
    return results;
  }
}

For...in Loop

var config = {
  url: 'some-url-here',
  apiKey: '90399492',
  ajaxRoute: 'some-ajax-route'
};

for (var key in config) {
  console.log(key, config[key])
}

// url, 'some-url-here'
// apiKey, '90399492'
// ajaxRoute: 'some-ajax-route'

Namespacing

var APP = {
  Utils: {}
};

APP.Utils.log = function() { /* implementation */ };
APP.Utils.isNumber = function() { /* implementation */ };
APP.Player = {
  playlist: [ /* list of songs here */ ],
  play: function(song) { /* implementation */ },
  pause: function(song) { /* implementation */ },
  stop: function(song) { /* implementation */ }
};

organize units of code using nested object literals, similar to a directory structure, or packages in other languages

create self-contained units that represent different widgets on the page or modules

'this'

var cat = {
  name: 'Fiona',
  age: 1.5,
  siblings: ['Chestnut', 'Biscuit'],
  meow: function() {
    console.log(this.name); // Fiona
  }
};

The value of 'this' is determined when a function is invoked. 

There are a few rules to follow to determine what this is.

1st Rule for 'this'

function hi() {
    console.log(this);
}

hi(); // window

Simple function calls

2nd Rule for 'this'

var cat = {
  name: 'Fiona',
  age: 1.5,
  siblings: ['Chestnut', 'Biscuit'],
  meow: function() {
    console.log(this.name); // Fiona
  }
};

cat.meow();

Method calls on objects

2nd Rule for 'this'

var person = {
    hi: function() {
        function hi2() {
            console.log(this);
        }

        hi2();

        console.log(this);
    }
};

person.hi();

Method calls on objects

What will be logged?

// window
// person

2nd Rule for 'this'

var person = {};

function hi() {
    console.log(this);
}

person.hi = hi;

Method calls on objects

person.hi();
hi();

What is this?

// person
// window

Remember, 'this' is determined when a function is called

More Rules

  • The "new" operator
  • Function.prototype.call()
  • Function.prototype.apply()
  • Function.prototype.bind()

We will look at these later in the semester

jQuery and 'this'

$('#save').on('click', function() {
    // 'this' refers to the save button DOM node with an id of 'save'
    // 'this' is the same as document.getElementById('save')
    // 'this' is the same as document.querySelector('#save')
});

jQuery manipulates what 'this' refers to for your convenience

var Form = {
    setup: function() {
        this.validateForm();

        $('#save').on('click', function() {
            // how do I call validateForm here?
        });
    },

    validateForm: function() {

    }
};

Form.setup();
var Form = {
    setup: function() {
        var self = this;

        $('#save').on('click', function() {
            self.validateForm();
        });
    },

    validateForm: function() {

    }
};

Form.setup();

Demo

Made with Slides.com