Question

我对我遇到的一系列JavaScript代码感到有些困惑，我想了解它的用途：

(function ($, window) {

    var example;

    example = function (a, b, c) {
        return new example.fn.init(a, b, C);
    };

    example.fn = example.prototype = {
        init: function (a, b, c) {
            this.a= a;
            this.b= b;
            this.c= c;
        }    
    };

    example.fn.init.prototype = example.fn; //What does this line accomplish?

    $.example = example;


}(window.jQuery, window));

据我了解，有问题的一行是将子对象的原型分配给自己，这实际上是基础示例对象的原型...为什么可能想要这样做呢？

Answer 1

您的问题中的代码示例实现了一个多功能函数/对象，就像jQuery使用jQuery（通常别名为$）对象一样。

使用example()函数创建的对象实际上由example.fn.init()构造函数实例化。将example的原型分配给example.fn.init可确保example公开的成员也被init()实例化的对象公开。

jQuery源代码的相关部分是：

// Define a local copy of jQuery
jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
}

jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    init: function( selector, context, rootjQuery ) {
        // Actual implementation of the jQuery() function...
    }
    // Other jQuery.fn methods...
};

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

Answer 2

看起来example.fn的整个定义完全没用。（也许它打算模仿jQuery fn object？）

似乎作者希望以下调用会产生相同的结果：

var x = $.example(a, b, c); // Build by function call
var y = new $.example.fn.init(a, b, c); // Build by a constructor call

由于example和example.fn.init具有相同的原型，上面定义的x和y将具有相同的界面。以一种繁琐的方式，IMO。

可以使用更简单的语法（也称为自调用构造函数模式）在函数调用中强制执行“类似构造函数”的行为：

function example(a, b, c) {
    if (!(this instanceof example)) {
        return new example(a, b, c);
    }

    this.a = a;
    this.b = b;
    this.c = c;
}

var x = example(a, b, c); // Constructor invoked by function call
var y = new example(a, b, c); // Constructor invoked explicitly

JavaScript：将子项原型分配给自己？

2 个答案: