Global Object, Methods, This

A Closer Look

Let's check out:

• global object
• methods
• and this

 

The Global Object

What's the name of the global object in node (pssst… the answer is right there)? →

I gave that one away; it's… global

Let's check out what's in the global object right now!

console.log(global)

And let's try (inadvertently, of course. oops!) adding something to the global object:

function makeMessage() {
	// oops, forgot var/let/const... I'm a global!
	message = 'hello there';
}
makeMessage();
console.log(message);
console.log(global.message);

(oh yeah, in the browser, the global object is window)

A Variable That's Not There Yet

And… what do I get if I try to print out a property on the global object that doesn't exist? →

console.log(global.surprise);

undefined

// just like accessing a property that doesn't exist
// on any ol' object:

obj = {};
console.log(obj.unicorn);

 

Methods

What's a method? →

• a method is an object property that is a function (or a function within the context of an object).
• you can create methods pretty easily…

const person = {};
person.emote = function() {
	console.log('(っ˘̩╭╮˘̩)っ'); 
};
person.emote(); // sad face - (っ˘̩╭╮˘̩)っ

To call a method on an object, use:

• the object's name
• followed by a dot,
• then a method name
• …and finally parentheses (with an optional list of arguments!)

 

Functions

When a function is invoked, it has access to its declared parameters. It also has access to two additional parameters. What are they? →

• this
• arguments

What's the arguments object? →

arguments is an array like object that contains all of the arguments (surprise!) passed in to a function. What is the preferred way of declaring an arbiratry number of parameters for a function in ES6, though →

use the rest operator: ...args

With arguments/...args out of the way, let's talk about this (but before we do, a detour)→

Executing a Function

There are actually a few different ways (patterns) that a function can be called. What are some ways of executing a function that we've seen so far? →

• as a regular function: myFunction()
• as a method if the function is attached to an object: obj.myFunction()
• via a method on a function object (!) (you remember those, right? →)
  • call
  • apply
  • bind

Depending on which invovaction pattern we use, a function's this is bound to a different value. →

A function's this varies based on how the function is invoked!

Calling a Method, This

When a function is invoked as a method, this is bound to the object that it's called on. Here's an example. →

function showEmotion() {
	console.log(this.emotion);
}

const person1 = {emotion:"(• ε •)", emote: showEmotion};
const person2 = {emotion:"(╯°□°）╯︵ ┻━┻", emote: showEmotion};

person1.emote(); // (• ε •)
person2.emote(); // (╯°□°）╯︵ ┻━┻

 

function showEmotion() {
	console.log(this.emotion);
}

const person1 = {emotion:"(• ε •)", emote: showEmotion};
const person2 = {emotion:"(╯°□°）╯︵ ┻━┻", emote: showEmotion};

person1.emote(); // (• ε •)
person2.emote(); // (╯°□°）╯︵ ┻━┻

 

In methods, this refers to the object that the method was called on.

What About 'Regular' Functions?

If a function that's not attached to an object is invoked, its this refers to the global object (uh, bad. maybe?). What will the following code print out? →

function returnThis() {
	return this;	
}

console.log("Is global the same as function? " + (returnThis() === global));

Is global the same as function? true

this refers to the global object when a regular function is invoked.

So here's our function and function call again:

function showEmotion() {
	console.log(this.emotion);
}

showEmotion();

Hmmm. First we have to figure out what this refers to when the function that's not the property of an object is invoked →

It refers to the global object. Accessing a value that doesn't exist will yield… →

// our good friend...
undefined

 

In regular functions (not bound to an object), this refers to the global object.

Using Apply, Call, Bind

The last way (at least the last way we've seen… we'll see another shortly) we can invoke a function is by calling the following methods on a function object: apply, call or bind

Let's review what these functions do. Does anyone remember? →

• call - calls a function with given this and individual arguments
• apply - calls a function with given this and array as arguments
• bind - creates a new function with given this, and optionally with set argument values

What argument does each of these methods have in common!? →

this one ←, right here.

 

Apply, Call, Bind and This

So. There's a clue!

What will this code print out? →

function showEmotion() {
	console.log(this.emotion);
}
const justAnotherObject = {emotion:'(=^ェ^=)'};
showEmotion.call(justAnotherObject);

(=^ェ^=)

 

Another Example

This time, with bind. Notice that bind returns a new function that's bound to the object that's passed in.→

function showEmotion() {
	console.log(this.emotion);
}

const justAnotherObject = {emotion:'(=^ェ^=)'};

const boundShowEmotion = showEmotion.bind(justAnotherObject);

boundShowEmotion();

// prints out:
(=^ェ^=)

 

Neat, eh? Call, Apply, and Bind allow a function's this object to be explicitly set.

Summary

There are three patterns we've seen for invoking functions. Name those three patterns, and what this refers to each. →

• method invocation - this refers to the object the method was called on
• function invocation - this refers to the global object
• apply, call, and bind - this is whatever you pass in as the first argument