Scribd
Upload
42 views

Module 4 OOP - First Touch

The document provides an overview of object-oriented programming concepts in JavaScript, including: 1. Custom objects can be created using JSON syntax or constructors. Constructors are functions used to define and initialize objects with shared attributes and methods. 2. The "this" keyword refers to the context or object instance a method is called on. It allows methods like "run()" to access the correct "name" attribute of the object. 3. The "new" operator creates a new object instance, sets that object as the context ("this"), runs the constructor to initialize it, and returns the initialized object. It allows objects to be reproduced from a common definition.

Uploaded by

Юля Цуркан
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
42 views

Module 4 OOP - First Touch

The document provides an overview of object-oriented programming concepts in JavaScript, including: 1. Custom objects can be created using JSON syntax or constructors. Constructors are functions used to define and initialize objects with shared attributes and methods. 2. The "this" keyword refers to the context or object instance a method is called on. It allows methods like "run()" to access the correct "name" attribute of the object. 3. The "new" operator creates a new object instance, sets that object as the context ("this"), runs the constructor to initialize it, and returns the initialized object. It allows objects to be reproduced from a common definition.

Uploaded by

Юля Цуркан
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 24

Module 4:

OOP in JavaScript

D. Petin

06/2014
Agenda

▪ Custom objects
▪ Constructors
▪ Context and "this"
▪ Operator "new"
Custom Object
Object creation
You know that we can create a simple object in
JavaScript. We use JSON for this.

var cat = { [1]


name: “Znizhok”,
color: “white”
};
Object or Hash Table
But this way it looks like hash table creation. What is the
difference between hash table and object, then?

var hash = { [1] var object = {


key: value, key: value,
key: value key: value
}; };
Object or Hash Table
Typically we use hash table if we want to represent some
collection, and we use an object to describe some
system or entity.

var cats = { [1] var cat = {


first: murzyk, name: barsik,
second: barsyk color: white
}; };
Difference in use
There are some differences in using of hash tables and
objects as a result. For example:

cats["first"]; // good way [1]

To access elements of hash table we use indexer [ ] with key


inside. But it's incorrect for objects! For objects Operator "."
should be used :

cat["name"]; // incorrect! [2]


cat.name; // good way
Constructors
Constructors
Sometimes we need to create more than one single
object. It is not a good idea to use the literal way for this.
It will be better create a scenario for objects reproducing.

Constructor is a function that implements this


scenario in JavaScript.

Constructor consists of declaration attributes and


methods that should be added into each new object
with presented structure.
Constructors: example

function Cat (name) {


this.name = name;
this.run = function () { [1]
console.log(this.name + " run!");
};
return this;
}

var murzyk = new Cat("Murzyk"); [2]


Context and "this"
Context

Let's imagine two identical objects.


They are created by Cat constructor:

var murzyk = new Cat("Murzyk"),


[1]
barsyk = new Cat("Barsyk");
Context

If we call method run() for both cats, we’ll take


correct results:
murzyk.run(); In console:
Murzyk run!
[1]

In console:
barzyk.run();
Barsyk run!

How does the interpreter distinguish whose


name should be printed?
Context

It works because we use the next form of access to


attribute name: this.name.

this contains inside a reference to object on whose


behalf was called method run.

Such a reference is called a context.

The context determined automatically after the


method calling and can't be changed by code.
Loss of context

Be careful! There are situations when you can


lose a context. For example:
In console: [1]
setTimeout(murzyk.run, delay);
undefined run!

murzyk.run is a reference to method. And only reference


was saved in setTimeout. When the method was called
by saved reference, object window will be used as a
context and this.name (equal to window.name) was not
found.
Operator new
Pre-example

Imagine that some abstract factory produces


cars. All cars are absolutely identical:
[1]
Pre-example

But there are some emergency services and


each of them has an own color scheme for a car:

[1]
New: scenario of work

new processing has a similar scenario:


creation of default object [1]

calling of constructor with just created


object context [2]

modification of default object [3]

returning and saving the reference to


modified object
[4]

[5]
New: example

var murzyk = new Cat("Murzyk"); [1]

creation of default object [2]

var _temporary_ref = new Object(); [3]

Interpreter creates some variables for temporary storing


of reference to new object. Now it's a default object.
New: example

var murzyk = new Cat("Murzyk"); [1]

calling of constructor with just [2]


created object context

[3]
_temporary_ref.Cat();

_temporary_ref set as a context for constructor Cat.


this inside the Cat refers to as yet default object.
New: example

var murzyk = new Cat("Murzyk"); [1]

modification of default object [2]

this.name = "Murzyk";
this.run = function () { . . . }; [3]

Interpreter extends the default object inside the


constructor. If a key is not found, it will be created,
as it occurs with hashes and arrays.
New: example

var murzyk = new Cat(“Murzyk”); [1]

returning and saving the [2]

reference to modified object

var murzik = _temporary_ref; [3]

At last the reference to modified object


returned and saved in a user variable.

You might also like