Question

我已经在网上浏览了大量的文档，但我发现我需要更多来自Prototypes，而不是我现在所需要的。

有人能给我一个关于原型如何工作的基本介绍吗？当我说＆＃34;基本介绍＆＃34;时，我指的是一个初级程序员可以理解的简单解释！

Answer 1

没有原型继承的JavaScript中的OOP

考虑以下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();

此对象的每个实例都具有以下公共属性：

data
get
set
delete
getLength

现在，假设我们创建了此keyValueStore个对象的100个实例。即使get，set，delete，getLength将对这100个实例中的每个实例执行完全相同的操作，但每个实例都有自己的此函数副本。

带有原型继承的JavaScript中的OOP

现在，想象一下，如果您只有一个get，set，delete和getLength副本，并且每个实例都会引用相同的功能。这样可以提高性能并减少内存。

原型进入的地方。原型是一个＆＃34;蓝图＆＃34;属性的继承但不被实例复制。所以这意味着它只在内存中存在一个对象的所有实例，并由所有这些实例共享。

现在，再次考虑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对象的先前版本完全相同，只是它的所有方法现在都放在原型中。这意味着，现在所有100个实例都共享这四种方法，而不是每种方法都有自己的副本。

资源

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

有关原型继承的更深入研究，请参阅例如。 Aadit M Shah的文章Why Prototypal Inheritance Matters和Kyle Simpson的在线图书You Don't Know JS: this & Object Prototypes。

原型在Javascript中做了什么？

1 个答案:

没有原型继承的JavaScript中的OOP

带有原型继承的JavaScript中的OOP

资源