JavaScript类内部插入函数报错原因及实现方法咨询

报错原因 #

你代码的报错属于语法错误：ES6 Class 中定义原型方法不需要添加function关键字，你在Kategori类里写的function Ongkir(berat)不符合类方法的语法规范，所以触发报错。另外你在Ongkir方法内重复声明var berat = berat属于冗余代码，参数已经可以直接在方法内使用，不需要重复赋值。

修正后的可运行代码如下：

class Barang {
  constructor(Nama, Harga, Merk) {
    this.Nama = Nama;
    this.Harga = Harga;
    this.Merk = Merk;
  }
}

class Kategori extends Barang {
  constructor(Nama, Harga, Merk, Kategori, Jenis) {
    super(Nama, Harga, Merk);
    this.Kategori = Kategori;
    this.Jenis = Jenis;
  }

  // 去掉function关键字即可正常运行
  Ongkir(berat) {
    const biaya = () => {
      return berat * 8000
    }

    this.totalBiaya = () => {
      return biaya()
    }
  }
}

类内部定义函数的其他实现方式 #

类内部定义函数共有4种常见实现方式，可根据需求选择：

• 原型方法：就是上面修正后的写法，定义的方法挂载在类的原型对象上，所有实例共享同一份方法，内存占用最低，是最常用的类方法定义方式。
• 构造函数内绑定实例方法：直接在构造函数内给this挂载方法，每个实例会单独持有一份方法，适合需要访问实例私有变量的场景：

  class Kategori extends Barang {
    constructor(Nama, Harga, Merk, Kategori, Jenis) {
      super(Nama, Harga, Merk);
      this.Kategori = Kategori;
      this.Jenis = Jenis;
      // 构造函数内直接挂载方法
      this.Ongkir = function(berat) {
        return berat * 8000
      }
    }
  }
  

• 静态方法：用static关键字声明，属于类本身的方法，不需要实例化就可以调用，无法通过类实例访问：

  class Kategori extends Barang {
    // 静态方法，仅类本身可调用
    static hitungOngkir(berat) {
      return berat * 8000
    }
  }
  // 调用方式：Kategori.hitungOngkir(3)
  

• 箭头函数类字段（ES2022+支持）：直接在类内部用箭头函数赋值的方式定义方法，this会永久绑定到当前实例，不需要额外做bind操作，适合作为事件回调函数使用：

  class Kategori extends Barang {
    // 箭头函数类字段，this自动绑定实例
    Ongkir = (berat) => {
      return berat * 8000
    }
  }
  

内容的提问来源于stack exchange，提问作者adtybrhn