javascript - 如何将嵌套 map 假设为原型(prototype)?

标签 javascript html data-structures struct prototype

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

我必须通过使用 prototype 属性来获取 const Box 内部的函数 pick

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

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

我该怎么做?

最佳答案

prototype property 特定于构造函数,它不是对象本身的原型(prototype)。 (如果你想获得对象的原型(prototype),你会使用 Object.getPrototypeOf它在新代码中]。)

您的 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,并将继承其原型(prototype) (Box) 的 pick

更简单的例子:

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();

作为一个小的改进,当定义一个具有特定原型(prototype)和一些你想添加的方法的对象时,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 中压倒性的普遍约定是不将它们大写。所以 boxbox2,而不是 BoxBox2

关于javascript - 如何将嵌套 map 假设为原型(prototype)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54927106/

相关文章:

html - 无法居中网站

javascript - 复杂的 CSS 选择器 - 如何要求可见

data-structures - 此排序数组数据结构的集合有名称吗?

javascript - 正则表达式匹配除两个保留字符串之外的任何字符串?

javascript - IE 中 iframe 元素的线程

javascript - 将 href 添加到 txthtml 列

javascript - 什么样的javascript代码应该留在html文件中?

javascript - 我正在尝试复制这个图像轮播,但我遇到了样式问题

java - JAVA中位置索引的实现

java - 使用大集合或带有集合的等效 map 好吗?