Node + ES6 + Babel未定义类方法

Question

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

1. 使用以下gulp任务(在.babelrc中使用"es2015"和"stage-0"预设)将ES6透明到ES5 :

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