JavaScript apply,prototype,this,argument

Source: Internet
Author: User
<span id="Label3"></p><p><p>first, Apply Introduction</p></p><p><p>1, Apply is the default method of the front-end JavaScript method, which is used to replace the current execution of the Method's this object, to implement inheritance, or modify the method to use inside the This object;</p></p><p><p>This time first said Inherit:</p></p><p><p>For example:</p></p><p><p>first, declare two methods inside the test method, add,sub:</p></p><p><p>Function Test () {</p></p><p><p>This.add=function (a, B) {</p></p><p><p>Return a+b;</p></p><p><p>}</p></p><p><p>This.sub=function (a, B) {</p></p><p><p>Return a-b;</p></p><p><p>}</p></p><p><p>}</p></p><p><p>then, We then define a method test2:</p></p><p><p>function Test2 () {</p></p><p><p>Test.apply (this);</p></p><p><p>}</p></p><p><p>next, we generate the instance t2, in the instantiation process Test2 becomes the T2 constructor function, at this time Test2 method inside the This object refers to t2;</p></p><p><p>var t2=new test2 ();</p></p><p><p>So now, we can test t2:</p></p><p><p>T2.add (2,1);</p></p><p><p>T2.sub (3,2);</p></p><p><p>The result is not very magical.</p></p><p><p>2, apply has an important feature is to change the current method of execution of this object;</p></p><p><p>For example:</p></p><p><p><input type= ' file ' id= ' test '/></p></p><p><p>First we define a method to detect the suffix name of the file, at this point the This object is pointing to window, we look at the following two test examples:</p></p><p><p>function Checkfiletype () {</p></p><p><p>var _value=this.value;</p></p><p><p>var pattern=/\. [a-za-z]$/;</p></p><p><p>var result=pattern.exec (_value);</p></p><p><p>If (result!=null)</p></p><p><p>Console.log (result);</p></p><p><p>Else</p></p><p><p>Console.log (' not find ');</p></p><p><p>}</p></p><p><p>So now we're going to use apply:</p></p><p><p></p></p><p><p>$ ("#test"). Click (function () {</p></p><p><p>Checkfiletype ();</p></p><p><p>});</p></p><p><p></p></p><p><p>$ ("#test"). Click (function () {</p></p><p><p>Checkfiletype.apply (this);</p></p><p><p>});</p></p><p><p>At this point we will find that the first one is not find, and the second is the correct one to print out the name of the attachment suffix.</p></p><p><p>By this we have introduced the Apply two core usage, inheriting and changing the current execution method of the This Object.</p></p><p><p>second, prototype characteristics</p></p><p><p>The prototype is the default property of the front-end method, and the main use is to share the method between instances, for Example:</p></p><p><p>function Test () {};</p></p><p><p>Test.prototype.add=function (a, B) {</p></p><p><p>Return a+b;</p></p><p><p>}</p></p><p><p>Test.prototype.sub=function (a, B) {</p></p><p><p>Return a-b;</p></p><p><p>}</p></p><p><p>var t1=new test ();</p></p><p><p>var t2=new test ();</p></p><p><p>T1.add (2,1);</p></p><p><p>T2.add (3,2);</p></p><p><p>T1.sub (2,1);</p></p><p><p>T2.sub (3,2);</p></p><p><p>From the above example, we can see that the T1,T2 two instances can be called to the add,sub of the two methods;</p></p><p><p>third, This object</p></p><p><p>Because JavaScript is an interpreted language, this can only be determined in Execution.</p></p><p><p>In practice we can summarize the law of this, which points to the instance to which the current method belongs:</p></p><p><p>1, for example: function test () {</p></p><p><p>Console.log (this);}</p></p><p><p>Test ();</p></p><p><p>At this point we find that this points to the window because test () is the method defined in the window, that is, we can call Window.test (), which means that test is the window Method.</p></p><p><p>2, test.prototype.add=function () {</p></p><p><p>Console.log (this);}</p></p><p><p>var tt=new test ();</p></p><p><p>Tt.add ();</p></p><p><p>At this point, we define an instance Tt,add is a method of instance tt, we will find this point to Tt.</p></p><p><p>3, combined with juqery use</p></p><p><p>We often see: $ ("#xx"). click (function () {</p></p><p><p>Console.log (this);</p></p><p><p>});</p></p><p><p>At this point this is a pointer to <span class="MathJax_Preview"> <span id="MathJax-Element-1-Frame" class="MathJax"> <span id="MathJax-Span-1" class="math"> <span id="MathJax-Span-2" class="noError">("#xx") instance, Interested in extracting the source code to see () is a factory method of jquery, returning an instance. </span></span></span></span></p></p><p><p>In the above example, the click Method belongs to the <span class="MathJax_Preview"> <span id="MathJax-Element-2-Frame" class="MathJax"> <span id="MathJax-Span-3" class="math"> <span id="MathJax-Span-4" class="noError">("#xx") instance, So click inside this point ("#xx"). When the click Callback method is called, fn.apply (this) is used, so the this that we print out in the rollback method is pointed to $ ("#xx"). </span></span></span></span></p></p><p><p>Iv. arguments</p></p><p><p>Inside javascript, arguments is an array that receives the arguments passed in by the current Method.</p></p><p><p> JavaScript apply,prototype,this,argument </p> </p></span>
Related Article

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.