edit-article

Article Description: by Don Sagrott - Understanding the 'call-aply-bind' methods - ] a look at some similar, but different JavaScript methods for setting the context of .this for your objects

Chapter ID/Name:

Status: Write Writing Written

Add Photo:

Owner ID:

Content: use HTML Edit Content <h1 style="text-align: center;"><span style="background-color: #ff0000;">DRAFT</span> call VS apply VS bind <span style="background-color: #ff0000;">DRAFT</span></h1> <h2>[WHAT]</h2> <ol> <li>] an attempt to explain the differences between javascripts&nbsp;call, apply and &nbsp;bind methods.</li> <li>] these&nbsp;are&nbsp;some similar,&nbsp;yet very different native JavaScript methods for setting the context of ".this" for your objects</li> <li>] you can USE both "call" and "apply" methods to SET the "this" value of a function,&nbsp;the difference is in how the arguements are applied</li> <li>] <strong>.call</strong> - is for passing a single arguement,</li> <li>] <strong>.apply</strong> - is for passing an array of arguements</li> <li>] </li> <li>] <strong>.bind</strong> - method creates/returns a function that will ...&nbsp;</li> <li>] <strong>.bind</strong> -&nbsp;we use Bind for setting the this value in methods and for ] currying functions</li> <li>] <strong>.bind</strong> - returns a function that when later executed will have the correct context set for calling the original function. This way you can maintain context in async callbacks, and events.</li> </ol> <h2>[WHY/WHEN]</h2> <ol> <li><strong>] all&nbsp;</strong></li> <ol> <li>]&nbsp;if you dont explicitly set the context of what the&nbsp;'.this' keyword will refer to, "this" may not be&nbsp;referring to&nbsp;what you think "this" is referring to, when the code is run, &nbsp;</li> </ol> <li><strong>] call -</strong></li> <ol> <li>] SET the "context" of "this", with a&nbsp;<strong>single arguement</strong>,</li> <li>] can apply a method of an object to another object.</li> <li>] borrow methods from another object -</li> </ol> <li><strong>] apply</strong></li> <ol> <li>] SET the "context" of "this", with an&nbsp;<strong>array of arguements</strong></li> </ol> <li><strong>] bind</strong></li> <ol> <li>] SET the context of this within another function</li> <li>] how to keep the context of&nbsp;<code>this</code>&nbsp;within another function, then you might not realize that what you actually need is&nbsp;<code>Function.prototype.bind()</code>.</li> <li>] returns a&nbsp;function</li> </ol></ol> <h2>[WHERE]</h2> <ol> <li><strong>] call -</strong></li> <ol> <li>]&nbsp;</li> </ol> <li><strong>] apply</strong></li> <ol> <li>]</li> </ol> <li><strong>] bind</strong></li> <ol> <li>]&nbsp;</li> </ol></ol> <h2>[WHEN]</h2> <ol> <li>] use call for immediate with only 1 argument</li> <li>] use apply for immediate with multiple arguments[array]</li> <li>] use bind for future&nbsp;</li> </ol> <h2>[EXAMPLE]</h2> <ol> <li><strong>] call</strong></li> <ol> <li>] // assume that Student inherites from Person, Person has a name property and we want to set the name property of a new Student</li> <li>] Student.prototype = createObject(Person);</li> <li>] var myStudent = new Student.call(this, "joe")</li> </ol> <li><strong>] apply</strong></li> <ol> <li>] // assume that person has multiple properties that we want to set at creation time</li> <li>] var myStudent = new Student.apply(this, ['joe', 'black','2015-02-15'])</li> </ol> <li><strong>] bind</strong></li> <ol> <li>] // assume the person has ...&nbsp;</li> </ol></ol> <h2>[HOW-TO]</h2> <ol> <li>] PROCESS call - a complete code example using javascripts call method</li> <li>] PROCESS apply - a complete code example using javascripts apply method</li> <li>] PROCESS bind - a complete code example using javascripts bind method&nbsp;</li> </ol> <h2>[REFERENCE]</h2> <ol> <li>] <a href="http://stackoverflow.com/questions/15455009/js-call-apply-vs-bind" target="_blank">http://stackoverflow.com/questions/15455009/js-call-apply-vs-bind</a></li> <li>] <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" target="_blank">https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind</a></li> <li>] <a href="http://stackoverflow.com/questions/1986896/what-is-the-difference-between-call-and-apply?rq=1" target="_blank">http://stackoverflow.com/questions/1986896/what-is-the-difference-between-call-and-apply?rq=1</a>&nbsp;</li> <li>] <a href="http://stackoverflow.com/questions/9001830/the-reason-to-use-js-call-method">http://stackoverflow.com/questions/9001830/the-reason-to-use-js-call-method</a>&nbsp;</li> <li>] <a href="http://javascriptissexy.com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionals/" target="_blank">http://javascriptissexy.com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionals/</a>&nbsp;</li> <li>] <a href="http://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/" target="_blank">http://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/</a></li> <li>] <a href="https://variadic.me/posts/2013-10-22-bind-call-and-apply-in-javascript.html" target="_blank">https://variadic.me/posts/2013-10-22-bind-call-and-apply-in-javascript.html</a>&nbsp;</li> <li>] <a href="http://www.endmemo.com/js/call.php">http://www.endmemo.com/js/call.php</a>&nbsp;</li> <li>] <a href="https://github.com/mrdavidlaing/javascript-koans" target="_blank">https://github.com/mrdavidlaing/javascript-koans</a>&nbsp;</li> <li>&gt;] <a href="http://code.tutsplus.com/tutorials/quick-tip-calling-javascript-methods-on-other-objects--net-15956" target="_blank">http://code.tutsplus.com/tutorials/quick-tip-calling-javascript-methods-on-other-objects--net-15956</a></li> </ol> <p>g q = explain javascript call vs bind&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>* bind in es5 &nbsp;</p> <p>We use the Bind () method primarily to call a function with the this value set explicitly. It other words, bind () allows us to easily set which specific object will be bound to this when a function or method is invoked.</p> <p>his might seem relatively trivial, but often the this value in methods and functions must be set explicitly when you need a specific object bound to the function&rsquo;s this value.</p> <p>The need for bind usually occurs when we use the this keyword in a method and we call that method from a receiver object; in such cases, sometimes this is not bound to the object that we expect it to be bound to, resulting in errors in our applications. Don&rsquo;t worry if you don&rsquo;t fully comprehend the preceding sentence. It will become clear like teardrop in a moment.</p> <p>&nbsp;</p>