5分钟内理解 .prototype 链 | 2024

• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

在JavaScript的世界里,原型(prototype)系统是一个常被讨论但不易掌握的概念。作为JavaScript继承模型的基石,理解原型对于构建大型应用或进行对象操作至关重要。让我们一起探索这个迷人的话题,揭开原型系统的神秘面纱。

什么是原型?

在JavaScript中,每个对象都有一个内部属性[[Prototype]]。这个属性指向另一个对象,我们称之为原型。原型就像一个模板,对象从中继承属性和方法。

当我们尝试访问一个对象的属性或方法时,JavaScript首先在对象本身查找。如果没有找到,它会沿着原型链向上查找,直到找到该属性或达到原型链的顶端(null)。

我们通过一个简单的例子来理解这个过程:

const animal = {
  makeSound: function() {
    console.log("Some generic animal sound");
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  console.log("Woof!");
};

dog.makeSound(); // 输出: "Some generic animal sound"
dog.bark();      // 输出: "Woof!"

在这个例子中,dog对象继承了animal的makeSound方法,同时拥有自己的bark方法。

创建对象与原型

我们深入了解对象创建时原型是如何链接的:

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

Person.prototype.greet = function() {
  console.log(`Hello, I'm ${this.name}`);
};

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

这里发生了什么?

1. Person是一个构造函数。
2. 当我们使用new关键字创建Person的实例时,JavaScript创建了一个新对象(alice),并将其[[Prototype]]链接到Person.prototype。
3. 当调用alice.greet()时,JavaScript首先在alice对象上查找greet方法。没有找到,所以它沿着原型链查找,在Person.prototype上找到并执行了这个方法。

原型链与继承

JavaScript通过原型实现继承。与传统的类继承不同,JavaScript对象直接从其他对象继承。这被称为"原型继承"。让我们扩展前面的例子来演示继承:

function Developer(name, language) {
  Person.call(this, name);
  this.language = language;
}

Developer.prototype = Object.create(Person.prototype);
Developer.prototype.constructor = Developer;

Developer.prototype.code = function() {
  console.log(`${this.name} is coding in ${this.language}`);
};

const bob = new Developer("Bob", "JavaScript");
bob.greet(); // 输出: "Hello, I'm Bob"
bob.code();  // 输出: "Bob is coding in JavaScript"

在这个例子中:

1. 我们使用Object.create(Person.prototype)创建了Developer.prototype,确保Developer实例继承自Person.prototype。
2. 我们重置了Developer.prototype.constructor,使其指向Developer函数。
3. bob现在可以访问从Person.prototype继承的greet方法和定义在Developer.prototype上的code方法。

原型方法与属性遮蔽

当直接在对象上添加一个属性或方法时,它会遮蔽原型链中同名的属性或方法:

bob.greet = function() {
  console.log("Hi, I'm a developer!");
};

bob.greet(); // 输出: "Hi, I'm a developer!"

在这个例子中,直接定义在bob上的greet方法覆盖了从Person.prototype继承的方法。

修改原型的风险

虽然可以修改内置原型如Array.prototype或Object.prototype,但这通常是不推荐的做法。这可能导致不可预知的行为和与其他代码的冲突。

结语

JavaScript的原型系统虽然初看复杂,但掌握它能让我们更深入地理解JavaScript的工作原理。尽管在使用现代JavaScript和TypeScript的项目中,我们很少直接操作原型,但理解原型对于调试和优化应用程序仍然至关重要。

通过深入理解原型,我们能够编写更高效、更灵活的JavaScript代码,为构建强大的前端应用奠定坚实基础。

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。