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
相关推荐
paopaokaka_luck1 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
SY_FC5 小时前
uniapp input 聚焦时键盘弹起滚动到对应的部分
javascript·vue.js·elementui
渣渣盟7 小时前
JavaScript核心概念全解析
开发语言·javascript·es6
Carlos_sam8 小时前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录8 小时前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
拾光拾趣录8 小时前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
遂心_9 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
@大迁世界10 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架
DownToEarth10 小时前
H5实现获取当前定位
javascript