返回

解锁ES6的神秘面纱,一同探秘原型和类的世界(上)

前端

万事万物皆有起源,在计算机的世界中,对象亦然。一个对象可以追溯到一个函数的原型,而这个函数又可以追溯到一个对象,如此层层递进,最终便形成了原型链。原型链是 JavaScript 对象的一个基本概念,它了对象之间是如何相互关联的。

在 JavaScript 中,函数也是对象。每个函数都有一个原型属性,指向该函数所属的原型对象。函数的原型对象包含了该函数的所有属性和方法。当我们创建一个新对象时,这个对象会继承其创建函数的原型对象的所有属性和方法。这就是原型链发挥作用的地方。

例如,我们创建一个名为 "Person" 的函数,并在这个函数中定义了一个名为 "name" 的属性。然后我们创建一个新的对象,并将其赋值给变量 "person"。此时,"person" 对象继承了 "Person" 函数的原型对象的所有属性和方法,包括 "name" 属性。

我们可以通过使用点运算符来访问 "person" 对象的 "name" 属性。这本质上是在沿着原型链向上查找,直到找到包含该属性的对象。如果我们尝试访问一个不存在于 "person" 对象或其原型对象中的属性,我们将得到一个 "undefined" 值。

原型链不仅用于访问属性,也用于访问方法。我们可以通过使用调用运算符来调用 "person" 对象的 "sayHello" 方法。这本质上是在沿着原型链向上查找,直到找到包含该方法的对象。如果我们尝试调用一个不存在于 "person" 对象或其原型对象中的方法,我们将得到一个 "TypeError" 错误。

原型链是 JavaScript 中一个非常重要的概念,它允许我们创建复杂的对象模型。通过理解原型链,我们可以更好地理解 JavaScript 中的对象是如何工作的。

在 ES5 中,类是使用函数和原型链来模拟的。我们创建一个名为 "Person" 的函数,并在其中定义了 "name" 和 "sayHello" 属性和方法。然后,我们创建一个新的对象,并将它赋值给变量 "person"。此时,"person" 对象继承了 "Person" 函数的原型对象的所有属性和方法。

在 ES6 中,类是使用 "class" 创建的。我们创建一个名为 "Person" 的类,并在其中定义了 "name" 和 "sayHello" 属性和方法。然后,我们创建一个新的对象,并将它赋值给变量 "person"。此时,"person" 对象是一个 "Person" 类的实例,它具有 "Person" 类的所有属性和方法。

ES6 中的类比 ES5 中的函数更简洁,更易于阅读和理解。此外,ES6 中的类还支持继承和多态性,这使得我们可以创建更复杂的对象模型。