经常会采坑的js原型应试题
一. 前言
原型和原型链在面试中历来备受重视,经常被提及。说难可能也不太难,但要真正完全理解,吃透它,还是要多下功夫的。
下面为大家简单阐述我对原型和原型链的理解,若是觉得有说的不对的地方,还请帮忙指正,或者关闭页面不浪费您的宝贵时间(害怕)
二. 正文
原型
JavaScript
所有的对象本质上都是通过new 函数
创建的,包括对象字面量的形式定义对象(相当于new Object()
的语法糖)。- 所有的函数本质上都是通过
new Function
创建的,包括Object
、Array
等 (隐式执行,是我们看不到的但在执行过程中发生过的) - 所有的函数都是对象。
剖析
Prototype(显式原型)
每个函数都有一个属性prototype
,它就是原型,默认情况下它是一个普通Object
对象,这个对象是调用该构造函数所创建的实例的原型。
__proto__(谷歌浏览器已更新为[[prototype]],隐式原型)
JavaScript
中所有对象(除了null
)都具有一个__proto__
属性,该属性指向该对象的原型。
上图中,函数身上的属性,会被显式的继承到,即 //this.name=’wn’, 此时显式的不存在,所以继承不到,但是函数的原型上有属性,就会被隐式的继承到,即
[Prototype]: Objectundefinedname: "小南"
contructor属性
JavaScript
同样存在由原型指向构造函数的属性:constructor
,即Func.prototype.constructor --> Func
原型链
实例对象在查找属性时,如果查找不到,就会沿着__proto__
去与对象关联的原型上查找,如果还查找不到,就去找原型的原型,直至查到最顶层,这也就是原型链的概念。
参考 前端进阶面试题详细解答
通过这张图我们可以注意到,构造函数Foo
的原型prototype
和 构造函数Foo
所创建出来的对象实例f1
,f2
的原型__proto__
是一样的都指向Foo().prototype
.
这里我们可以继续思考,往下探索一下,既然Foo().prototype也是一个对象,那是不是Foo()
.prototype
也有自己的对象原型__proto__
呢.答案是肯定的,图中我们也可以看到Foo()
.prototype
的对象原型__proto__
指向的是Object.prototype. Object作为最顶端的构造函数,可以看到所有的对象都会通过原型链指向它.这就是为什么新建的对象为什么能够使用 toString() 等方法的原因.
但是我们可以发现Object.prototype
也有自己的__proto__
但是却指向的是null
,null
为原型链的终点.
注意!!!
那么这里还个问题,细心的小伙伴已经发现了,构造函数有自己的原型prototype,但是构造函数也是对象啊,构造函数也有没有__proto__
呢.答案是有的.因为每个 JavaScript 函数实际上都是一个 Function
对象。运行 function(){}).constructor === Function // true
便可以得到这个结论。
而且通过图我们也可以发现 Foo
的__proto__
指向Function.prototype
,而且这里还有个特例,上文也说明了每个 JavaScript 函数实际上都是一个 Function
对象,所以Function
的构造函数原型prototype
和对象原型__proto__
都是指向同一个Function.prototype
.
结语
原型和原型链算是js里的一座大山,比较偏概念性,在面试时是经常出现的,所以闲时可以多拿出来琢磨。
鄙人写的也略有浅显,希望能帮到查阅的小伙伴呀。
相关文章
- js书写原生ajax,JS 原生ajax写法
- yuicompressor java_使用yuicompressor-2.4.8.jar压缩js文件报错了(jdk1.8.0_25)「建议收藏」
- php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码[通俗易懂]
- 用JS获取地址栏url参数的方法_js的url是啥
- 【说站】js中resize事件是什么
- JS面试题-js新增基本数据类型BigInt
- JS对象转数组_js怎么把数组转成对象
- Vue.js – 引入外部 JS 文件
- js定时器setinterval_nodejs定时器
- js 数组去除重复数据-5 个提升你 JS 编码水平的实例
- js 怎么使用正则表达式-JavaScript 正则表达式
- 原生 JS 实现 HTML 转 Markdown ,html2md.js
- get两个js小技能——JS截取视频第一帧&图片转Base64
- 背负着整个现代网络,却因“缺钱”放弃开源,core-js 负责人痛诉:“免费开源软件的根基已经崩塌了”
- 【源码】PDF.js批注注释插件库(纯JS). 创建和保存PDF批注(PDF 高亮/签名/插图/截屏/文本框/画笔/多边形)-pdf.js
- 创建JS文件:在Linux下实现自动化任务(linux创建js文件)
- 使用JS实现Redis数据读取(js读取redis)
- 利用 JS 实现 Redis 的连接(js连接redis)
- 妙用JS获取Oracle信息的快速方法(js获取Oracle)
- 使用JS操作Oracle数据库探索潜在可能性(js和oracle数据库)
- JavaScript探索之旅掌握Oracle和JS的完美融合(js与oracle)
- 用js控制css的不错的方法
- js动态生成按钮并动态生成8位随机数
- 客户端限制只能上传jpg格式图片的js代码
- js获取坐标通过JS得到当前焦点(鼠标)的坐标属性
- js时间日期和毫秒的相互转换
- java与js代码互调示例代码
- js和php如何获取当前url的内容
- js有序数组的连接问题
- js获取事件源及触发该事件的对象
- JS创建自定义表格具体实现
- js显示base64编码的二进制流网页图片
- node.js中的console用法总结