ES6 中的继承机制 Object.create 的使用及解析

阅读时长 5 分钟读完

在 JavaScript 的实现中,并不存在类的概念,但是我们可以使用函数来构造对象,并在其原型上定义方法或属性,从而达到类似的效果。ES6 中引入了 class 语法糖,让 JavaScript 的面向对象编程更加清晰和直接。但是,ES6 还提供了更灵活的方式用于继承,其中之一就是 Object.create() 方法。

Object.create() 简介及用法

Object.create() 方法创建一个使用指定原型对象和属性的新对象。语法如下:

其中,proto 表示要作为新对象原型的对象,propertiesObject 是可选的,表示为新对象定义额外属性的对象。

实现继承

在 ES5 中,实现继承通常采用借用构造函数和原型链组合两种方式。通过借用构造函数,可以实现子类实例化时传递参数。通过原型链,子类可以继承父类的方法和属性。但是,这种方式存在一些问题,比如不能向父类构造函数传递参数等。

在 ES6 中,可以使用 class 语法糖来实现继承,但是这种方式是基于原型链的,无法灵活控制继承关系。相比之下,Object.create() 方法则更加灵活方便。

下面是一个使用 Object.create() 方法实现继承的例子:

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

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

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

-- --
--- ----- - --- ---------------- --- ---
---------------- -- -------
--------------- -- --
----------------- -- -
----------------- ---------- -------- -- ----
----------------- ---------- --------- -- ----
展开代码

可以看到,使用 Object.create() 方法可以让子类的原型链指向父类的原型对象,从而实现属性和方法的继承。同时,还可以使用借用构造函数的方式,让子类继承父类的属性。

Object.create() 源码解析

了解了 Object.create() 方法的用法和实现继承的例子之后,下面我们来看一下 Object.create() 方法的源码实现,以深入理解其内部原理。

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

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

  -------- --- --
  ----------- - ------
  ------ --- ----
--
展开代码

首先,进行参数检查,如果 proto 不是对象或函数类型,则抛出一个类型错误。如果 propertiesObject 已设置,则会抛出一个错误提示 This feature is not supported in this version of Object.create

接着,创建一个函数 F(),将其原型指向 proto,然后返回 new F()

在这个过程中,我们可以发现利用 Object.create() 方法创造出来的新对象 newObj 与其原型 proto 之间有一个隐式引用。当我们读取 newObj 中未定义的属性时,JavaScript 就会在其原型 proto 中寻找该属性。如果 proto 还有原型,那么就会递归查找,直到找到该属性或原型链的最终节点。这就是 JavaScript 实现继承的基础。

总的来说,Object.create() 方法使用起来非常灵活方便,可以创建出具有指定原型和属性的新对象,也可以实现非常灵活的继承。同时,了解其内部实现原理对于理解 JavaScript 的对象和继承机制也非常有帮助。

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

纠错
反馈

纠错反馈