使用 Node + ES6 + Babel 未定义的类方法

Question

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

1. 使用以下 gulp 任务将 ES6 转换为 ES5（在 .babelrc 中使用 "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));