将 Object 和 Class 组合在一起的 JavaScript mixin 会产生 TypeError

Question

我正在尝试将现有对象与扩展它(及其原型(prototype))的类结合起来。

代码如下，如果需要，我当然可以添加更多细节，但我认为这已经解决了问题。正如代码中指定的那样，错误是 TypeError: this.prototype is undefined。此代码段的最后一行是导致此错误的调​​用，错误本身发生在 .addMixin(mixin) 函数中。

我在这里获取的引用资料包括: http://www.joezimjs.com/javascript/javascript-mixins-functional-inheritance/和 http://javascript.crockford.com/prototypal.html (尽管这是达到上述目标的垫脚石)

注意:我知道这可以用 JQuery 和其他库来完成，但我想做这个 Vanilla。

// setup some tools
var config = {
  writable: true,
  enumerable: true,
  configurable: true
};

var defineProperty = function(obj, name, value) {
  config.value = value;
  Object.defineProperty(obj, name, config);
}

// And mixins
Object.prototype.addMixin = function (mixin) {    
    for (var prop in mixin) {
        if (mixin.hasOwnProperty(prop)) {
            this.prototype[prop] = mixin[prop]; // this is where the error occurs: 'TypeError: this.prototype is undefined'
        }
    }
};

// Define File prototype
var File = Object.create(Object.prototype);
defineProperty(File, 'file', null);
defineProperty(File, 'outputID', null);
defineProperty(File, 'hash', null);
defineProperty(File, 'hashThis', function (callback) {});

// define Timestamp prototype
var Timestamp = Object.create(File);
defineProperty(Timestamp, 'protectedHashValue', null);
defineProperty(Timestamp, 'timestamp', null);
defineProperty(Timestamp, 'read', function () {});
defineProperty(Timestamp, 'verify', function () {});

// Later, we take in a file using the HTML5 file API
// First, create the File object (in an array because there are multiple files)
globalStatus.files[fileIndex] = Object.create(File);
// and now place the file in the file property of the new File object
globalStatus.files[fileIndex].file = evt.target.files[fileIndex];

// Later on we determine that a particular file is a timestamp
// We want to mix in the properties of the Timestamp prototype to this existing File object
globalStatus.files[fileIndex].addMixin(Timestamp); // this is the call which initiates the error

Answer 1

在 addMixin 方法中 this 引用一个对象实例，在该实例上调用该方法。实例没有 prototype 属性 - Function 有。

我不太确定您要尝试做什么:将 mixin 属性添加到所有 future 实例或将它们添加到一个实例，所以我会为您提供这两种变体。

对于所有实例，您需要使用的是 constructor 属性，它返回一个用于创建实例的函数:

Object.prototype.addMixin = function (mixin) {    
    for (var prop in mixin) {
        if (mixin.hasOwnProperty(prop)) {
            this.constructor.prototype[prop] = mixin[prop]; 
        }
    }
};

对于特定实例，只需在 this 上使用括号表示法:

Object.prototype.addMixin = function (mixin) {    
    for (var prop in mixin) {
        if (mixin.hasOwnProperty(prop)) {
            this[prop] = mixin[prop];
        }
    }
};

注意 mixin 参数的属性，它们是引用类型(例如 object Object 或 object Array)