blocks|key|456486|text|不，这不是我会用的规则。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|456487|我在定义方法中找到的胖箭头的主要用例是，当你想使用一个方法作为回调，并且该方法引用实例字段时：|456488|class+A
++constructor:+(@msg)+->
++thin:+->+alert+@msg
++fat:++=>+alert+@msg

x+=+new+A("yo")
x.thin()+#alerts+"yo"
x.fat()++#alerts+"yo"

fn+=+(callback)+->+callback()

fn(x.thin)+#alerts+"undefined"
fn(x.fat)++#alerts+"yo"
fn(->+x.thin())+#alerts+"yo"|code-block|syntax|javascript|456489|正如您所看到的，如果您不使用胖箭头，那么在传递对实例方法的引用作为回调时可能会遇到问题。这是因为胖箭头将对象的实例绑定到this，而细箭头不绑定，因此上面称为回调的细箭头方法不能访问实例的字段，如@msg或调用其他实例方法。最后一行是针对使用了细箭头的情况的变通方法。|offset|length|style|CODE|456490|entityMap^0|0|0|0|1O|4|2Q|4|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]|$K|W|L|X|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

No, that's not the rule I would use.

The major use-case I've found for the fat-arrow in defining methods is when you want to use a method as a callback and that method references instance fields:

<pre><code>class A
 constructor: (@msg) -&gt;
 thin: -&gt; alert @msg
 fat: =&gt; alert @msg

x = new A("yo")
x.thin() #alerts "yo"
x.fat() #alerts "yo"

fn = (callback) -&gt; callback()

fn(x.thin) #alerts "undefined"
fn(x.fat) #alerts "yo"
fn(-&gt; x.thin()) #alerts "yo"
</code></pre>

As you see, you may run into problems passing a reference to an instance's method as a callback if you don't use the fat-arrow. This is because the fat-arrow binds the instance of the object to <code>this</code> whereas the thin-arrow doesn't, so thin-arrow methods called as callbacks as above can't access the instance's fields like <code>@msg</code> or call other instance methods. The last line there is a workaround for cases where the thin-arrow has been used.

blocks|key|670790|text|通常，->是很好的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|670791|class+Foo
++@static:++->+this
++instance:+->+this

alert+Foo.static()+==+Foo+#+true

obj+=+new+Foo()
alert+obj.instance()+==+obj+#+true|code-block|syntax|javascript|670792|请注意，静态方法如何返回this的类对象，实例如何返回this的实例对象。|670793|实际情况是，调用语法提供了this的值。在此代码中：|670794|foo.bar()|670795|默认情况下，foo将是bar()函数的上下文。所以它只是按照你想要的方式工作。只有当您以其他方式调用这些函数时才需要胖箭头，这些方法不使用点语法进行调用。|670796|#+Pass+in+a+function+reference+to+be+called+later
#+Then+later,+its+called+without+the+dot+syntax,+causing+`this`+to+be+lost
setTimeout+foo.bar,+1000

#+Breaking+off+a+function+reference+will+lose+it's+`this`+too.
fn+=+foo.bar
fn()|670797|在这两种情况下，使用胖箭头声明该函数将允许它们工作。但是，除非你正在做一些奇怪的事情，否则你通常不需要这样做。|670798|因此，在真正需要=>之前，请一直使用->，并且在默认情况下永远不要使用=>。|670799|entityMap^0|3|2|0|0|C|4|R|4|0|D|4|0|0|6|3|B|5|0|0|0|8|2|I|2|Z|2|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|O|3|P|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|S|3|T|5|H|7|1I|8|@]|D|@]|E|$I|J]]|$1|U|3|V|5|6|7|1J|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1K|8|@$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1R|8|@]|D|@]|E|$]]]|Z|$]]

Usually, <code>-&gt;</code> is fine.

<pre><code>class Foo
 @static: -&gt; this
 instance: -&gt; this

alert Foo.static() == Foo # true

obj = new Foo()
alert obj.instance() == obj # true
</code></pre>

Note how the static method return the class object for <code>this</code> and the instance returns the instance object for <code>this</code>.

What's happening is that the invocation syntax is providing the value of <code>this</code>. In this code:

<pre><code>foo.bar()
</code></pre>

<code>foo</code> will be the context of the <code>bar()</code> function by default. So it just sorta works how you want. You only need the fat arrow when you call these function in some other way that does not use the dot syntax for invocation.

<pre><code># Pass in a function reference to be called later
# Then later, its called without the dot syntax, causing `this` to be lost
setTimeout foo.bar, 1000

# Breaking off a function reference will lose it's `this` too.
fn = foo.bar
fn()
</code></pre>

In both of those cases, using a fat arrow to declare that function would allow those to work. But unless you are doing something odd, you usually don't need to.

So use <code>-&gt;</code> until you really need <code>=&gt;</code> and never use <code>=&gt;</code> by default.

blocks|key|670872|text|这只是一个不理解这个大箭头的例子|type|unstyled|depth|inlineStyleRanges|entityRanges|data|670873|不工作：(@canvas未定义)|670874|class+Test
++constructor:+->
++++@canvas+=+document.createElement+'canvas'
++++window.addEventListener+'resize',+->
++++++@canvas.width+=+window.innerWidth
++++++@canvas.height+=+window.innerHeight|code-block|syntax|javascript|670875|作品：(@canvas已定义)|670876|class+Test
++constructor:+->
++++@canvas+=+document.createElement+'canvas'
++++window.addEventListener+'resize',+=>
++++++@canvas.width+=+window.innerWidth
++++++@canvas.height+=+window.innerHeight|670877|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

just an example for unstanding the fat arrow

not works: (@canvas undefined)

<pre><code>class Test
 constructor: -&gt;
 @canvas = document.createElement 'canvas'
 window.addEventListener 'resize', -&gt;
 @canvas.width = window.innerWidth
 @canvas.height = window.innerHeight
</code></pre>

works: (@canvas defined)

<pre><code>class Test
 constructor: -&gt;
 @canvas = document.createElement 'canvas'
 window.addEventListener 'resize', =&gt;
 @canvas.width = window.innerWidth
 @canvas.height = window.innerHeight
</code></pre>

When building a class in CoffeeScript, should all the instance method be defined using the <code>=&gt;</code> ("fat arrow") operator and all the static methods being defined using the <code>-&gt;</code> operator?

CoffeeScript, When to use fat arrow (=>) over arrow (->) and vice versa

在CoffeeScript中构建类时，是否应该使用=> (“胖箭头”)运算符定义所有实例方法，并使用->运算符定义所有静态方法？

问CoffeeScript，何时使用胖箭头(=>)而不是箭头(->)，反之亦然
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CoffeeScript，何时使用胖箭头(=>)而不是箭头(->)，反之亦然EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CoffeeScript，何时使用胖箭头(=>)而不是箭头(->)，反之亦然
EN