Overview
| Excerpt |
|---|
For the terminally-inquisitive, here's how backport works... |
All of the API features are locked so they can't be altered by scripts. However, Javascript has many tricks up it's sleeves that allow us to overcome such obstacles.
Where does the JS API live?
In order to understand how Backport.js works, you first need to understand where the JS API features live within the Javascript environment. It took quite a lot of digging, but eventually it was confirmed that the API was exactly where it was supposed to be; on the "global object".
There's a huge amount of confusion about just what exactly is the "global object", in particular the fact that it's not the same as the "global scope" catches most people out. I must admit that I'm still quite confused by it myself at times, but hopefully I can help explain things a little...
What is the scope chain?
When you reference something (like a variable, constant or function) within one of your functions, Javascript goes to great lengths to find it for you.
It checks what's known as the "Scope chain" from left to right to see if your variable is in there. Here's a very simplistic view of what the scope chain looks like:
Block scope (if applicable) → Function scope → Closure scope chain → Global scope → Global object
...
Most of your code runs in the global scope, such as your Event handlers and other top-level functions that they call. Unfortunately you can't define overrides in there because Javascript will find the original API features living in the global scope, see that they are locked, and throw a big fat error at you.
...
Furthermore, to make things a little more descriptive, any functions that we override (to expose upgraded/extended alternatives) have a {{.native}} property property that points back to the original JS API function.
For more information, see Accessing native API features.