Как принять вложенную карту в качестве прототипа? - PullRequest
0 голосов
/ 28 февраля 2019

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.

Какя бы сделал это?

1 Ответ

0 голосов
/ 28 февраля 2019

Свойство prototype относится только к функциям конструктора, оно не является прототипом самого объекта.(Если бы вы хотели получить прототип объекта, вы бы использовали Object.getPrototypeOf [вы могли бы также увидеть код, используя устаревшее свойство доступа __proto__; не используйте его в новом коде].)

Ваш 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.

...