updating the Function Binding docs with an improved explanation.
This commit is contained in:
parent
c73a3ec356
commit
87420e6504
|
@ -649,6 +649,14 @@ coffee --print app/scripts/*.coffee > concatenation.js</pre>
|
||||||
<p>
|
<p>
|
||||||
<span id="fat_arrow" class="bookmark"></span>
|
<span id="fat_arrow" class="bookmark"></span>
|
||||||
<b class="header">Function binding</b>
|
<b class="header">Function binding</b>
|
||||||
|
In JavaScript, the <tt>this</tt> keyword is dynamically scoped to mean the
|
||||||
|
object that the current function is attached to. If you pass a function as
|
||||||
|
as callback, or attach it to a different object, the original value of <tt>this</tt>
|
||||||
|
will be lost. If you're not familiar with this behavior,
|
||||||
|
<a href="http://www.digital-web.com/articles/scope_in_javascript/">this Digital Web article</a>
|
||||||
|
gives a good overview of the quirks.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
The fat arrow <tt>=></tt> can be used to both define a function, and to bind
|
The fat arrow <tt>=></tt> can be used to both define a function, and to bind
|
||||||
it to the current value of <tt>this</tt>, right on the spot. This is helpful
|
it to the current value of <tt>this</tt>, right on the spot. This is helpful
|
||||||
when using callback-based libraries like Prototype or jQuery, for creating
|
when using callback-based libraries like Prototype or jQuery, for creating
|
||||||
|
@ -657,6 +665,11 @@ coffee --print app/scripts/*.coffee > concatenation.js</pre>
|
||||||
properties of the <tt>this</tt> where they're defined.
|
properties of the <tt>this</tt> where they're defined.
|
||||||
</p>
|
</p>
|
||||||
<%= code_for('fat_arrow') %>
|
<%= code_for('fat_arrow') %>
|
||||||
|
<p>
|
||||||
|
If we had used <tt>-></tt> in the callback above, <tt>@customer</tt> would
|
||||||
|
have referred to the undefined "customer" property of the DOM element,
|
||||||
|
and trying to call <tt>purchase()</tt> on it would have raised an exception.
|
||||||
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<span id="embedded" class="bookmark"></span>
|
<span id="embedded" class="bookmark"></span>
|
||||||
|
|
13
index.html
13
index.html
|
@ -1400,6 +1400,14 @@ city = _c[1];
|
||||||
<p>
|
<p>
|
||||||
<span id="fat_arrow" class="bookmark"></span>
|
<span id="fat_arrow" class="bookmark"></span>
|
||||||
<b class="header">Function binding</b>
|
<b class="header">Function binding</b>
|
||||||
|
In JavaScript, the <tt>this</tt> keyword is dynamically scoped to mean the
|
||||||
|
object that the current function is attached to. If you pass a function as
|
||||||
|
as callback, or attach it to a different object, the original value of <tt>this</tt>
|
||||||
|
will be lost. If you're not familiar with this behavior,
|
||||||
|
<a href="http://www.digital-web.com/articles/scope_in_javascript/">this Digital Web article</a>
|
||||||
|
gives a good overview of the quirks.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
The fat arrow <tt>=></tt> can be used to both define a function, and to bind
|
The fat arrow <tt>=></tt> can be used to both define a function, and to bind
|
||||||
it to the current value of <tt>this</tt>, right on the spot. This is helpful
|
it to the current value of <tt>this</tt>, right on the spot. This is helpful
|
||||||
when using callback-based libraries like Prototype or jQuery, for creating
|
when using callback-based libraries like Prototype or jQuery, for creating
|
||||||
|
@ -1427,6 +1435,11 @@ Account <span class="Keyword">=</span> <span class="Storage">function</span> <sp
|
||||||
})(<span class="Variable">this</span>));
|
})(<span class="Variable">this</span>));
|
||||||
};
|
};
|
||||||
</pre><br class='clear' /></div>
|
</pre><br class='clear' /></div>
|
||||||
|
<p>
|
||||||
|
If we had used <tt>-></tt> in the callback above, <tt>@customer</tt> would
|
||||||
|
have referred to the undefined "customer" property of the DOM element,
|
||||||
|
and trying to call <tt>purchase()</tt> on it would have raised an exception.
|
||||||
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<span id="embedded" class="bookmark"></span>
|
<span id="embedded" class="bookmark"></span>
|
||||||
|
|
Loading…
Reference in New Issue