Context & Prototypes

in JavaScript

Curriculum created and presented by

Jeff Lee

@RebootJeff

Who is Jeff?

Full-Stack JavaScriptivore

@RebootJeff

Class Format

  • Silence your phones please!
  • Ask questions (between slides if possible)
  • Answer questions
  • Show thumbs
  • Ask for help during exercises
    • But don't expect to be handed solutions

Context

Keyword: `this`

Question:

In English, the word "this"
refers to... what exactly?

Answer:

It depends on the context.

So what is runtime context?

Question:

What about in JavaScript?

Answer:

It depends on runtime context.

Different Contexts

  • Global Context
  • Function Contexts
    • Free Function Invocation
    • Method Invocation
    • Constructor Invocation
    • Invocation via Call & Apply
    • Invocation after Binding
  • Special Contexts
    • DOM event handlers
    • Frameworks and Libraries

Global / Free Function Invocation

console.log(this);

function checkThisOut() {
  console.log(this);
}

checkThisOut();

For these contexts:

this === window

Method Function Invocation

(with JS objects)

function makeTeacher(name) {
  var newTeacher = {};

  newTeacher.name = name;
  newTeacher.sayName = function() {
    console.log('Hi! My name is', this.name);
  };

  return newTeacher;
}
 
var teacher = makeTeacher('Jeff Lee');

teacher.sayName();

Constructor Invocation

function Teacher(name) {
  this.name = name;
}

Teacher.prototype.sayName = function() {
  console.log('Hi! My name is', this.name);
};

var teacher = new Teacher('Jeff');

teacher.sayName();

(with JS pseudo-classes)

.call() & .apply()

function sayGreeting(extraMsg1, extraMsg2) {
  console.log('Hi! My name is', this.name);
  if(extraMsg1) console.log(extraMsg1);
  if(extraMsg2) console.log(extraMsg2);
}

var person = { name: 'Jeff' };

var jobTitleMsg = 'I am a programmer';
var question = 'What is your name?';
sayGreeting.call(person, jobTitleMsg, question);

var extraMessages = [jobTitleMsg, quesiton];
sayGreeting.apply(person, extraMessages);

Function methods for invoking a function

after setting its context and passing arguments.

.bind()

function sayGreeting(extraMsg1, extraMsg2) {
  console.log('Hi! My name is', this.name);
  if(extraMsg1) console.log(extraMsg1);
  if(extraMsg2) console.log(extraMsg2);
}

var person = { name: 'Jeff' };

var jobTitleMsg = 'I am a programmer';
var question = 'What is your name?';

var x = sayGreeting.bind(person, jobTitleMsg, question);
x();

Function method for making a new function

after setting context and passing arguments.

Special Contexts

// Example: Native Click Event Handler
var myButton = document.getElementByTag('button');
myButton.addEventListener('click', function() {
  console.log('What is this?', this);
});

// Example: jQuery Click Event Handler
$('button').click(function() {
  console.log('What is this?', this);
});

// Example: AngularJS Controller
angular.module('myApp').controller(function() {
  console.log('What is this?', this);
});

DOM Event Handlers: `this` === current DOM element

Libraries & Frameworks: `this` refers to specific part

Prototypes

What is a prototype?

What is the prototype chain?

Intro to

Inheritance

Intro to

Composition

(incomplete draft) Context and Prototypes in JS

By rebootjeff

Made with Slides.com

(incomplete draft) Context and Prototypes in JS

  • 973

More from rebootjeff