Функции в прототипе объекта JavaScript не определены при импорте другим модулем

#javascript #inheritance #es6-modules

#javascript #наследование #es6-модули

Вопрос:

Я настраиваю модули JS для проекта, где я использую прототипы для программирования OO (поскольку я не уверен, что фреймворк поддерживает синтаксис класса ES6). Один модуль содержит «классы» для определенной цели, а другой модуль импортирует и использует их.

Я просмотрел всю документацию, которую смог найти, о том, как правильно настроить наследование с помощью прототипов JS и как экспортировать и импортировать модули. Приведенный ниже пример кода иллюстрирует, к чему я стремлюсь.

MyModule.js:

 function A(x, y) {
    this.x = x;
    this.y = y;
}

A.prototype.foo = function(bla) {
    // ...
}

function B(x, y, z) {
    A.call(this, x, y);
    this.z = z;
}

B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;

export { B };

MainModule.js:

 import * as MyModule from "./MyModule.js"

var b;

function bar() {
    b = new MyModule.B(1, 2, 3);

    b.foo(4); // <-- error happens here
}

Когда я пытаюсь запустить bar , b.foo не определено. Переменные-члены (например b.z , ) работают нормально, но функции, добавленные в прототипы, этого не делают.

У кого-нибудь есть идеи? Заранее спасибо!

1. для меня работает нормально. Однако одно замечание: вы экспортируете / импортируете, используя синтаксис ES6, поэтому вам нужно будет изменить его на синтаксис, предшествующий ES6, или скомпилировать код с чем-то вроде Babel . (… и если вы компилируете, вы также можете использовать более приятный синтаксис класса ES6)

2. @brian-lives-outdoors какой самый простой способ попробовать и протестировать этот код? Я пробовал онлайн-приложения для тестирования JS, но они могут выполнять только один файл

3. @brian-lives-outdoors переключение на синтаксис класса ES6 сделало свое дело. Спасибо!

Ответ №1:

похоже, вы используете синтаксис es6, поэтому вы могли бы просто сделать что-то вроде

 export function B(x, y, z) {
    A.call(this, x, y);
    this.z = z;
}

затем импортируйте

 import { B as MyModule } from "./MyModule.js"

или любое другое имя, которое вы хотите ему присвоить

1. Попробовал, все еще сталкиваясь с той же проблемой.

2. вы используете что-то вроде Babel для компиляции? если нет, то синтаксис импорта es6 не будет работать, несмотря ни на что

3. На самом деле я использую Qt (в частности, QJSEngine), который утверждает, что совместим с ES6, хотя у меня начинают возникать сомнения. Тем не менее, такие свойства, как b.z добавляются без каких-либо проблем, так что, очевидно, что-то было вызвано, но по какой-то причине оно не добавляет функции из прототипа.

Ответ №2:

Итак, оказывается, Qt (который я использовал) предпочитает синтаксис класса ES6 для выполнения того, что я пытался заставить его делать. Как только я переключился на это, импорт / экспорт и наследование и все остальное сработали. Спасибо всем, кто прокомментировал, теперь я могу отметить это как решенное.