JavaScript 面向对象与原型

阅读时长 4 分钟读完

在前端开发中,JavaScript 作为一门高度灵活的语言,其面向对象编程(OOP)的实现也具有独特的特点。本文将介绍 JavaScript 中的面向对象编程和原型,帮助读者更好地理解和应用这些概念。

面向对象编程

类与实例

JavaScript 中的面向对象编程是基于类(class)和实例(instance)的概念。类是定义对象的蓝图或模板,包含了对象的属性和方法。而实例则是根据类创建出来的具体对象。JavaScript 中没有传统意义上的类,但可以通过构造函数来实现类的功能。

以下是一个简单的构造函数示例:

在上面的示例中,Person 就是一个构造函数,它包含两个属性 nameage。通过 new 关键字创建一个 Person 类的实例,并将 nameage 属性赋值为 'Alice'25。最后输出 person1name 属性。

继承

继承是面向对象编程中非常重要的概念,可以让我们实现代码复用和抽象化。在 JavaScript 中,我们可以通过原型链(prototype chain)实现继承。

以下是一个简单的继承示例:

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

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

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

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

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

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

在上面的示例中,Animal 是一个父类,包含了一个 walk 方法。Dog 是一个子类,继承自 Animal 并添加了一个 bark 方法。在 Dog 的构造函数中,通过 Animal.call(this, name) 调用父类的构造函数并设置 name 属性为 name 参数的值。然后通过 Object.create(Animal.prototype) 创建一个新对象,并将其原型指向父类的原型,从而实现继承。最后再将 Dog.prototype.constructor 设置为 Dog 本身。

多态

多态是面向对象编程中一个非常重要的概念,可以让代码更加灵活和可扩展。在 JavaScript 中,我们可以通过方法重写(method overriding)实现多态。

以下是一个简单的多态示例:

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

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

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

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

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

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

在上面的示例中,AnimalDog 都有一个 makeSound 方法。在父类 Animal 中,makeSound 方法输出了一段通用的字符串,而在子类 Dog 中,makeSound 方法被重写,输出狗叫的声音。

原型

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

纠错
反馈