JavaScript - Stuff you should know..

Truth vs Falsey

What is 'this'??

EVERYTHING in JavaScript can be evaluated to True of False!

• Its NOT the same as 'this' in Java
• 'this' in JavaScript depends on HOW the method was invoked!

The 4 Invocation Methods

• apply/call
• constructor - new XXX()
• function invocation
• method invocation

Method

When a function is invoked as a method on an object, then 'this' refers to the object itself.

Apply/Call

var Cat = function(name, color){

this.name = name;

this.color = color;

this.sayMyName = function(){

alert(this.name);

}

}

var myCat = new Cat('meowy', 'black');

alert(myCat.name); //meowy

myCat.sayMyName(); //meowy

'this' is what you tell it to be....

Function

Constructor

var dog = {

name : 'wolfy'

}

var sayMyName = function(){

alert(this.name);

};

sayMyName.call(dog);

When a function is executed as a function, 'this' is referring to the global window object...

var Cat = function(name, color){

this.name = name;

this.color = color;

}

var myCat = new Cat('meowy', 'black');

alert(myCat.name); //meowy

function doSomething(){

this.name = 'John'

}

doSomething();

alert(name); //John!

Undefind != Undeclared

Falsies..

var foo;

if (!foo){

alert('foo is undefined!');

}

if (!bar){

// bar is undeclared!!

// This will error!

}

All these are falsey:

• false
• 0 (Zero)
• null
• undefined
• NaN (Not a Number)

So you can do this..

var x = "false";

if (x){

alert('String false is true!');

}

var f = function(){

...

}

if (f){

alert('Function is an object and an object is truthy!');

}

JavaScript - Stuff you should know..

JavaScript Basics

- Jeff Lau

• Truthy and Falsey
• == and ===?
• Function is a first class object
• What is 'This'?
• Prototypal Inheritance

Function as First Class Object

Special Methods

It can be passed as an arg

• .apply(ctx, [args, ... ])
• .call(ctx, arg1, arg2, arg3 ...)
• ... and a few others I don't care about..

An Example ....

var dog = {

name : 'wolfy'

}

var sayMyName = function(){

alert(this.name);

};

sayMyName.call(dog);

var saySomething = function(something) {

alert(something);

}

var executeFunction = function(functionToRun){

var str = 'hi';

functionToRun(str);

}

executeFunction(saySomething);

== vs ===

Function is just another object ... with a few special inherited methods..

var one = 1;

var oneStr = '1';

alert(one == oneStr); // True

alert(one === oneStr); // False

They say...

• Always use ===
• I say .... try to use ===,
• and but if you have to use == be aware what its doing..

Prototypal Inheritance

JavaScript is NOT a Classical language like java ... no 'extends' .. no 'implements' .... but there is a different type of inheritance..

How how do we define our Inheritance?

How JavaScript Resolves a property...

• You can't just set the secret __proto__ property

• When you create a NEW object, the new object's __proto__ is defined to be the Constructor Functions .prototype property.

• Only the "constructor" can set the __proto__ property

• Every object has a hidden __proto__ property.
• This property is a reference to another object that this object inherits from.
• At the root of the chain its an Object.prototype
• Object.prototype.__proto__ is null (which signals end of chain)

An example ...

var DogClass = function(name){

this.name = name;

this.id = DogClass.prototype.dogCounter;

DogClass.prototype.dogCounter++;

}

DogClass.prototype = {

sayMyName : function(){

alert(this.name);

},

dogCounter: 0

}

var myDog = new DogClass('wolfy');

var myDog2 = new DogClass('dolly');

myDog.sayMyName();

myDog2.sayMyName();

alert(myDog.id);

alert(myDog2.id);