将原型添加到 JavaScript 对象文字

Question

STORE = {
   item : function() {
  }
};
STORE.item.prototype.add = function() { alert('test 123'); };
STORE.item.add();

我很长时间以来一直试图找出问题所在。为什么这不起作用？但是，当我使用以下命令时它会起作用：

STORE.item.prototype.add();

Answer 1

原型对象旨在用于 构造函数，基本上是使用 new 运算符调用来创建新对象实例的函数。

JavaScript 中的函数是一流对象，这意味着您可以向它们添加成员并像普通对象一样对待它们：

var STORE = {
   item : function() {
  }
};

STORE.item.add = function() { alert('test 123'); };
STORE.item.add();

正如我之前所说，原型对象的典型用途是通过使用 new 运算符调用构造函数来实例化对象，例如：

function SomeObject() {} // a constructor function
SomeObject.prototype.someMethod = function () {};

var obj = new SomeObject();

SomeObject 的所有实例都将继承

SomeObject.prototype

的成员，因为这些成员将通过原型链访问。

JavaScript 中的每个函数都有一个原型对象，因为无法知道哪些函数要用作构造函数。

Answer 2

多年后，当 JavaScript（ES2015 到来）我们终于有了 Object.setPrototypeOf() 方法

const STORE = {
  item: function() {}
};


Object.setPrototypeOf(STORE.item, {
  add: function() {
    alert('test 123');
  }
})


STORE.item.add();

Answer 3

在撰写本文时，可以通过使用

__proto__

属性来实现这一点。以防万一这里有人现在或将来可能正在检查。

const dog = {
    name: 'canine',
    bark: function() {
        console.log('woof woof!')
    }
}

const pug = {}
pug.__proto__ = dog;

pug.bark();

但是，在这种情况下添加原型的推荐方法是使用Object.create。所以上面的代码将被翻译为：

const pug = Object.create(dog)

pug.bark();

或者您也可以使用答案之一中提到的 Object.setPrototypeOf。

希望有帮助。

Answer 4

您可以使用 JSON revivers 在解析时将 JSON 转换为类对象。 EcmaScript 5 草案采用了 http://JSON.org/js.html

中描述的 JSON2 reviver 方案

var myObject = JSON.parse(myJSONtext, reviver);

可选的reviver参数是 将为每个调用的函数 每个级别的键和值 最后结果。每个值将是 被reviver的结果取代 功能。这可以用来改革 通用对象转化为实例 伪类，或转换日期 字符串转换为 Date 对象。

myData = JSON.parse(text, function (key, value) {
    var type;
    if (value && typeof value === 'object') {
        type = value.type;
        if (typeof type === 'string' && typeof window[type] === 'function') {
            return new (window[type])(value);
        }
    }
    return value;
});

Answer 5

STORE = {
   item : function() {
  }
};

此命令将创建一个 STORE 对象。您可以通过

typeof STORE;

查看。它应该返回“对象”。如果您输入

STORE.item;

，它会返回“function ..”。

由于它是一个普通对象，因此如果您想更改项目功能，您只需使用此命令访问其属性/方法即可。

STORE.item = function() { alert('test 123'); };

尝试

STORE.item;

它仍然应该返回'function ..'.

尝试

STORE.item();

，然后就会显示警报。

Answer 6

__proto__

（来自 JohnnyQ）可以在文字声明上指定，可以使用分配将其他原型混合在一起以从多个父级继承：

const dog = {
    makeNoise: function () {
        console.log('woof woof!')
    }
}

const owned = {
    ownedBy: function () {
        console.log('chad')
    }
}

const pug = {
    __proto__: Object.assign({}, dog, owned)
};

pug.makeNoise();
pug.ownedBy();