javascript - Javascript 中的原型(prototype)有什么作用？

Question

我已经浏览了大量的在线文档，但我发现我需要从 Prototypes 获得的内容比我目前获得的更多。

谁能给我简单介绍一下原型(prototype)的工作原理吗？当我说“基本介绍”时，我指的是初级程序员可以理解的简单解释!

Answer 1

JavaScript 中的 OOP，无需原型(prototype)继承

考虑以下keyValueStore对象:

var keyValueStore = (function() {
    var count = 0;
    var kvs = function() {
        count++;
        this.data = {};
        this.get = function(key) { return this.data[key]; };
        this.set = function(key, value) { this.data[key] = value; };
        this.delete = function(key) { delete this.data[key]; };
        this.getLength = function() {
            var l = 0;
            for (p in this.data) l++;
            return l;
        }
    };
    
    return  { // Singleton public properties
        'create' : function() { return new kvs(); },
        'count' : function() { return count; }
    };
})();

我可以通过这样做创建该对象的新实例:

kvs = keyValueStore.create();

该对象的每个实例都将具有以下公共(public)属性:

• 数据
• 获取
• 设置
• 删除
• 获取长度

现在，假设我们创建此 keyValueStore 对象的 100 个实例。尽管 get、set、delete、getLength 会对这 100 个实例中的每一个执行完全相同的操作，每个实例都有自己的该函数的副本。

<小时/>

具有原型(prototype)继承的 JavaScript 中的 OOP

现在，想象一下如果您只有一个 get、set、delete 和 getLength 副本，每个实例都会引用相同的函数。这会提高性能并且需要更少的内存。

这就是原型(prototype)的用武之地。原型(prototype)是继承但不被实例复制的属性的“蓝图”。因此，这意味着它对于对象的所有实例仅在内存中存在一次，并且由所有这些实例共享。

现在，再次考虑 keyValueStore 对象。我可以这样重写:

var keyValueStore = (function() {
    var count = 0;
    var kvs = function() {
        count++;
        this.data = {};
    };

    kvs.prototype = {
        'get' : function(key) { return this.data[key]; },
        'set' : function(key, value) { this.data[key] = value; },
        'delete' : function(key) { delete this.data[key]; },
        'getLength' : function() {
            var l = 0;
            for (p in this.data) l++;
            return l;
        }
    };

    return  {
        'create' : function() { return new kvs(); },
        'count' : function() { return count; }
    };
})();

这与之前版本的 keyValueStore 对象完全相同，只是它的所有方法现在都放在原型(prototype)中。这意味着所有 100 个实例现在共享这四个方法，而不是每个实例都有自己的副本。

<小时/>

资源

有关此事的基本介绍，请参见例如。 inheritance and the prototype chain在MDN website .

要更深入地了解原型(prototype)继承，请参阅例如。 Aadit M Shah的文章 Why Prototypal Inheritance Matters和 Kyle Simpson的在线图书You Don't Know JS: this & Object Prototypes .