一文读懂JS中类、原型和继承
最新回答
浪漫尽失
2026-10-30 20:35:47
在其他语言中，如 Java，类是创建对象的蓝图。但在 JavaScript 中，函数是一等公民，因此没有类的概念。构造函数，即函数，提供了一个模板来生成具有特定结构的对象。每个构造函数可以生成多个实例，每个实例共享相同的结构，但拥有独立的属性。
构造函数通过`new`关键字创建实例，并将`this`指向新对象。每个实例对象包含一个不可枚举的`constructor`属性，该属性指向构造函数。通过构造函数定义的属性（如`name`）和方法（如`sayName`）会自动分配给每个实例。例如，`person1`实例拥有`name`和`sayName`属性。
然而，构造函数存在一个缺点：每个实例都会创建自己的属性和方法副本，导致相同属性和方法在不同实例之间无法共享。为了解决这一问题，JavaScript 提供了`prototype`属性。
`prototype`允许构造函数创建的所有实例共享公共属性和方法。任何函数在实例化对象时，实际上关联了该函数的`prototype`对象。这样一来，`cry`函数绑定在`prototype`上，让所有实例都能访问到这个方法。
实例对象访问属性和方法时，如果在自身找不到，会查找其原型对象，直至找到或原型对象为`null`。这个查找过程形成了原型链，它是一个从`Object.prototype`到构造函数原型的递归链。
同时，原型对象本身也是一个对象，拥有自己的原型对象。最终，所有对象都继承自`Object.prototype`。例如，直接声明的对象实际上是由`new Object()`创建的语法糖。因此，原型链从`Object.prototype`开始，终止于`null`。
`constructor`属性用于指向构造函数，其实际存在于原型对象上。因此，实例对象可以通过`constructor`属性访问构造函数。构造函数和实例对象具有相同的`constructor`属性，但构造函数还拥有`__proto__`和`prototype`属性，展示了其作为对象的特性。
函数在 JavaScript 中也是对象，具有`__proto__`和`constructor`属性。`Function.prototype`是所有函数共享的原型对象，因此函数实例继承了其属性和方法。构造函数，如`Person`，是`Function`函数的实例，继承了`Function.prototype`，从而具有`__proto__`和`constructor`属性。
在理解原型关系时，存在一个看似悖论的疑问：先有`Object`还是先有`Function`？为了解决这个问题，需要深入了解`Function.prototype`的特性。`Function.prototype`是一个特殊的函数对象，没有`prototype`属性。通过解析代码，可以发现`Function.prototype`继承于`Object.prototype`，而`Object.prototype`为`null`，表示原型链的终点。
总结，`prototype`对象是原型链的核心，它允许构造函数生成的实例共享属性和方法。构造函数和函数自身是对象，继承自`Function.prototype`，最终继承自`Object.prototype`。而`Function.prototype`继承于`Object.prototype`，形成一个连续的原型链，解决了`Object`和`Function`的起源问题。
此外，静态属性和方法不需要实例对象即可使用，它们定义在构造函数或类上，与实例方法不同，静态方法通常用于不涉及实例操作的操作。
JavaScript 中的`instanceof`操作符用于判断对象是否属于特定类型，通过沿着原型链查找`prototype`属性来实现。`new`操作符通过构造函数创建实例，并通过原型链关联构造函数的`prototype`对象。
在实现`new`操作符时，我们构建了一个空对象作为新实例，并通过构造函数绑定参数。改进后，`new`操作符能正确生成实例，包括构造函数返回的引用类型和基本数据类型。
JavaScript 的继承机制包括原型链继承、构造函数继承和组合继承。原型链继承允许子类继承父类的属性和方法，构造函数继承确保了每个实例具有独立的属性和方法，而组合继承结合了两者的优势。
ES6 引入了类和`extends`关键字，提供了更清晰的继承方式。类语法使得创建对象和继承更加直观。ES6 的继承支持静态函数的继承，这是 ES5 缺乏的功能。
为了深入理解 JavaScript 的类、原型和继承，建议关注前端开发相关的资源和社区，定期获取前端技术的最新动态。更多前端资料和文章可访问相关网站或关注公众号。
热门标签
