Node + ES6 + Babel未定义类方法

Question

我正在尝试在ES6中运行快速应用程序。 我正在使用以下工作流程：

1. 使用以下"es2015"任务将ES6透明到ES5（在"es2015"使用"es2015"和"stage-0"预设）：

    import gulp from 'gulp'; import gulpBabel from 'gulp-babel'; import sourcemaps from 'gulp-sourcemaps'; gulp.task('babel', () => { gulp.src([ 'someClass.js', 'app.js' ], {base: './', dot: false}) .pipe(sourcemaps.init()) .pipe(gulpBabel()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('./dist')); }); 

   这似乎工作得很好。

2. 运行node dist/app.js

3. 以下代码位于someClass.js ：

    export default class SomeClass { someMethod() { return 1 + 1; } } 

4. 最后，以下代码在app.js ：

    import SomeClass from './someClass'; //express config console.log(SomeClass); console.log(SomeClass.someMethod); 

哪些日志：

[Function: SomeClass]
undefined

这是相关的转换代码：

DIST / app.js

var _someClass = require('./someClass');

var _someClass2 = _interopRequireDefault(_someClass);

console.log(_someClass2.default);
console.log(_someClass2.default.someMethod);

DIST / someClass.js

var SomeClass = function () {
    function SomeClass() {
        _classCallCheck(this, SomeClass);
    }

    _createClass(SomeClass, [{
        key: "someMethod",
        value: function someMethod() {
            return 1 + 1;
        }
    }]);

    return SomeClass;
}();

exports.default = SomeClass;

为什么someMethod未定义？

Answer 1

因为someMethod是一个实例方法。 您需要使用new实例化该类以使用该方法。

const something = new SomeClass();
something.someMethod();

如果要在不实例化类的情况下使用该方法，可以将其定义为静态方法。

export default class SomeClass {

    static someMethod() {
        return 1 + 1;
    }
}

SomeClass.someMethod();

在上面的评论中，您说您想将其用作回调。 要将其用作回调，如果在方法中使用this关键字，则可能需要将上下文绑定到方法。 否则， this当它被称为一个回调函数关键字不指向实例。

var something = new SomeClass();
element.addEventListener('click', something.someMethod.bind(something));
// or
element.addEventListener('click', (event) => something.someMethod(event));