$ 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
Last active
May 14, 2017 15:26
-
-
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 ()=>{}
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 }); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment