0

可能重复：
在 Javascript 中使用“原型”与“这个”？

我正在阅读这篇关于制作 JS 框架的博客文章。我（在一定程度上）熟悉 ECMA 原型的概念，以及一般的范围和闭包。但是，我不确定我是否确定以下代码的来龙去脉：

var myFramework = (function (window, document) {
    var /* Global variables */

    myFramework = function (el, options) {
        // code
    };

    myFramework.prototype = {
        // code
    };

    return myFramework;
})(window, document);

我理解为什么要传递窗口和文档（以节省资源，如本视频所述）。尤其让我感到困惑的是，为什么必须同时拥有myFramework = function () {}和myFramework.prototype？它是干什么用的？为什么不在this里面使用声明myFramework = function () {}呢？

4

1 回答 1

1

在 javascript 中，原型对象（在您的情况下为 myFramework.prototype）允许该类的所有实例共享相同的方法和属性。例如：

myFramework.prototype = {
    version: "0.0.1",
    fancyMethod: function(){//...//}
};

//...// Somewhere else in code.

var framework = new myFramework();
var framework2 = new myFramework();

framework.version; // ---> "0.0.1"
framework2.version; // ---> "0.0.1"

//What if?
myFramework.prototype.version = "0.0.2";
framework.version; // ---> "0.0.2"
framework2.version; // ---> "0.0.2" //This will surprise most developers.

这是因为如果属性不在直接实例上，它会在原型对象中查找属性或方法。但是一旦将属性设置为实例，它就不再查找原型链来查找值。例如。

framework.version = "0.0.3";

framework2.version; // ---> "0.0.2" Still looks up the prototype chain.
framework.version; // ---> "0.0.3" Now it finds the property on the instance.

原型对象主要用于方法。在原型对象上使用属性时会有点混乱。

我相信如何使用它的最好例子是 jQuery。如果我是正确的，jQuery.fn 等于 jQuery.prototype。这就是任何先前创建的 jQuery 实例如何获取新分配的方法。这是一个有趣的概念，但很难理解何时使用它。

原型对象使您能够使用新方法和属性（即使已创建实例）即时扩充所有实例，而无需在创建实例时进行分配。

这是关于 jsFiddle 的示例

于 2012-10-25T16:28:48.503 回答