JavaScript核心概念输出——原型链

What

原型链是指通过一个个原型对象将对象的继承关系连接起来的链条⛓️。

通俗易懂的讲就是对一个物品通过设计图纸不断溯源,比如有个锤子我找到锤子的设计图纸,然后找到锤子的设计图纸(纸张)的设计图纸,再找到纸张的设计图纸的设计图纸...最终为了防止无限溯源定义了一个结束顶点原子(null)

Why

原型链的设计目的是为了实现继承和属性查找这两个功能。抽象来讲是指通过原型链不断的为物品绑定他的设计图纸从而可以让物品实现链条上所有设计图纸(继承)所具备的功能和属性(属性查找)。

How

在了解如何实现原型链之前,先给出以下这些概念

  • 原型链是为对象服务;
  • 每个对象都有他的隐式属性[[Prototype]],通过__proto__或Object.getPrototypeOf()可以访问;
  • 每个函数都有prototype属性指向他的原型对象(这个构造函数构造出来的实例对象的基本结构)
  • 所有原型链的顶层都是null;
  • 原型是指原型对象,每个设计图纸(构造函数)都有其原型对象,也就是通过这个设计图纸设计出的物品所具备的基本结构;
  • 每个对象(都是被某一设计图纸设计)都可以通过__proto__属性去获取他的设计图纸所能设计出的基本结构;
  • js中 万物皆对象;

由以上概念可以得知

原型链的逻辑结构是这样的

object.proto->Object.prototype(具体实例对象的原型链指向构造这个实例对象的构造函数的原型对象)

Object.prototype.proto->null(当构造函数的原型对象是Object.prototype的时候 这个原型对象的原型链指向顶端null,防止陷入无限循环)

show code

js 复制代码
function Animal(){};
Animal.prototype.run = function(){
    console.log('i can run');
}
function Dog(){}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.say = function(){
    console.log('i can say wang!');
}

const dog = new Dog();
dog.run(); //expect 'i can run'继承了他的原型链上dog.__proto__.__proto__上的run方法;
dog.say(); //expect 'i can say wang!';

//dog这个实例的设计图纸是Dog构造函数,因此dog的原型链指向设计图纸所能设计的基本结构也就是原型对象(Dog.prototype)
dog.__proto__ == Dog.prototype; // expect true
// dog设计图纸的基本结构的原型链(dog.__proto__.__proto__)指向这个基本结构(是个对象)的构造函数的设计图纸(Object.prototype)
dog.__proto__.__proto__ == Dog.prototype.__proto__ == Object.prototype; // expect true
// 最终Object.prototype这个原型对象的原型链指向了顶层null,不然对象是由对象的构造函数通过设计图纸(原型对象)设计出来,设计图纸又是对象再去找他的构造函数的设计图纸(原型对象)又是对象将会陷入无限循环。
dog.__proto__.__proto__.__proto__ == Object.prototype.__proto__ == null; //expect true
相关推荐
OEC小胖胖7 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水8 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台8 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴9 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust9 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
全宝10 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele11 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮11 小时前
【无标题】
开发语言·前端·javascript
fie888911 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式