The static method of JS class is distinguished from instance method and how jquery expands two methods

Source: Internet
Author: User
<span id="Label3"></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">At school, The C # teacher talked about objects with two types of methods, static methods (statics), and instance methods (non-static), when they did not understand what static meant, but Memorize.</span></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">Later engaged in the front-end work, has been on the class (that is, the object, JS strictly without the definition of class, although it is well known, here or again, to avoid ambiguity) of the operation, a serious lack of the overall concept, recently see Extetnd again mentioned the expansion of static methods and example methods, so again baidu, only waking comprehend , actually has been useful, just do not know its professional terminology ah, haha ~</span></p></p><p><p><span style="font-size: 16px;"></span></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">Static methods, which belong to the class, are methods that the class can call Directly. Common to all instantiated objects of a class (but not to be called between instance objects), so static members occupy only one area of memory;</span></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">An instance method, which belongs to the method that instantiates the object after the class, that is, the method that the instance object Invokes. Each instance of a class is created, and a piece of storage is allocated to the Non-static member in memory;</span></p></p><p><p><span style="font-size: 16px;"></span></p></p><p><p><span style="font-size: 16px;"><span style="font-family: ‘Microsoft YaHei‘;">static methods are instantiated at the start of the process, so static memory is continuous and static memory is limited;</span> <span style="font-family: ‘Microsoft YaHei‘;">instead of static methods that generate memory in a program run, the application is discrete space. </span></span></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">Look at the Code:</span></p></p><pre class="brush:javascript;gutter:true;"><pre class="brush:javascript;gutter:true;">function A () {}a.staticmethof = function () { alert (' static method ');} A.prototype.instacemethod = function () { Alert (' instance method ');} A.staticmethof (); Class A directly calls var instace = new A (); instace.instacemethod ();//a Instance Object Instace call</pre></pre><p><p>  </p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; line-height: 1.5; font-size: 16px;">In the case of the jquery framework, its methods are instance methods, and its tool functions are static METHODS. static method $.each (); Instance method $ (' body '). each ();</span></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">It's a good idea to talk about it Here.</span></p></p><p><p><span style="font-size: 16px;"></span></p></p><p><p><strong><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">The following is a look at the use of the two methods of extend in Jquery.</span></strong></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">In fact, that year to see the various frameworks and other code used to $.extend and $.fn.extend I am quite unhappy, haha, because do not understand ... Now talk about static methods and instance methods, Smart Friends should be able to guess, $.extend is to expand the static method, and $.fn.extend is to expand the example method, haha, Smart ~</span></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">First say Extend.</span></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">extend, This function basically is to implement the object copy function, will be a object of all the properties of a copy to another object up,</span> <span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">often used when developing plugins. </span></p></p><p><p><span style="font-size: 16px;"><strong><span style="font-family: ‘Microsoft YaHei‘;">Look at the Code:</span></strong></span></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 18pt;">Jquery.extend (object)</span></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">To add a method to the jquery class, add a static method:</span></p></p><pre class="brush:javascript;gutter:true;"><pre class="brush:javascript;gutter:true;">Jquery.extend ({min:function (a, b) {return A < b] a:b;}, max:function (a, b) {return a > B a:b;}}); Jquery.min (2,3); 2 Jquery.max (4,5);// 5</pre></pre><p><p>  </p></p><p><p><span style="font-size: 18pt;">OBJECTJ query.extend (target, object1, [objectn]);</span></p></p><p><p><span style="font-size: 16px;">Add static methods to other classes (extend an object with one or more objects to return the extended object</span></p></p><pre class="brush:javascript;gutter:true;"><pre class="brush:javascript;gutter:true;">var settings = {validate:false, limit:5, name: "foo"}; var options = {validate:true, name: "bar"}; Jquery.extend (settings, options); Result: settings = = {validate:true, limit:5, name: "bar"}</pre></pre><p><p>  </p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 18pt;">Jquery.fn</span></p></p><pre class="brush:javascript;gutter:true;"><pre class="brush:javascript;gutter:true;">Jquery.fn = Jquery.prototype = {init:function (selector, Context) {//....//...};</pre></pre><p><p><span style="font-size: 16px;">The original JQUERY.FN = jquery.prototype, The prototype prototype chain is not unfamiliar it?</span></p></p><p><p><span style="font-size: 16px;"></span></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 18pt;">JQuery.fn.extend (object);</span></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">Extend the Jquery.prototype to add an instance Function.</span></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">For example to develop a plugin, the edit box is clicked when the contents of the alert edit box.</span></p></p><pre class="brush:javascript;gutter:true;"><pre class="brush:javascript;gutter:true;">$.fn.extend ({ alertwhileclick:function () { $ (this). "click (function () { alert (this). val ());} ) };}); $ ("#input1"). Alertwhileclick ();</pre></pre><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">You can extend an object to the prototype of jquery, which is the plugin Mechanism.</span></p></p><pre class="brush:javascript;gutter:true;"><pre class="brush:javascript;gutter:true;"><span style="font-size: 16px;">(function ($) { $.fn.tooltip = function (options) { }; Equivalent to var tooltip = { function (options) { } }; $.fn.extend (tooltip) = $.prototype.extend (tooltip) = $.fn.tooltip}) (jQuery);</span></pre></pre><p><p><span style="font-size: 16px;">  </span></p></p><p><p><span style="font-size: 16px;"></span></p></p><p><p>The static method of JS class is distinguished from instance method and how jquery expands two methods</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.