The static method of Js class is different from the instance method and the jQuery extension method.

The static method of Js class is different from the instance method and the jQuery extension method.

When I went to school, the C # teacher talked about two methods for objects: Static and non-Static. At that time, I didn't understand what Static means, but I remember it.

Later, I was engaged in front-end work. I have been operating classes (namely, objects and Js without class definitions strictly. Although we all know, I will repeat them here to avoid ambiguity, there is a serious lack of overall concepts. Recently, I have read that extetnd once again mentioned the expansion of static methods and instance methods. Therefore, Baidu once again understands that it has always been useful, but I don't know its terminology. Haha ~

Static Method,Method of the class, that is, the method that the class can call directly. All instantiated objects of the class are shared (but cannot be called between instance objects). Therefore, static members only occupy a part of the memory;

Instance method,The method of the object after the instantiation class, that is, the method called by the instance object. Each time a class instance is created, a storage block is allocated to non-static members in the memory;

Static methods are instantiated at startup, so static memory is continuous and there are limits on static memory. Instead, static methods generate memory in the program running, apply for a discrete space.

Check the Code:

Function A () {}. staticMethof = function () {alert ('static method');}. prototype. instaceMethod = function () {alert ('instance method');}. staticMethof (); // Class A directly calls var instace = new A (); instace. instaceMethod (); // instace call of instance object

In the jQuery framework, its methods are all instance methods, and its tool functions are all static methods. Static Method $. each (); instance method $ ('body'). each ();

It is easy to understand.

Next, let's take a look at the extended extend usage in jQuery.

In fact, various frameworks and other code were used in the past $. extend and $. fn. I am very unhappy with extend, haha, because I don't understand... now I have talked about static methods and instance methods. A wise friend may have guessed it, $. extend is a static method for expansion, while $. fn. extend is an instance expansion method. Haha, SMART ~

Let's talk about extend first.

Extend: This function basically implements the object copy function. It copies all the attributes of an object to another object, which is often used in development of plug-ins.

Check the Code:

JQuery. extend (object)

Add a method for the jQuery class, that is, add a static method:

jQuery.extend({　　min: function(a, b) { return a < b ? a : b; },　　max: function(a, b) { return a > b ? a : b; }});jQuery.min(,); // jQuery.max(,); // Objectj Query.extend( target, object, [objectN]);

Add static methods for other classes (use one or more objects to expand an object and return the extended object

var settings = { validate: false, limit: , name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); 

Result: settings = {validate: true, limit: 5, name: "bar "}

jQuery.fnjQuery.fn = jQuery.prototype = {　　　init: function( selector, context ) {//….//……}; 

It turns out that jQuery. fn = jQuery. prototype is familiar with prototype chains?

JQuery. fn. extend (object );

Expand jQuery. prototype, that is, add an instance function.

For example, to develop a plug-in, the content in the alert edit box is displayed when the edit box is clicked.

$.fn.extend({alertWhileClick: function(){$(this).click(function(){alert($(this).val());})};});$("#input").alertWhileClick(); 

You can expand an object to the prototype of jQuery. This is the plug-in mechanism.

<Span style = "font-size: px;"> (function ($) {$. fn. tooltip = function (options) {}; // equivalent to var tooltip = {function (options) {}}; $. fn. extend (tooltip) = $. prototype. extend (tooltip) = $. fn. tooltip}) (jQuery); </span>

The above section describes how to differentiate static Js methods from instance methods and jQuery expansion methods. I hope this will help you!