实例化 ES6 中的类与原型

阅读时长 4 分钟读完

随着 JavaScript 语言不断发展和更新,ES6 的出现给前端开发带来了很多新特性和语法糖,使得代码更加简洁易读,其中,类和构造函数几乎成为了每个前端开发人员都需要掌握的基础知识之一。本文将讲解 ES6 中类的实例化方法以及其与原型之间的关系。

ES6 中类的定义

ES6 中的类是一个函数,其本质是通过构造函数的方式进行定义。例如:

上面的代码中,我们声明了一个 Person 类,该类接收两个参数,分别为 nameage。接下来,我们可以通过类来创建一个对象实例。

实例对象的创建

我们可以通过 new 来实例化一个类,例如:

上述代码中,我们通过 new 关键字实例化了一个 Person 对象,并传入了 nameage 参数。当实例化一个类时,会自动调用它的构造函数。

ES6 类与原型的关系

在 ES6 中,使用类语法定义的类仍然是基于原型的。

上述代码中,我们可以看到 Person.prototype 对象是空的,因为我们没有定义任何原型方法或属性。但是,我们可以在类中定义原型方法。例如:

-- -------------------- ---- -------
----- ------ -
  ----------------- ---- -
    --------- - -----
    -------- - ----
  -

  ------- -
    --------------- ---- -- ------------- - -- ----------- ----- -------
  -
-

----- ------- - --- --------------- ----
---------------- -- -- ---- -- ------ - -- -- ----- ----

根据上述代码,我们可以看出,使用类定义原型方法跟以前的方式有所不同。在 ES6 中,我们直接将方法定义在类中,而不是在原型上。另外,不需要使用 Person.prototype 来定义原型方法,直接在类方法中使用 this 关键字即可。

在类方法内使用 this 关键字,则 this 指向类的实例,而非原型。这意味着我们可以直接在类方法中访问实例上的属性和方法。

总结

本文介绍了 ES6 中定义类的方法以及如何实例化一个类。另外,我们还介绍了 ES6 类与原型之间的关系。相较于以前的方法,ES6 中的类写法更直观、易读,同时在性能上也有一定的提升。因此,作为前端开发人员,掌握 ES6 中类和原型的相关知识点是非常重要的。

最后,再给出一份类的示例代码:

-- -------------------- ---- -------
----- ------ -
  ----------------- ---- -
    --------- - -----
    -------- - ----
  -

  ----- -
    ------------------- --- -------
  -
-

----- --- ------- ------ -
  ----------------- ---- ------ -
    ----------- -----
    ---------- - ------
  -

  ------ -
    ---------------------
  -
-

----- ---- - --- -------------- -- ------- ------------
------------------ -- --- - ----- ---------- ---- -- ------ ------- ---------- -
----------- -- ------ --- ----
------------ -- -----

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6471d91d968c7c53b0fc33c4

纠错
反馈