Question

const Box = {
  pick: function(...fruits) {
    this.fruits = "You've picked the fruits " + fruits;
  $('span[data-count]').text(this.fruits);
  }
}
var Box2 = Object.create(Box);
Box2.prototype.newMethod = function() {
  $('span[data-count]').text(this.fruits);
}
Box2.pick('Apple'); // Prototype?
Box.pick('Orange', 'Mango', 'Blueberry'); // Original

* {
  background-color: lightblue;
}
span {
  font-size: 2rem;
  font-family: 'Helvetica';
}

<span data-count></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

https://codepen.io/o22/pen/bZVWOJ

我坚持要使用pick属性在const Box内部获得函数prototype。

假设直接从pick到Box2正常工作。但是，当我在代码中放入Box2.prototype.newMethod时，浏览器会引发错误。

我的目标是使用prototype属性创建新方法并访问pick函数。

我该怎么做？

Answer 1

prototype 属性专用于构造函数，它不是对象本身的原型。（如果要获取对象的原型，则可以使用Object.getPrototypeOf [您可能还会使用不赞成使用的__proto__访问器属性来查看代码；不要在新代码中使用它）。）< / p>

您的Box2不是构造函数，它只是一个对象。因此，如果要添加新方法，只需直接执行以下操作即可：

const Box = {
  pick: function(...fruits) {
    this.fruits = "You've picked the fruits " + fruits;
  $('span[data-count]').text(this.fruits);
  }
}
var Box2 = Object.create(Box);
Box2.newMethod = function() {
//  ^---- no .prototype here *********************************
  $('span[data-count]').text(this.fruits);
}
Box2.pick('Apple'); // Prototype?
Box.pick('Orange', 'Mango', 'Blueberry'); // Original

Box2将拥有自己的newMethod，并将从其原型（pick）继承Box。

一个简单的例子：

const a = {
  method1() {
    console.log("this is method1");
  }
};
const b = Object.create(a);
b.method2 = function() {
  console.log("this is method2");
};

b.method1();
b.method2();

作为次要改进，在使用特定的原型和要添加的某些方法定义对象时，Object.assign非常方便：

const a = {
  method1() {
    console.log("this is method1");
  }
};
const b = Object.assign(Object.create(a), {
  method2() {
    console.log("this is method2");
  }
});

b.method1();
b.method2();

由于这些不是构造函数，因此JavaScript中的绝大多数用途约定是不要大写它们。所以box和box2，而不是Box和Box2。

如何以嵌套地图为原型？

1 个答案: