17370845950

JavaScript原型与原型链深入浅出_javascript技巧
原型是函数的prototype属性指向的对象,每个对象通过[[Prototype]]链接向上查找属性,形成原型链:p1→Person.prototype→Object.prototype→null,实现继承与共享。

JavaScript中的原型与原型链是理解对象继承和属性查找机制的核心。很多人初学时觉得抽象,其实只要抓住几个关键点,就能快速掌握它的运行逻辑。

什么是原型(Prototype)?

在JavaScript中,每一个函数创建时都会自动生成一个prototype属性,这个属性指向一个对象,称为“原型对象”。而每个对象(除部分特殊情况外)都有一个内部属性[[Prototype]],它指向其构造函数的prototype

例如:

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.name);
};

const p1 = new Person("Alice");
p1.sayHello(); // 输出: Hello, I'm Alice

这里,p1本身没有sayHello方法,但它能调用,是因为JavaScript通过原型找到了Person.prototype上的该方法。

原型链:属性查找的路径

当访问一个对象的属性时,JavaScript会先检查对象自身是否有这个属性。如果没有,就会沿着[[Prototype]]链向上查找,直到找到匹配属性或到达原型链末端(即null)。

比如:

  • p1.toString() —— p1没有toString,但它的构造函数原型继承自Object.prototype,所以能找到。
  • 这条查找路径就是:p1 → Person.prototype → Object.prototype → null

这就是原型链的本质:一条由[[Prototype]]连接起来的对象链条。

如何查看和设置原型?

现代JavaScript提供了几个常用方法来操作原型:

  • Object.getPrototypeOf(obj) —— 获取对象的原型
  • Object.setPrototypeOf(obj, prototype) —— 设置对象的原型(性能较低,慎用)
  • obj.__proto__ —— 非标准但广泛支持的访问方式(可读可写)
  • Object.create(prototype) —— 创建一个新对象,并指定其原型

推荐使用Object.getPrototypeOfObject.create来保证代码的规范性和兼容性。

常见误区与实用技巧

理解原型链时,有几个容易混淆的地方:

  • prototype是函数才有的属性;而[[Prototype]]是每个对象都有的内部链接
  • 箭头函数没有prototype属性
  • 使用class语法定义的类,底层依然是基于原型实现的

小技巧:如果你想让多个实例共享某个方法或数据,把它挂到prototype上,而不是定义在构造函数内部,这样更节省内存。

基本上就这些。原型不是魔法,只是JavaScript对象之间通过链接共享属性和方法的一种机制。搞清楚谁连着谁,查找顺序是什么,自然就通了。不复杂但容易忽略细节。