JavaScript Call and apply

Source: Internet
Author: User
<span id="Label3"></p><p><p><span style="font-family:Microsoft YaHei"><span style="line-height:24px"><span style="font-family:‘Comic Sans MS‘,宋体,Arial,Helvetica,sans-serif; line-height:24px">ref:</span> http://www.cnblogs.com/fighting_cp/archive/2010/09/20/1831844.html</span></span></p></p><p><p><span style="font-family:Microsoft YaHei"><span style="line-height:24px">1, Call (), apply () all belong to Function.</span> A method of prototype, <span style="line-height:24px">which is implemented internally by the JavaScript engine, because it belongs to function.prototype, so each function object instance, that is, each method has call, apply property, That is, each function contains two non-inherited methods: apply () and call (), and act the Same. </span></span></p></p><p><span style="font-family:Microsoft YaHei"><span style="line-height:24px">2, The difference parameter is not the same as:<span style="background-color:rgb(255,255,255)"><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px">F</span></span></span><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px">Oo.call (</span></span></span><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px"></span></span> this</span><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px">, Arg1,arg2,arg3)</span></span></span><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px">==</span></span></span><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px">foo.apply (</span></span></span><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px"></span></span> this</span><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px">, Arguments)</span></span></span><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px">==</span></span></span><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px"></span></span> this</span><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px; font-family:‘Courier New‘; font-size:13px"><span style="margin:0px; padding:0px; line-height:19.200000762939453px">. Foo (arg1, arg2, arg3)</span></span></span></span></span></span></p><p><p><span style="font-family:Microsoft YaHei"><span style="line-height:24px">Use Case 1:</span></span></p></p><p><p><span style="font-family:Microsoft YaHei"><span style="line-height:24px"></span></span></p></p><pre name="code" class="javascript"><pre name="code" class="javascript"> var name = ' window name '; test1 (); Popup window Name this is the Window object function test1 () {alert (this.name) in test1;} var obj = {name: ' obj name '}test1.call (obj);//popup obj name Test in this is obj, the parameter defaults to null//test1.apply (obj) and call is the same as the result alert ( Json.stringify (obj));//you can see that there is no test1 function in obj</pre></pre><p><p></p></p><p><p><span style="font-family:Microsoft YaHei"><span style="line-height:24px">The magic of call and apply can be made out of nothing let obj invoke the Test1 function, but not the function</span></span></p></p><p><p><span style="font-family:Microsoft YaHei"><span style="line-height:24px">Use Case 2:</span></span></p></p><p><p><span style="font-family:Microsoft YaHei"><span style="line-height:24px"></span></span></p></p><pre name="code" class="javascript"><pre name="code" class="javascript"><span style= "white-space:pre" ></span>function Animal (name) {this.name = Name;this.showname = function () { Alert (this.name);}}; function Cat (name) {animal.call (this,name);} Cat.prototype = new Animal (); function Dog (name) {animal.call (this,name);} Dog.prototype = new Animal (); It can be understood that dog inherits Animalvar cat = new Cat ("black cat"), var dog = new dog (["black dog"]); cat.showname (); Black catdog.showname (); Blcak Dogalert (cat instanceof Animal); Falsealert (dog instanceof Animal); False if the above two lines of commented out code, The result is true</pre></pre>Use the constructor in JavaScript to have cat, dog call Animal's constructor directly at construction Time.<br><br><p><p></p></p><p><p>JavaScript Call and apply</p></p></span>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.