JavaScript Training

Goal Trainers Format

• Lecture• Exercises• Ask Questions!• bitovi/js-training

What is “this”?

var dog = {barkCount: 0,bark: function(){

this.barkCount++;}

}dog.bark();

var dog = {barkCount: 0,bark: function(){

this.barkCount++;}

}

var bark = dog.bark;bark();

window

Person = function(name){this.name = name;

}

var p = new Person("Justin Meyer")

Person = function(name){this.name = name;

}

var p = Person(“Justin Meyer”)

window

var dog = {barkCount: 0,bark: function(barks) {

this.barkCount+=barks;}

},cat = {

barkCount: 0}

dog.bark.call(cat, 1);

Summary

Rule Example

[[Call]] operator var bark = function() {};bark();

Dot [[Call]] operator var puppy = { … };puppy.bark();

‘new’ keyword var puppy = new Dog();

‘call’ or ‘apply’ var puppy = { … };Dog.bark.call(puppy, 1);

Dot.

__proto__

__proto__

var foo = {}; //same as new Object()foo.toString();

fn fnOBJECT

OBJECT

PROTOTYPE toString

foo

Object

null

// -> [object Object]

toString()this

Exercise

Write the dot operator as if it was implemented in JS.

var Person = function(name) {this.name = name;

}Person.prototype.isPerson = true;

var person = new Person('Smith');DOT(person, 'name'); //person.nameDOT(person, 'isPerson'); //person.isPerson

Hints:

• DOT takes the object and the property• DOT must walk up the __proto__ chain• object.hasOwnProperty(“PROPERTY_NAME”) returns if an

object has a ‘direct’ property.

Exercise

Write the dot [[call]] operator as if it was implemented in JS.

var Person = function(name) {this.name = name;

}

Person.prototype.speak = function(){ console.log('Hello! ' + this.name);}var person = new Person('Smith');

DOTCALL( obj, propertyName, args );DOTCALL( person, 'speak’ , [] ); //person.speak()

Hints:

• DOTCALL must retain context

foo getDay

Summary

__proto__

var d = new Date();d.foo = 'bar';d.hasOwnProperty();

__proto__

hasOwnPropertythis

OBJECTPROTOTYPEOBJECT

DATEPROTOTYPE

✓❌ ❌

d