Skip to content

Latest commit

 

History

History

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

README.md

Context Scoping

One of the most challenging tasks we have to undertake in our quest to become expert JavaScripters is developing an understanding of how scoping works, how to manipulate the this keyword, and actually being able to tell what the value of this will be in a given call stack. In section 5.1.3 we talk about scopes, this, the .apply, .call, and .bind methods, as well as the new operator.

chaos.gif

  • Function.prototype.call takes any number of arguments, the first one is assigned to this, and the rest are passed as arguments to the function that's being invoked.

  • Function.prototype.apply behaves very similarly to .call, but it takes the arguments as a single array with every value, instead of any number of parameter values.

  • Function.prototype.bind creates a special function which can be used to invoke the function it is called on. That function will always use the this argument passed to .bind, as well as being able to assign a few arguments, creating a curried version of the original function.

Currying with .bind

The .bind method can also be used to produce what's called a curried function. Currying is one of the most powerful aspects of functional programming, allowing you to "pre-apply" one or more arguments to a method. For example, you could pre-apply some arguments of a function in multiple ocassions, producing slightly different functions with pre-applied values. Here's an example.

function somethingIsSomewhere (what, where) {
  return 'The ' + what + ' is ' + where;
}

var fox = somethingIsSomewhere.bind(null, 'big brown fox');
var duckInABox = somethingIsSomewhere.bind(null, 'brownish duck', 'sitting in a box');

fox('hiding behind the bushes');
// <- 'The big brown fox is hiding behind the bushes'

duckInABox();
// <- 'The brownish duck is sitting in a box'

That strict mode

If our code is running in strict mode, then this will default to undefined, instead of Window. Outside of strict mode, this is always an object: the provided object if called with an object reference; its boxed representation if called with a primitive boolean, string, or numeric value; or the global object (again, undefined under strict mode) if called with either undefined or null. The value passed as this to a function in strict mode isn't boxed into an object.

You can read more about strict mode inside the book, and MDN also has a nice write-up on the subject you might want to check out!

Order Matters

JavaScript variables fill the scope in the order described below.

  • Scope context variables: this, and arguments
  • Named function parameters: function (these, variable, names)
  • Function expressions: function something () {}
  • Local scope variables: var foo

More information about this topic can be found on a blog post I wrote: Where does this keyword come from?