深入理解原型与原型链

简介: 当我们在 JavaScript 中创建一个对象时,它会自动继承一个称为“原型”的对象。如果该对象访问一个属性或方法,但在自己的属性列表中找不到,它会沿着原型链向上查找,直到找到该属性或方法为止。在本篇文章中,我们将深入探讨 JavaScript 中的原型与原型链。

当我们在 JavaScript 中创建一个对象时,它会自动继承一个称为“原型”的对象。如果该对象访问一个属性或方法,但在自己的属性列表中找不到,它会沿着原型链向上查找,直到找到该属性或方法为止。在本篇文章中,我们将深入探讨 JavaScript 中的原型与原型链。

什么是原型?

在 JavaScript 中,每个对象都有一个原型,它定义了对象的默认属性和方法。如果我们尝试访问一个对象的属性或方法,但该属性或方法不存在于该对象本身的属性列表中,JavaScript 引擎就会沿着对象的原型链向上查找,直到找到该属性或方法为止。

在 JavaScript 中,我们可以使用构造函数来创建一个对象。构造函数是一个普通的函数,它可以使用 new 关键字来创建一个实例对象。例如:

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

const person = new Person("Alice", 30);

在上面的代码中,我们定义了一个 Person 构造函数,它接受两个参数 nameage,并使用 this 关键字将它们赋值给新创建的对象。我们可以使用 new 关键字来创建一个 Person 实例,并将其存储在 person 变量中。

每个 JavaScript 对象都有一个 prototype 属性,它指向该对象的原型。在上面的代码中,我们可以使用 Person.prototype 来访问 Person 的原型对象。

原型链

原型链是 JavaScript 中一个非常重要的概念,它描述了对象之间的继承关系。每个对象都有一个原型链,它是一个指向其他对象的链表。当我们访问一个对象的属性或方法时,JavaScript 引擎会首先查找对象本身的属性列表,如果找不到,它就会沿着原型链向上查找,直到找到该属性或方法为止。

在 JavaScript 中,原型链是通过 prototype 属性实现的。当我们创建一个对象时,它会自动继承其构造函数的原型对象。如果该对象的原型对象也有一个原型对象,那么它也会继承该对象的原型对象,以此类推,形成一个链表。

以下是一个简单的原型链示例:

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

Animal.prototype.sayName = function() {
   
  console.log(`My name is ${
     this.name}.`);
};

function Dog(name, breed) {
   
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.sayBreed = function() {
   
  console.log(`I am a ${
     this.breed}.`);
};

const dog = new Dog("Fido", "Labrador");
dog.sayName(); // 输出 "My name is Fido."
dog.sayBreed(); // 输出 "I am a Labrador."

在上面的代码中,我们定义了两个构造函数 AnimalDogAnimal 构造函数定义了一个 name 属性和一个 sayName 方法,而 Dog 构造函数使用 call 方法调用 Animal 构造函数,并定义了一个 breed 属性和一个 sayBreed 方法。

我们将 Dog 的原型对象设置为 Animal 的原型对象,这样 Dog 就继承了 Animal 的属性和方法。我们还将 Dog 的原型对象的 constructor 属性设置为 Dog,以便在实例化 Dog 对象时能够正确地调用 Dog 构造函数。

当我们创建一个 Dog 实例时,它会自动继承 Animal 的原型对象。因此,我们可以在 dog 对象上调用 sayNamesayBreed 方法,并且它们都能正常工作。

总结

JavaScript 的原型和原型链是非常重要的概念,它们使得 JavaScript 可以实现面向对象编程,并且能够方便地实现继承。每个对象都有一个原型,它定义了对象的默认属性和方法。当我们访问一个对象的属性或方法时,JavaScript 引擎会沿着对象的原型链向上查找,直到找到该属性或方法为止。通过设置构造函数的原型对象,我们可以实现对象之间的继承关系,并且可以方便地重用代码。

相关文章
|
JavaScript 前端开发
原型与原型链,数形结合搞懂原型与原型链,真正理解原型链,面试官直呼内行。
原型与原型链,数形结合搞懂原型与原型链,真正理解原型链,面试官直呼内行。
493 0
|
3月前
|
前端开发 容器
CSS 的弹性布局
CSS弹性布局通过`display:flex`实现,可灵活控制容器内子元素的排列、对齐与分布。支持主轴与交叉轴方向设置、伸缩比例(flex-grow/shrink)、换行及多行对齐方式,大幅提升网页布局灵活性与响应性。
|
缓存 安全 数据安全/隐私保护
如何根据请求场景选择 GET 或 POST 请求方法?
【10月更文挑战第27天】根据不同的请求场景,综合考虑数据传输目的、安全性、数据量大小、幂等性要求以及缓存需求等因素,合理地选择GET或POST请求方法,能够更好地实现客户端与服务器之间的数据交互,提高系统的性能和安全性。
572 64
|
缓存 边缘计算 网络协议
深入解析CDN技术:加速互联网内容分发的幕后英雄
内容分发网络(CDN)是现代互联网架构的重要组成部分,通过全球分布的服务器节点,加速网站、应用和多媒体内容的传递。它不仅提升了访问速度和用户体验,还减轻了源站服务器的负担。CDN的核心技术包括缓存机制、动态加速、流媒体加速和安全防护,广泛应用于静态资源、动态内容、视频直播及大文件下载等场景,具有低延迟、高带宽、稳定性强等优势,有效降低成本并保障安全。
2238 4
|
缓存 JavaScript 前端开发
对比一下Vue2和Vue3?
本文首发于微信公众号“前端徐徐”,详细对比了 Vue 2 和 Vue 3 在原理、生命周期、性能、编码方式、API、Diff 算法、打包构建、TS 支持等八个方面的差异,帮助读者全面了解两者的不同之处。
1217 0
对比一下Vue2和Vue3?
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
缓存 前端开发 JavaScript
【前端性能优化】深入解析重绘和回流,构建高性能Web界面
【前端性能优化】深入解析重绘和回流,构建高性能Web界面
346 1
|
JavaScript
【Vue面试题八】、为什么data属性是一个函数而不是一个对象?
这篇文章解释了为什么在Vue中组件的`data`属性必须是一个函数而不是一个对象。原因在于组件可能会有多个实例,如果`data`是一个对象,那么这些实例将会共享同一个`data`对象,导致数据污染。而当`data`是一个函数时,每次创建组件实例都会返回一个新的`data`对象,从而确保了数据的隔离。文章通过示例和源码分析,展示了Vue初始化`data`的过程和组件选项合并的原理,最终得出结论:根实例的`data`可以是对象或函数,而组件实例的`data`必须为函数。
【Vue面试题八】、为什么data属性是一个函数而不是一个对象?
|
缓存 边缘计算 应用服务中间件
一篇文章让你搞懂到底什么是 CDN
一篇文章让你搞懂到底什么是 CDN
1763 1
|
前端开发 小程序 JavaScript
面试官:px、em、rem、vw、rpx 之间有什么区别?
面试官:px、em、rem、vw、rpx 之间有什么区别?
452 0