TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Javascript Fundamentals: ‘this’ keyword

73 点作者 bloomca超过 6 年前

11 条评论

stupidcar超过 6 年前
I think the main reason &quot;this&quot; is considered confusing is that many programmers learning JS have already spent years coding in Java or C#. They expect it to work the same, then get frustrated when it doesn&#x27;t. But the reason it doesn&#x27;t is due to the fact that functions in JS are first-class, and don&#x27;t intrinsically belong to a particular class and object instance they way they do in those languages. As such, the context represented by &quot;this&quot; <i>has</i> to be more fluid in JS.<p>That&#x27;s not to say that the design of &quot;this&quot; is perfect. And it doesn&#x27;t help that JS&#x27; syntax was designed to resemble C-family languages that it differs from significantly. But nor it is some entirely arbitrary and illogical flaw. If you take the time, it&#x27;s possible to gain an intuitive grasp of how functions and &quot;this&quot; work in JS. But instead, learners are too often told that &quot;JS is quirky&quot; by others who also have come to it from Java &#x2F; C#, and never move past memorizing to a list of these &quot;quirks&quot; to genuine proficiency. They then grumble whenever they need to work on a JS codebase, because their incomplete understanding makes it feel like they&#x27;re standing on quicksand.<p>Soon such devs fall into a circular trap: They don&#x27;t like coding in JS because it feels weird and unintuitive. And they don&#x27;t take the time to learn about it more deeply because they don&#x27;t like coding with it, and don&#x27;t want to waste time learning about something they dislike. But since they <i>have</i> to code with it, because it&#x27;s part of their job, they just stumble along, hacking away and getting frustrated when things don&#x27;t work, then come onto Hacker News and blow off steam about what a garbage language JS is.
评论 #17841998 未加载
评论 #17841913 未加载
评论 #17841868 未加载
评论 #17842132 未加载
评论 #17842587 未加载
评论 #17846070 未加载
digitaLandscape超过 6 年前
This would have been a good post in 2014 but it shouldn&#x27;t be relevant to any JavaScript developers in 2018.<p>Arrow functions don&#x27;t have `this`, and `...` syntax is simpler and as efficient as using `apply`. You only still need to use `function(){}` for generators and custom constructors, which are rare.
评论 #17841348 未加载
131hn超过 6 年前
« this » is « the thing on the left side of the dot ».<p>(that’s not always true, nor a complete definition - but it helps me a lot in understanding the whole thing)
anonytrary超过 6 年前
This example is needlessly confusing:<p><pre><code> const a = { b: 42, c: function() { return this.b; } }; (a.c || [])(); &#x2F;&#x2F; 1 (a.c)(); &#x2F;&#x2F; 2 (1, a.c)(); &#x2F;&#x2F; 3 </code></pre> He&#x27;s trying to illustrate that an expression returns a reference to the (unbound) function. This line &quot;(a.c || [])()&quot; is bothering me -- why on earth would this line exist in any program? Are we trying to throw a type error on purpose? Maybe &quot;(a.c || (()=&gt;{}))()&quot; would have been more appropriate.<p>I spent about 5 minutes wondering why each line returned 1, 2 and 3 respectively, when they should be returning the global value of b. If you are going to be showing obscure, tricky examples of Javascript, the last thing you want to do is have superfluous comments in your code. <i>Follow comment conventions</i> for the sake of your readers&#x27; sanity. This would have been much less confusing:<p><pre><code> const a = { b: 42, c: function() { return this.b; } }; (a.c || (() =&gt; {}))(); &#x2F;&#x2F; undefined (a.c)(); &#x2F;&#x2F; undefined (1, a.c)(); &#x2F;&#x2F; undefined</code></pre>
评论 #17844727 未加载
评论 #17842719 未加载
paol超过 6 年前
It&#x27;s really frustrating that the ECMA people didn&#x27;t define class methods to always be bound just like arrow functions. Like arrow functions, classes are a new syntax so there are no backward compatibility concerns.<p>That said, having two different semantics based on which syntax you happened to use to define a function is almost as big a programmer trap as the original problem. It just goes to show there are no good solutions to fundamental language design errors.
评论 #17847229 未加载
jaunkst超过 6 年前
This is fine. It&#x27;s not confusing. Don&#x27;t expect JavaScript to be Java.
werkjohann超过 6 年前
JavaScript Fundamentals: it’s “JavaScript”, not “Javascript” :P
lucisferre超过 6 年前
I could summarize the `this` keyword in one sentence: Avoid it.
swaggyBoatswain超过 6 年前
honestly &quot;this&quot; is such a stupid construct in javascript, there&#x27;s way too many obscure and unuseful edge cases to memorize.
sonnyblarney超过 6 年前
The answer to every question in this article, and any &#x27;quiz&#x27; on how to use the arbitrary and ridiculous &#x27;this&#x27; in JS is simple: use TypeScript.
评论 #17841211 未加载
评论 #17841183 未加载
expertentipp超过 6 年前
Not knowing this 8 years ago in interviews was the same disqualifying as not knowing nowadays what is the latest Angular version and why is it incompatible with the previous version. The difference is that &quot;this&quot; is still relevant - just hit F12, enter &quot;this&quot;, and hit &lt;ENTER&gt;.
评论 #17842233 未加载