在前端开发中，我们常常需要引用其他 JavaScript 文件中的功能和类。ES6 中引入了 import 和 export 语法，使得 JavaScript 模块化开发更加便捷和灵活。同时，当我们掌握了这些新语法后，也需要了解它们与原型链的交互，从而更好地理解和使用它们。
import 和 export 的用法
在 ES6 中，我们可以使用 import 关键字来引入其他模块中的功能或类。以引入模块中的 foo 函数为例：
------ - --- - ---- ---------------
这里我们使用花括号 {} 来指定我们要导入的模块功能或类，然后使用路径 './example.js' 来指定需要导入的模块文件路径。
在被导入的模块中，我们可以使用 export 关键字来导出一个或多个功能或类。以导出模块中的 bar 类为例：
------ ----- --- - -- --- -
这里我们使用 export 关键字来导出类，让其他模块可以引用它。
同时，也可以使用 export default 的方式来指定一个默认导出的功能或类。以默认导出模块中的 baz 函数为例：
------ ------- -------- ----- - -- --- -
在使用 export default 导出的功能或类时，可以省略花括号，直接引用导出的名称即可：
------ --- ---- ---------------
import 和 export 与原型链的交互
在 JavaScript 中，每个对象都有一个原型链。原型链是由一系列指向父级对象的指针组成的链表。通过原型链，对象可以访问其父级对象的属性和方法。
当我们使用 import 和 export 语法导入和导出功能或类时，这些导入和导出的对象也形成了一个原型链。具体来说，导入的对象会成为导入模块的顶层变量，而导出的对象会成为顶层变量的一个属性或方法。
下面通过一个案例来具体说明 import 和 export 与原型链的交互。
假设我们有一个 example.js 文件，其中定义了一个 Person 类：
------ ----- ------ -
----------------- -
--------- - -----
-
---------- -
------------------- -- ---- -- ---------------
-
-在另一个 index.js 文件中，我们使用 import 关键字来导入 Person 类，并创建一个 Tom 实例：
------ - ------ - ---- --------------- ----- --- - --- --------------
现在的问题是，如何在 Tom 实例中访问到 Person 类的原型方法 sayHello 呢？
这时候就需要了解 import 和 export 与原型链的交互。我们可以使用 __proto__ 来访问 Tom 实例的原型，并从原型中访问到 Person 类的原型方法：
-------------------------
运行结果将会输出：
------ -- ---- -- ---
这里需要强调的是，使用 __proto__ 来访问原型是一种 hack 的方法，建议在正式项目中不要使用。
在正式项目中，我们应该使用 ES6 的类继承来实现对象原型链的管理。具体来说，我们可以让子类继承返回的类，从而让子类的实例可以访问到父类的原型方法。
下面是一个示例代码，展示如何使用类继承来管理原型链：
-- ----------
----- ------ -
----------------- -
--------- - -----
-
---------- -
------------------- -- ---- -- ---------------
-
-
------ ------- -------
-- --------
------ ------ ---- ---------------
----- ------- ------- ------ -
----------------- ------ -
------------
---------- - ------
-
---------- -
--------------- ----- -- ----------------
-
-
----- --- - --- -------------- ---
--------------- -- -- ------- -- ---- -- ----
--------------- -- -- --- ----- -- --在上面的示例代码中，我们使用 extends 关键字让 Student 类继承了 Person 类，并在 sayGrade 方法中访问了 Student 类的实例和 Person 类的实例方法。这样做的好处是，可以让代码更具可读性和可维护性，同时也保证了代码的运行效率。
总结
ES6 中的 import 和 export 语法为 JavaScript 模块化开发带来了很大的便利，使得代码的组织和维护更加简单和灵活。同时，了解 import 和 export 与原型链的交互，可以让我们更好地理解和使用这些新语法。
在实际项目中，建议使用 ES6 的类继承来管理对象原型链，从而保证代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6475c526968c7c53b02c6405