Блог

У меня есть функция, предназначенная для использования с new конструктором. Он должен возвращать массив со значением ["Hello World"] и включать функции в качестве методов. Вот пример / демонстрация (извините, если это немного некрасиво):

 var my_object = function () {
  this.foo = function (data) { // alert and add new item
    alert(data);
    this.push(data);
  };

  this.bar = function () { // alert and remove last item
    alert(this.pop());
  };

  this.baz = function (stuff) { // replace last item by running previous methods
    this.bar();
    this.foo(stuff);
  };

  var a = "Hello World";
  return [a];
};

var arr = new my_object(); // ["Hello World"]
  

Как и ожидалось, arr имеет значение ["Hello World"] . Однако следующий код выдает ошибку:

 arr.foo('some-text'); // "TypeError: arr.foo is not a function"
  

Тот же тип ошибки появляется с двумя другими функциями. Что я могу сделать, чтобы это работало, без изменения Array.prototype, создания методов вне функции или удаления возможности инициализации с помощью new my_object() ?

Примечание: По возможности, пожалуйста, не включайте ответы с использованием jQuery или других внешних библиотек.

Как упоминалось в комментариях, эта ссылка содержит некоторую ценную информацию -> https://github.com/wesbos/es6-articles/blob/master/54 — Extending Arrays with Classes for Custom Collections.md

Используя это, ваш код может быть изменен следующим образом,. ->

Конечно, это так ES6 , расширение массивов было невозможно в ES5 дни..

В Chrome instanceof при отображении работает так, как ожидалось, но не уверен, что перенесенный код работал бы здесь, если бы это было обязательным требованием. Например, если вы нажмете использовать предустановку Babel в этом фрагменте, вы увидите, что он не работает, поэтому, если вы хотите, чтобы это работало в старых браузерах, даже если они были перенесены, это может быть проблемой.

 class my_object extends Array {
  foo(data) {
    alert(data);
    this.push(data);
  }

  bar() {
    alert(this.pop());
  }

  baz(stuff) {
    this.bar();
    this.foo(stuff);
  }

  constructor () {
    super("Hello World");
  }
};

var arr = new my_object(); // ["Hello World"]
arr.foo("some-text");

console.log(arr);  

Если вы не используете какой-либо Babel или что-то еще, что может обеспечить безопасность вашего кода, так это использование наследования и цепочки прототипов. JavaScript defaults не является объектно-ориентированным программированием, но претендует на ООП.

В вашем случае при построении вы возвращаете, ["Hello World"] который является массивом, а не экземпляром my_object. Вы можете вернуть this вместо [a].

Кроме того, у вас нет ни одного массива, на который вы могли бы ссылаться. Вы работаете с локальным объектом, когда используете это, и у вас есть, вероятно TypeError: this.push is not a function .

Я улучшил ваш случай. Посмотрите, что такое return, где я использую это и ссылку на массив данных.

Приветствую, слива!

Улучшенный код:

 var my_object = function () {
  this.data = [];
  this.foo = function (data) { // alert and add new item
    alert(data);
    this.data.push(data);
  };

  this.bar = function () { // alert and remove last item
    alert(this.data.pop());
  };

  this.baz = function (stuff) { // replace last item by running previous methods
    this.bar();
    this.foo(stuff);
  };

  var a = "Hello World";
  return this;
};

var arr = new my_object(); // [object Object] - a my_object instance
console.log(arr)
arr.foo('some-text');