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

Question

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

1. Transpile ES6使用以下一饮而尽任务（在.babelrc "es2015"和"stage-0"预置）给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 

下面是相关transpiled代码：

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