thislang
cycle
Our great sponsors
thislang | cycle | |
---|---|---|
4 | 1 | |
33 | 0 | |
- | - | |
0.0 | 0.0 | |
over 1 year ago | over 2 years ago | |
JavaScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
thislang
-
Understanding `this` in Javascript
Method calls are nothing special, just calls which have the form .(). For example: const foo = { bar: function () { console.log(this); } }; foo.bar(); Enter fullscreen mode Exit fullscreen mode For method calls, this gets set to the object from which the method was called. Again, functions don't matter* for this, just the calls. function foo() { console.log(this); } let x = { bar: foo }; foo(); // Window x.bar(); // x let baz = x.bar; baz(); // Window Enter fullscreen mode Exit fullscreen mode Even baz will print Window. It's not a method call, it doesn't follow the method call format! 3. Constructor calls Or new calls (are calls too I suppose). In that case this gets set to the empty object {}. function Foo() { console.log(this); } new Foo(); // {} Foo(); // Window let x = { foo: Foo }; x.foo(); // x Enter fullscreen mode Exit fullscreen mode That's pretty much all there is to it......... ........or is it?! I apologize for this Remember how I told you this is all about function calls, not the functions themselves? Well, I lied. Ok look, let me remind you once again: They made javascript in 10 days! The this rules we've discussed above, they are a bit limiting. So there's three* ways you can override these rules. * don't you dare even mention apply 1. call The special call method on functions allows you to pass your own custom value of this to a function call (or the call's scope I should say). function foo() { console.log(this); } foo.call({ a: 42 }); // { a: 42 } Enter fullscreen mode Exit fullscreen mode 2. bind bind is another builtin method on functions. Much like call it too allows you to pass a custom value for this to the function call. Except unlike call, bind doesn't immediately call the function. It instead returns a special 'bound' functions. function foo() { console.log(this); } let bar = foo.bind({ a: 42 }); foo(); // Window bar(); // { a: 42 } Enter fullscreen mode Exit fullscreen mode 3. Arrow functions Arrow functions are the third way to override the call rules for this described previously. Arrow functions capture the this from the function scope in which they are created. function foo() { const bar = () => { console.log(this); }; return bar; } let bar = foo.call({ a: 42 }); bar(); // { a: 42 } Enter fullscreen mode Exit fullscreen mode So they're essentially the same as defining a normal function but then also binding it. // achieves the same effect function foo() { const bar = (function () { console.log(this); }).bind(this); return bar; } let bar = foo.call({ a: 42 }); bar(); // { a: 42 } Enter fullscreen mode Exit fullscreen mode In summary Yes, no pun in the heading this time (oops). The key takeaways are this: In JS this is associated with the current function scope, and since function scopes are associated with functions calls -- this is associated with calls. Those are the rules but they can be overridden. That is the reason why people are often confused when passing functions referencing this to callbacks. It's also why you were told to use arrow functions if you need to pass them to callbacks. I too was confused about this for a long time. Instead of taking the more sensible approach of reading an article such as this one, I instead decided to implement my own javascript. I wrote a subset of javascript. In that subset of javascript. If you want to go down that rabbit hole, then check out the repo: https://github.com/BlueBlazin/thislang If you want more posts on other javascript or computing related topics let me know on twitter: https://twitter.com/suicuneblue
- An implementation of a subset of javascript in that subset
- An implementation of a subset of JavaScript in that subset of JavaScript
cycle
-
I build a programming language with JS
Github: https://github.com/YigitGunduc/cycle
What are some alternatives?
bytenode - A minimalist bytecode compiler for Node.js
watasu - customizable abstract function layer for your JavaScript application
mcscript - A programming language for Minecraft Vanilla
fast-formula-parser - Parse and evaluate MS Excel formula in javascript.
webassemblyjs - Toolchain for WebAssembly
Jellyscript - An esoteric scripting/programming language (esolang) that's dumb
sablejs - 🏖️ The safer and faster ECMA5.1 interpreter written by JavaScript
tabloid - A minimal programming language inspired by clickbait headlines
alternative-interpreters - List of alternative PHP nad JS interpreters and compilers
fluxduct - A basic JSON-safe low-level programming language
easycoder.github.io - EasyCoder is a family of high-level scripting languages, written in pure vanilla JavaScript for browsers and Python for the command line.