前端开发攻略---JS将class转换为function。满分写法无死角-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端开发攻略---JS将class转换为function。满分写法无死角。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、class写法

    class Example {
      constructor(name) {
        this.name = name
      }
      func() {
        console.log(this.name)
      }
    }

2、function写法

'use strict'

function Example(name) {
  if (!new.target) {
    throw new TypeError(`Class constructor Example cannot be invoked without 'new'`)
  }
  this.name = name
}
Object.defineProperty(Example.prototype, 'func', {
  value: function () {
    if (new.target) {
      throw new TypeError(`Example.prototype.func is not a constructor`)
    }
    console.log(this.name)
  },
  enumerable: false,
})
'use strict': class中的代码全部都是在一个严格模式下，对于一些不安全的操作会抛出错误，使代码更加规范。

function Example(name) { ... }: 这是一个函数声明，函数名为 Example，它接受一个参数 name。这个函数充当了类的构造函数的角色。函数名与class名相同。

if (!new.target) { ... }: 这一行检查函数是否通过 new 关键字调用。class写法只能通过new关键字调用的。否则就会报如下错误而构造函数（普通函数）可以直接调用也可以通过new关键字来调用。new.target 是一个元属性，指向当前正在执行的构造函数或函数。如果函数没有通过 new 调用，意味着它被当做普通函数调用，而不是构造函数，因此会抛出一个 TypeError。

throw new TypeError(...)：如果函数没有通过 new 关键字调用，抛出一个类型错误，指示 Example 构造函数不能在没有 new 关键字的情况下被调用。

this.name = name: 这一行将参数 name 分配给新创建的对象的 name 属性。在函数内部，this 指向的是正在被创建的对象。

class中的方法是不会被枚举的。所以需要通过Object.defineProperty(Example.prototype, 'func', { ... }): 这一行定义了一个不可枚举的属性 func，它是 Example.prototype 对象的一个属性。

value: function () { ... }: 这是给 func 属性赋值，这个值是一个函数，实现了类中的 func 方法。
通过new关键字去class中的方法，比如:
new Example.prototype.func()
这样也是会报错的，但是在构造函数（普通函数中）是可以这样调用的。因此这里也需要进行判断。if (new.target) { ... }: 这一行再次检查 func 方法是否通过 new 关键字调用。如果是，则抛出一个 TypeError，因为 func 方法不应该被当做构造函数来调用。文章来源地址https://www.toymoban.com/news/detail-853134.html