如何将普通方法转换为Chrome中的箭头功能？

Question

I will make a example code for class by javascript. i want to implement method that return price using arrow function. below the code i wrote, and it works.

class Product{
        constructor(name, weight, price){
            this._name = name;
            this._weight = weight;
            this._price = price;
        }

        //calculate = (weight) => (weight / 100) * _price;
        calculate(weight){
            return (weight / 100) * this._price;
        }
    }

    const product = new Product("fork", 100, 1690);
    alert( product.calculate(200) + "won");

but after modify to

calculate = (weight) => (weight / 100) * _price;
/*
calculate(weight){
    return (weight / 100) * this._price;
}
*/

occur error "Uncaught SyntaxError: Unexpected token =" in chrome.

why that error occur? and how to modify? thanks for watching!!

Answer 1

An arrow function is just a regular property rather than a method, so you can't declare it like you declare a method. Put it inside the constructor:

constructor(name, weight, price){
    this._name = name;
    this._weight = weight;
    this._price = price;

    this.calculate = weight => weight / 100 * this._price;
}

You CAN declare it like a method if you're using Babel , but since your question is tagged with "Google Chrome" I presume you want vanilla ES6.