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