Javascript Objects

Contents

  • Object
  • Notations
  • 'this' Keyword
  • OO & instances

Object

  • An object is a collection of related data and/or functionality.
  • usually consists of several variables and functions — which are called properties and methods when they are inside objects.
var person = {};

var objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value
}

Object...

e.g.

var person = {
  name: ['Bob', 'Smith'],
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  bio: function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};



person.name[0]
person.age
person.bio()
person.greeting()

Notations

  1. Dot Notation

- We can access the object's properties and methods using dot notation.



e.g.
person.age
person.interests[1]
person.bio()

Notations

1. Dot Notation

- We can access the object's properties and methods using dot notation.



e.g.
person.age
person.interests[1]
person.bio()

Notations...

2. Sub-namespaces

- It is even possible to make the value of an object member another object.

name: ['Bob', 'Smith'],

e.g. 
name : {
  first: 'Bob',
  last: 'Smith'
}

person.name.first
person.name.last

Notations...

3. Bracket Notation

- Useful for accessing or setting value or property dynamically

person['age']
person['name']['first']


Setting object members:

person.age = 45
person['name']['last'] = 'Cratchit'
person['eyes'] = 'hazel'

var myDataName = 'height'
var myDataValue = '1.75m'
person[myDataName] = myDataValue

'this' Keyword

  • refers to the current object the code is being written inside
  • Why to use 'this' instead of object name already? ensures that the correct values are used when a member's context changes 

var person1 = {
  name: 'Chris',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

var person2 = {
  name: 'Brian',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

Constructors & Object Instances

  • JavaScript uses special functions called constructor functions to define objects and their features - no class statement.
  • functionality is linked to via a reference chain called a Prototype Chain unlike classic OOP language where functionality is copied all over to new object
  • not true instantiation — JavaScript uses a different mechanism to share functionality between objects.
  • JavaScript has some nice ways to take advantage of OO features without having to get too deep into it.
  • Convention:  A constructor function name usually starts with a capital letter
//Object Literal: function returns a new object
function createNewPerson(name) {
  var obj = {};
  obj.name = name;
  obj.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
  return obj;
}

var salva = createNewPerson('Salva');
salva.name;
salva.greeting();

______________________________________________

//Constructor Example
function Person(name) {
  this.name = name;
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
}

var person1 = new Person('Bob');
person1.greeting();
var person1 = new Object();

person1.name = 'Chris';
person1['age'] = 38;
person1.greeting = function() {
  alert('Hi! I\'m ' + this.name + '.');
};


/** OR **/

var person1 = new Object({
  name: 'Chris',
  age: 38,
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
});

The Object() constructor

- generic objects have a constructor, which generates an empty object.

var person2 = Object.create(person1);

person2.name
person2.greeting()

// Check constructor part
person1.constructor
person2.constructor

Using the create() method

- create a new object instance based on an existing object.

function Person(first, last, age, gender, interests) {

  // property and method definitions

};

var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing']);

Person.prototype.farewell = function() {
  alert(this.name.first + ' has left the building. Bye for now!');
}


person1.farewell();

Modifying prototypes

function Teacher(first, last, age, gender, interests, subject) {
  Person.call(this, first, last, age, gender, interests);

  this.subject = subject;
}

// We need to get Teacher() to inherit the methods defined on Person()'s prototype
Teacher.prototype = Object.create(Person.prototype);

// Constructor is changed to Person, Change constructor back to Teacher
Teacher.prototype.constructor = Teacher;

Inheritance

Questions?

Javascript OOP

By Datt Dongare

Made with Slides.com

Javascript OOP

Javascript OO Features, object, prototypes

  • 614

More from Datt Dongare