javascript - 将原型添加到 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

您可以使用 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 4

在撰写本文时，这可以通过使用该__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 5

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

此命令将创建一个 STORE 对象。你可以检查一下typeof STORE;。它应该返回“对象”。如果你键入STORE.item;它返回'function ...'。

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

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

尝试STORE.item;它仍然应该返回'function ..'。

尝试STORE.item();然后将显示警报。