Skip to content

Instantly share code, notes, and snippets.

@thecjharries
Last active May 14, 2017 15:26
Show Gist options
  • Save thecjharries/90c66b7a529c4f0d9f8aaab2ad9a358d to your computer and use it in GitHub Desktop.
Save thecjharries/90c66b7a529c4f0d9f8aaab2ad9a358d to your computer and use it in GitHub Desktop.
This is a simple working demo to illustrate the difference between the scopes of function(){} and ()=>{}
// Scopes: {title (for checkInnerScopeAgainstCallingScope), name, scope}
function determineObjectScope(inner, outer) {
console.log(` ${outer.name === 'global' ? '' : 'nested '}${inner.name} this === ${outer.name} this: ${inner.scope === outer.scope}`);
}
function functionFactory(calling) {
if (calling.name && calling.scope) {
return (function() {
return function() {
determineObjectScope({ name: 'function', scope: this }, { name: calling.name, scope: calling.scope });
};
}).call(calling.scope);
}
}
function arrowFactory(calling) {
if (calling.name && calling.scope) {
return (function() {
return () => {
determineObjectScope({ name: 'arrow', scope: this }, { name: calling.name, scope: calling.scope });
};
}).call(calling.scope);
}
}
function checkInnerScopeAgainstCallingScope(calling) {
if (calling.title && calling.name && calling.scope) {
return (function() {
console.log(`${calling.title} Scope`);
determineObjectScope(calling, globalScope);
(functionFactory(calling))();
(arrowFactory(calling))();
}).call(calling.scope);
}
return function(){console.log('Forgot something in innards arguments');};
}
const globalScope = {title: 'Global', name: 'global', scope: this };
checkInnerScopeAgainstCallingScope(globalScope);
new Promise(function(resolve, reject) {
checkInnerScopeAgainstCallingScope({ title: 'Promise(function(resolve, reject){})', name: 'Promise', scope: this });
resolve();
}).then(function() {
checkInnerScopeAgainstCallingScope({ title: 'then(function(){})', name: 'thenable', scope: this });
});
new Promise((resolve, reject) => {
checkInnerScopeAgainstCallingScope({ title: 'Promise((resolve, reject) => {})', name: 'Promise', scope: this });
resolve();
}).then(() => {
checkInnerScopeAgainstCallingScope({ title: 'then(() => {})', name: 'thenable', scope: this });
});
$ node -v
v7.10.0
$ node standard-vs-arrow
Global Scope
    global this === global this: true
    function this === global this: false
    arrow this === global this: true
Promise(function(resolve, reject){}) Scope
    Promise this === global this: false
    nested function this === Promise this: true
    nested arrow this === Promise this: true
Promise((resolve, reject) => {}) Scope
    Promise this === global this: true
    nested function this === Promise this: false
    nested arrow this === Promise this: true
then(function(){}) Scope
    thenable this === global this: false
    nested function this === thenable this: true
    nested arrow this === thenable this: true
then(() => {}) Scope
    thenable this === global this: true
    nested function this === thenable this: false
    nested arrow this === thenable this: true
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment