You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
3.5 KiB
152 lines
3.5 KiB
# Object Oriented Design in Javascript
|
|
|
|
## Lesson Objectives
|
|
|
|
1. Use JavaScript objects to model the real world
|
|
1. Assign functions to variables and properties of objects
|
|
1. Use methods to access properties of the object
|
|
1. Use constructor functions to make creating multiple similar objects easy
|
|
1. Create a base class which can be used to create child classes
|
|
|
|
## Use JavaScript objects to model the real world
|
|
|
|
Objects in javascript are just key/value pairs
|
|
|
|
```javascript
|
|
var matt = {
|
|
age: 36,
|
|
eyes: 'blue',
|
|
name: 'Matt'
|
|
}
|
|
```
|
|
|
|
Can retrieve values using dot notation
|
|
|
|
```javascript
|
|
matt.age //returns 36
|
|
```
|
|
|
|
Can modify an object's properties like so:
|
|
|
|
```javascript
|
|
matt.age = 40;
|
|
matt.eyes = 'green';
|
|
```
|
|
|
|
## Assign functions to variables and properties of objects
|
|
|
|
Functions are objects and can be assigned to variables
|
|
|
|
```javascript
|
|
var myFunc = function(){
|
|
console.log('hi!');
|
|
}
|
|
|
|
myFunc();
|
|
```
|
|
|
|
Functions can be assigned to properties of objects. These functions are referred to as methods of the object. It's like having the object perform an action.
|
|
|
|
```javascript
|
|
var matt = {
|
|
sayHello: function(){
|
|
console.log('Hello, my name is Matt!');
|
|
}
|
|
}
|
|
|
|
matt.sayHello();
|
|
```
|
|
|
|
## Use methods to access properties of the object
|
|
|
|
When invoking methods, you can reference other properties of the object with the keyword `this`
|
|
|
|
```javascript
|
|
var matt = {
|
|
name: 'Matt',
|
|
greet: function(){
|
|
console.log('Hello! My name is' + this.name);
|
|
}
|
|
}
|
|
|
|
matt.greet(); //logs 'Hello! My name is Matt'
|
|
```
|
|
|
|
## Use constructor functions to make creating multiple similar objects easy
|
|
|
|
If you need to create multiple objects of the same type, object literals (`{ property:'value'}`) can be inefficient. We can create constructor functions, which act like a blueprint (or class) for creating classes.
|
|
|
|
```javascript
|
|
var Person = function(){
|
|
this.numArms = 2; //use the this keyword to create properties and methods
|
|
this.numLegs = 2;
|
|
}
|
|
|
|
var me = new Person(); //use the new keyword to instantiate a new object
|
|
var someoneElse = new Person();
|
|
console.log(me);
|
|
console.log(someoneElse);
|
|
```
|
|
|
|
We can pass parameters into constructor functions to make instances unique
|
|
|
|
```javascript
|
|
var Person = function(name){
|
|
this.name = name;
|
|
this.numArms = 2; //use the this keyword to create properties and methods
|
|
this.numLegs = 2;
|
|
}
|
|
|
|
var me = new Person('Matt'); //use the new keyword to instantiate a new object
|
|
var someoneElse = new Person('Joey Jo-Jo Junior Shabadoo');
|
|
console.log(me);
|
|
console.log(someoneElse);
|
|
```
|
|
|
|
Methods are added just like adding properties
|
|
|
|
```javascript
|
|
var Person = function(name){
|
|
this.name = name;
|
|
this.numArms = 2; //use the this keyword to create properties and methods
|
|
this.numLegs = 2;
|
|
this.sayHello = function(){
|
|
console.log("Hello, my name is " + this.name);
|
|
}
|
|
}
|
|
|
|
var me = new Person('Matt'); //use the new keyword to instantiate a new object
|
|
me.sayHello();
|
|
```
|
|
|
|
<!-- Since functions are objects, we can create static properties/methods (properties and methods that relate to the class, not the instances of the class) by using dot notation
|
|
|
|
```javascript
|
|
var Person = function(){
|
|
/*
|
|
usual stuff here...
|
|
*/
|
|
}
|
|
|
|
Person.genders = ['male', 'female'];
|
|
console.log(Person.genders);
|
|
``` -->
|
|
|
|
## Create a base class which can be used to create child classes
|
|
|
|
We can have a "class" inherit from another class, using the `.call` static method of a function
|
|
|
|
```javascript
|
|
var Car = function(){
|
|
this.wheels = 4;
|
|
}
|
|
|
|
var Humvee = function(){
|
|
Car.call(this);
|
|
this.numAmericanFlags = 4;
|
|
}
|
|
|
|
var murica = new Humvee();
|
|
console.log(murica);
|
|
```
|