一站搞定原型链:深入理解JavaScript的继承机制

目录

一站搞定原型链:深入理解JavaScript的继承机制

一、基本概念

[1. 对象与原型](#1. 对象与原型)

[2. 构造函数](#2. 构造函数)

二、原型链

三、原型链的终点

四、原型链的构造

[1. 创建对象](#1. 创建对象)

[2. 原型对象的原型](#2. 原型对象的原型)

五、继承

[1. 原型继承](#1. 原型继承)

[2. Class 语法糖](#2. Class 语法糖)

六、总结


作者:watermelo37

涉及领域:Vue、SpingBoot、Docker、LLM、python等


--------------------------温柔地对待温柔的人,包容的三观就是最大的温柔。--------------------------


一站搞定原型链:深入理解JavaScript的继承机制

JavaScript 的原型链(prototype chain)是理解 JavaScript 对象和继承机制的关键。它是通过对象的原型(prototype)属性实现的,用于实现对象属性和方法的共享和继承。以下是对 JavaScript 原型链的详细介绍,这一篇文章将会通过理论与demo相结合的方式,力争一文概括原型、对象、原型链以及基于原型链实现JavaScript的继承机制的所有方面,帮助您一站式搞定原型链。

一、基本概念

1. 对象与原型

在 JavaScript 中,每个对象都有一个与之关联的原型对象(prototype)。通过原型,对象可以继承属性和方法。

  • **prototype:**每个函数(包括构造函数但不包括箭头函数)都有一个 prototype 属性,它指向一个对象,这个对象的属性和方法可以被由这个构造函数创建的所有实例对象共享。
  • proto:每个 JavaScript 对象都有一个 proto 属性,指向它的原型对象。proto 是对象实例的属性,而 prototype 是构造函数的属性。

2. 构造函数

构造函数是用来创建对象的函数。通过 new 关键字调用构造函数,会创建一个新的对象,并将这个对象的 proto 属性指向构造函数的 prototype 对象。

javascript 复制代码
function Person(name) {
  this.name = name;
}

const person1 = new Person('Alice');
console.log(person1.__proto__ === Person.prototype); // true

二、原型链

原型链是一系列通过 proto 属性相互连接的对象,用于实现属性和方法的继承。如果访问一个对象的属性时,这个对象本身没有该属性,JavaScript 会沿着原型链向上查找,直到找到该属性或达到原型链的末端(即 null)。

javascript 复制代码
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('Alice');
person1.greet(); // Hello, my name is Alice

console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__ === null); // true

在上述代码中,当调用 person1.greet() 时,JavaScript 首先检查 person1 对象是否有 greet 方法。如果没有,则沿着原型链查找,最终在 Person.prototype 找到 greet 方法并调用。

三、原型链的终点

原型链的终点是 Object.prototype,它的 proto 属性为 null,表示原型链的终点。

四、原型链的构造

1. 创建对象

通过构造函数创建对象时,新对象的 proto 属性会指向构造函数的 prototype 对象。

javascript 复制代码
function Animal(type) {
  this.type = type;
}

const dog = new Animal('dog');
console.log(dog.__proto__ === Animal.prototype); // true

2. 原型对象的原型

Animal.prototype 本身也是一个对象,它的 proto 属性指向 Object.prototype,这是原型链的一部分。

javascript 复制代码
console.log(Animal.prototype.__proto__ === Object.prototype); // true

五、继承

1. 原型继承

通过设置原型对象实现继承。

javascript 复制代码
function Animal(type) {
  this.type = type;
}

Animal.prototype.speak = function() {
  console.log(`This ${this.type} makes a sound`);
};

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

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

Dog.prototype.bark = function() {
  console.log(`${this.name} barks`);
};

const dog = new Dog('Buddy');
dog.speak(); // This dog makes a sound
dog.bark(); // Buddy barks

在上述代码中,Dog 继承了 Animal。通过 Object.create(Animal.prototype) 设置 Dog.prototype 的原型为 Animal.prototype,从而实现继承。

2. Class 语法糖

ES6 引入了 class 语法,使得创建和继承类更加简洁。

javascript 复制代码
class Animal {
  constructor(type) {
    this.type = type;
  }

  speak() {
    console.log(`This ${this.type} makes a sound`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super('dog');
    this.name = name;
  }

  bark() {
    console.log(`${this.name} barks`);
  }
}

const dog = new Dog('Buddy');
dog.speak(); // This dog makes a sound
dog.bark(); // Buddy barks

六、总结

综上所述,可以得出:

  1. 原型链是对象通过原型实现属性和方法继承的一种机制。
  2. 每个对象都有一个 proto 属性,指向它的原型对象。
  3. 每个函数(包括构造函数)都有一个 prototype 属性,指向一个对象,这个对象的属性和方法可以被实例共享。
  4. 构造函数创建对象时,新对象的 proto 属性指向构造函数的 prototype 对象。
  5. 继承可以通过设置原型对象实现,也可以使用 ES6 的 class 语法糖。

只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

更多优质内容,请关注:

分片上传技术全解析:原理、优势与应用(含简单实现源码)

浏览器渲染揭秘:从加载到显示的全过程

你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解

通过array.filter()实现数组的数据筛选、数据清洗和链式调用

el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能

shpfile转GeoJSON且控制转化精度;如何获取GeoJSON?GeoJson结构详解

通过array.reduce()实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式等

极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图

Mapbox添加行政区矢量图层、分级设色图层、自定义鼠标悬浮框、添加天地图底图等

管理数据必备!侦听器watch用法详解

相关推荐
布莱克6051 小时前
C/C++ 中变量的声明与定义:区别、联系与常见误区
c语言·开发语言·c++·声明·定义
LabVIEW开发1 小时前
LabVIEW 局部变量为何引发竞争条件?四种同步机制
开发语言·labview
Dream-Y.ocean2 小时前
鸿蒙PC平台宅匠 3D 室内设计适配实战:基于 Electron 壳方案的 Three.js 双渲染引擎与参数化户型编辑器开发
javascript·3d·harmonyos
全栈陈序员2 小时前
【Git】从入门到精通(五)—— git add:将文件加入暂存区
大数据·git·elasticsearch
benchmark_cc2 小时前
A 股、港股、美股如何建立统一的标的主数据格式?
开发语言·python·数据分析·pandas·量化交易·股票数据·quantdash
Csvn3 小时前
性能监控
前端
Highcharts.js3 小时前
Highcharts Gantt使用符号的自定义数据标签开发甘特图示例
javascript·甘特图·highcharts·图表开发·实战代码·响应式图表
Zenova EdgeOS3 小时前
Go 工业边缘错误处理实战:用 errors 构建可追溯错误链
开发语言·数据库·golang
Csvn3 小时前
构建工具
前端
KKKlucifer3 小时前
国内数据安全服务的产品智能化转型:大模型赋能下的技术能力重构分析
大数据·数据库·重构