javascript jQuery 原型

jQuery prototype

提问by BrainLikeADullPencil

According to this StackOverflow answer What does jQuery.fn mean?, the fn property in jQuery.fn.jqueryis an alias to the prototype property. I assume that this would be the same in these two methods whose full code is below

根据这个 StackOverflow 回答jQuery.fn 是什么意思？, fn 属性 injQuery.fn.jquery是原型属性的别名。我认为这在这两种方法中是相同的，其完整代码如下

$.fn.map = function()and $.fn.tweets = function()

$.fn.map = function()和 $.fn.tweets = function()

My question then, is, if, for example, $.fn.tweets uses the prototype to create a tweets method, would this code with $('tweets').tweetsbe calling it...

我的问题是，例如，如果 $.fn.tweets 使用原型来创建 tweets 方法，那么这段代码是否$('tweets').tweets会调用它......

var $tweets = $('#tweets').tweets({
        query: buildQuery(approxLocation),
        template: '#tweet-template'
    });

and, if so, how might it trigger that method. For example, does the mere creation of the variable on file loading trigger that function,which has other methods inside of it, namely query? Thanks for your help

如果是这样，它如何触发该方法。例如，仅仅在文件加载时创建变量是否会触发该函数，该函数内部还有其他方法，即查询？谢谢你的帮助

Full code of methods

方法的完整代码

  $.fn.map = function(method) {
         console.trace();
         console.log(method);
        if (method == 'getInstance') {
            console.log("fn.map");
            return this.data('map');
        }

        return this.each(function() {
            var $this = $(this);
            var map = $this.data('map');

            if (map && MyMap.prototype[method]) {
                 map[method] (Array.prototype.slice.call( arguments, 1 ));
            } else if ( typeof method === 'object' || ! method ) {
                var options = method;
                $this.data('map', new MyMap( this, options ));
            } else {
                $.error( 'Method ' +  method + ' does not exist on jQuery.map' );
            }
        });
    }

   $.fn.tweets = function(method) {

        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {

            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.tweets' );
        }
    }

variables that call those methods?

调用这些方法的变量？

 var $tweets = $('#tweets').tweets({
        query: buildQuery(approxLocation),
        template: '#tweet-template'
    });
var $map = $('#map').map({
    initialLocation: approxLocation,
    radius: 1000,
    locationChanged: function(location) {
        $tweets.tweets('setQuery', buildQuery(location));
    }
});

回答by Andy Ray

Firstly, prototypes are just objects. In this case, yes:

首先，原型只是对象。在这种情况下，是的：

jQuery.prototype === jQuery.fn

So saying jQuery.fn.map = function() {}is like saying jQuery.prototype.map = function() {}

所以说jQuery.fn.map = function() {}就像说jQuery.prototype.map = function() {}

When you instantiate a new jquery objectwith $(selector | dom node | ...)you are returning a jQueryobject which automatically inherits all the prototype methods, including map, tweet, etc. Research Javascript's prototypal inheritence model and how object prototypes work in regard to new

当您实例化一个新的 jquery 对象时，$(selector | dom node | ...)您将返回一个jQuery自动继承所有原型方法的对象，包括 map、tweet 等。研究 Javascript 的原型继承模型以及对象原型如何工作new

$is just a reference to jQuerywhich returns a specially modified new object. $is a functionwhich returns a new object reference. Here's a simplified example (but you really should research more about prototypal inheritence, it has been answered many times repeatedly):

$只是一个引用，jQuery它返回一个经过特殊修改的新对象。$是一个返回新对象引用的函数。这是一个简化的例子（但你真的应该更多地研究原型继承，它已经被反复回答了很多次）：

var A = function() {
};

A.prototype.doThing = function() {
};

var newObj = new A();

newObj.doThing // this new object has this method because it's on A's prototype

so newObj.doThingis just like $(selector).tweet

所以newObj.doThing就像$(selector).tweet

Also feel free to read the sourceof jQuery and trace what happens when a new object is created. You can see near the top exactly what is happening under the comment // Define a local copy of jQuery

也可以随意阅读jQuery的源代码并跟踪创建新对象时发生的情况。您可以在顶部附近确切地看到评论下发生的事情// Define a local copy of jQuery