原型

所有引用类型都有一个__proto__ (隐式原型)属性，属性值是一个对象；
所有函数都有一个prototype (显示原型)属性，属性值是一个对象；
所有引用类型的__proto__属性指向它构造函数的prototype，它们其实是同一个对象（下列代码最后一行）。

//定义一个构造函数
function Demo() {this.a = 1
this.b = 2
}
//创建一个Demo的实例对象
const d = new Demo()console.log(Demo.prototype) //显示原型属性
console.log(d.__proto__) //隐式原型属性
console.log(Demo.prototype === d.__proto__)  //返回ture

一般通过构造函数.prototype 来追加属性、方法，实例对象就可以访问了。
好处是当一个构造函数有多个实例对象时，所有实例对象都可以使用，实现代码的复用。

//通过显示原型属性操作原型对象，追加一个x属性，值为99
Demo.prototype.x = 666
console.log(d.x) //返回666

原型链

刚刚说过，原型的属性值是一个普通的对象，那么这个对象又会有__proto__属性，只要有对象就会又有__proto__属性…
那什么时候到头呢？
我们知道，js基本数据类型中的引用类型只有object。所以，最后会到object的__proto__，其值为null。

图片截自小野森森老师的视频

当一个实例对象调用属性或方法时，如果自身没有，则会去原型上找，原型没有则去原型的原型上找，一层一层向上查找形成一个链式结构，称为原型链。

【前端面试题】原型和原型链-js相关推荐

前端面试题精编2020（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
文档描述本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序. 并有热点框架(vue react node.js 全栈)前端资源以及后端视频资源和源码并基于前端进阶 ...
前端面试题 HTML、CSS、JS、Vue、Es6
第一部分 HTML&CSS整理答案什么是HTML5? 答:HTML5是最新的HTML标准. 注意:讲述HTML5推出的设计目的,以及现在市场的使用情况,浏览器支持情况等.... 设计目的 H ...
大前端面试题总结（html+css+js）
先从我们最熟悉的html+css开始 1.请简述css盒子模型一个css盒子从外到内可以分成四个部分:margin(外边距),border(边框),padding(内边距),content(内容) ...
2023前端面试题及答案整理（JS面试题）
ES6 let / const 全局作用域中,用 const 和 let 声明的变量不在 window 上,那到底在哪里?如何去获取? ES6规定,var 命令和 function 命令声明的全局变量 ...
前端面试题总结（包含答案解析）
前端面试题总结 css.html部分 1.h5新特征有哪些? 语义化标签,如nav,footer,header,section等音频.视频API 使用方法视频使用: <video src=& ...
2022前端面试题总结
2022前端面试题整理持续补充中 js JS为什么是单线程? 什么是HTTPS 什么是事件循环 toLocaleString() 方法 vue Object.defineProperty方法(详解) ...
前端面试题：JS中的原型和原型链
JS的原型和原型链算是前端面试题的热门题目了,也是参加了几场面试,感觉好多次都被问到对原型和原型链的理解,所以今天也是索性把他给整理出来,一方面方便自己以后复习查看,另一方面也是给大家分享一下我对原型 ...
前端面试题总结（js、html、小程序、React、ES6、Vue、全栈）
前端面试题总结(js.html.小程序.React.ES6.Vue.全栈) 文档描述本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序. 并有热点框架(vue re ...
web前端面试题完美整理/涵盖html,CSS、JS、浏览器、Vue、React、移动web。
本篇文章整理总结了一些前端面试题,涵盖面很广,并且面的都是知名大厂,所以这些题还是很有代表性的,都掌握以后一面基础面应该没什么问题,二面也能应付大半,奉上: css相关更多教程:https://su ...

【前端面试题】原型和原型链-js

【前端面试题】原型和原型链-js

原型

原型链

【前端面试题】原型和原型链-js相关推荐

最新文章

热门文章