ES6+ 中class关键字定义的类中各种属性的写法

[Yatoo2018]

我们来看看如上的四种写法表示的含义： 控制台的打印结果： 查看HelloWorld3类

总结一下： HelloWorld和HelloWorld1的结果是相同的，给实例添加了方法； HelloWorld2是给原型上添加了方法，当然成为实例的共用方法； HelloWorld3是给类上添加了方法。

[Yatoo2018]

// module.js
class HelloWorld {
    salute = () => {
        return console.log('Hello World!');
    }
}

class HelloWorld1 {
    constructor(){
        this.salute1 = () => {
            return console.log('Hello World1!');
        }
    }
}

class HelloWorld2 {
    salute2 () {
      return console.log('Hello World2!');
    }
}

class HelloWorld3 {
    static salute3 () {
      return console.log('Hello World3!');
    }
}

console.log(HelloWorld)
console.log(HelloWorld1)
console.log(HelloWorld2)
console.log(HelloWorld3)
console.log("module inner")
export {HelloWorld, HelloWorld1,HelloWorld2,HelloWorld3}

// index.js

import {HelloWorld,HelloWorld1, HelloWorld2, HelloWorld3} from "./module.js"

var h = new HelloWorld()
var h1 = new HelloWorld1()
var h2 = new HelloWorld2()
var h3 = new HelloWorld3()

console.log(h)
console.log(h1)
console.log(h2)
console.log(h3)
window.HelloWorld = HelloWorld;
window.HelloWorld1 = HelloWorld1;
window.HelloWorld2 = HelloWorld2;
window.HelloWorld3 = HelloWorld3;

把代码贴出来，有兴趣的小伙伴可以研究一下，webpack结合babel-loader编译后的脚本文件，为了不偏离主题就不展开了，后面可能会再发关于babel编译后的issue。

[Yatoo2018]

!function(o){var e={};function l(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return o[n].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=o,l.c=e,l.d=function(o,e,n){l.o(o,e)||Object.defineProperty(o,e,{enumerable:!0,get:n})},l.r=function(o){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})},l.t=function(o,e){if(1&e&&(o=l(o)),8&e)return o;if(4&e&&"object"==typeof o&&o&&o.__esModule)return o;var n=Object.create(null);if(l.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:o}),2&e&&"string"!=typeof o)for(var r in o)l.d(n,r,function(e){return o[e]}.bind(null,r));return n},l.n=function(o){var e=o&&o.__esModule?function(){return o.default}:function(){return o};return l.d(e,"a",e),e},l.o=function(o,e){return Object.prototype.hasOwnProperty.call(o,e)},l.p="",l(l.s=0)}([function(o,e,l){"use strict";var n=l(1),r=new n.HelloWorld,t=new n.HelloWorld1,u=new n.HelloWorld2,i=new n.HelloWorld3;console.log(r),console.log(t),console.log(u),console.log(i),window.HelloWorld=n.HelloWorld,window.HelloWorld1=n.HelloWorld1,window.HelloWorld2=n.HelloWorld2,window.HelloWorld3=n.HelloWorld3},function(o,e,l){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=function(){function o(o,e){for(var l=0;l<e.length;l++){var n=e[l];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(o,n.key,n)}}return function(e,l,n){return l&&o(e.prototype,l),n&&o(e,n),e}}();function r(o,e){if(!(o instanceof e))throw new TypeError("Cannot call a class as a function")}var t=function o(){r(this,o),this.salute=function(){return console.log("Hello World!")}},u=function o(){r(this,o),this.salute1=function(){return console.log("Hello World1!")}},i=function(){function o(){r(this,o)}return n(o,[{key:"salute2",value:function(){return console.log("Hello World2!")}}]),o}(),c=function(){function o(){r(this,o)}return n(o,null,[{key:"salute3",value:function(){return console.log("Hello World3!")}}]),o}();console.log(t),console.log(u),console.log(i),console.log(c),console.log("module inner"),e.HelloWorld=t,e.HelloWorld1=u,e.HelloWorld2=i,e.HelloWorld3=c}]);

编译后的脚本