当前位置: 首页 > news >正文

经常会采坑的javascript原型应试题

一. 前言

原型和原型链在面试中历来备受重视,经常被提及。说难可能也不太难,但要真正完全理解,吃透它,还是要多下功夫的。

下面为大家简单阐述我对原型和原型链的理解,若是觉得有说的不对的地方,还请帮忙指正,或者关闭页面不浪费您的宝贵时间(害怕)

二. 正文

原型

1.  JavaScript所有的对象本质上都是通过new 函数创建的,包括对象字面量的形式定义对象(相当于new Object()的语法糖)。

2.  所有的函数本质上都是通过new Function创建的,包括ObjectArray
(隐式执行,是我们看不到的但在执行过程中发生过的)

3.  所有的函数都是对象。

剖析

Prototype(显式原型)

222.png

每个函数都有一个属性prototype,它就是原型,默认情况下它是一个普通Object对象,这个对象是调用该构造函数所创建的实例的原型。

__proto__(谷歌浏览器已更新为[[prototype]],隐式原型)

JavaScript中所有对象(除了null)都具有一个__proto__属性,该属性指向该对象的原型。

上图中,函数身上的属性,会被显式的继承到,即  //this.name=’wn’, 此时显式的不存在,所以继承不到,但是函数的原型上有属性,就会被隐式的继承到,即

[[Prototype]]: Object
name: “小南”

contructor属性

333.png

JavaScript同样存在由原型指向构造函数的属性:constructor,即Func.prototype.constructor --> Func

原型链

实例对象在查找属性时,如果查找不到,就会沿着__proto__去与对象关联的原型上查找,如果还查找不到,就去找原型的原型,直至查到最顶层,这也就是原型链的概念。

原型树状图.png

参考 前端进阶面试题详细解答

通过这张图我们可以注意到,构造函数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里的一座大山,比较偏概念性,在面试时是经常出现的,所以闲时可以多拿出来琢磨。
鄙人写的也略有浅显,希望能帮到查阅的小伙伴呀。
码字不易,还望看到这里的小伙伴用用发财的小手点点赞,与君共勉!

http://www.lryc.cn/news/17756.html

相关文章:

  • 完全背包—动态规划
  • 消息队列MQ介绍
  • C语言进阶(八)—— 链表
  • 手工测试用例就是自动化测试脚本——使用ruby 1.9新特性进行自动化脚本的编写
  • RockerMQ简介和单节点部署
  • SFP光纤笼子 别称 作用 性能要点 工程要素
  • [HarekazeCTF2019]Easy Notes
  • Java学习-IO流-字符流-FileReader
  • python攻陷米哈游《元神》数据?详情请看文章。。
  • 【unity细节】基于unity子对象(如相机)为什么无法进行z轴的拖拽移动和z轴自动归位的问题
  • 如何维护固态继电器?
  • Sprng依赖注入(三):构造方法注入是如何工作的?
  • 「1」指针进阶——详解
  • JS语法让人困惑的点 “==与===”
  • 《狂飙》壁纸大嫂如此惊艳,做成日历壁纸天天看
  • 手机照片删除了怎么恢复
  • maven pom.xml 依赖的scope属性
  • git 的使用方法 (下 - 远程仓库和图形化)
  • Java基础:拼图小游戏
  • 一个跟蘑菇结缘的企业老板
  • 【Leetcode 剑指Offer】第 4 天 查找算法(简单)
  • Jenkins利用docker部署vue项目
  • 【Linux】如何将ntfs硬盘挂载到home目录下并具有读写权限
  • 拖拽删除元素、拖拽排序、拖拽预览图片和拖拽移动元素
  • yarn的global安装命令不生效
  • 如何发布自己的npm包?
  • 达梦数据库 闪回查询
  • java基础学习 day44(多态的优点和劣势)
  • Guna UI WinForms 2.0.4.4 Crack
  • 零售航母沃尔玛公布业绩:喜忧参半