xyzdata/property-initializer-syntax-auto-bind-this.md

## property-initializer-syntax-auto-bind-this.md

      
    Raw
  

              property-initializer-syntax-auto-bind-this.md
            
          
    ES7 & Property initializer syntax


React auto bind this


property-initializer-syntax-auto-bind-this

babel-plugin

babel-plugin-transform-class-properties
$ npm i -D babel-plugin-transform-class-properties

https://babeljs.io/docs/plugins/transform-class-properties/
    
//
class Bork {
    //Property initializer syntax
    instanceProperty = "bork";
    boundFunction = () => {
        return this.instanceProperty;
    };
    //Static class properties
    static staticProperty = "babelIsCool";
    static staticFunction = function () {
        return Bork.staticProperty;
    };
}

let myBork = new Bork;

// Property initializers are not on the prototype.
console.log(myBork.prototype.boundFunction); 
// > undefined

// Bound functions are bound to the class instance.
console.log(myBork.boundFunction.call(undefined)); 
// > "bork"

// Static function exists on the class.
console.log(Bork.staticFunction()); 
// > "babelIsCool"

.babelrc

// without options
{
    "plugins": ["transform-class-properties"]
}

// with options
{
    "plugins": [
        ["transform-class-properties", { "spec": true }]
    ]
}