我所理解的原型原型链

一、题目

我们先看一道题目

    var F = function() {};   Object.prototype.a = function() {console.log('a');};Function.prototype.b = function() {console.log('b');}var f = new F();f.a(); f.b();F.a(); F.b();
复制代码

二、解题关键

借用网络上的图片，看起来有点绕，待我们一点一点理解。有以下几点：

三、图片解析

__proto__ 是原型链的链接
通过 __proto__ 查找到prototype， prototype是原型的关键字
var f = new F()
f: 是实例对象
F：是构造函数
f通过__proto__找到F.prototype,所以f.__proto__ === F.prototype
构造器的原型属于对象 Object ，也就是说 F.prototype 是 new object 出来的。所以 F.prototype通过 __proto__ 可以找到 Object.prototype
即：F.prototype.__proto__ === Object.Prototype
function Function() 是函数构造器
Function.__proto__ === Function.prototype
Function.prototype 是对象,所以Function.prototype.__proto__ === Object.prototype
终极：Objecy.prototype.__proto__ === null

四、题目解析

再回过头来看上面的题目

f.a()，f 是实例对象， f没有a属性，通过f.__proto__找到原型F.prototype，F.prototype上也没有a属性，继续通过 F.prototype.__proto__找到Object.prototype,发现a属性，所以输出a
f.b()，同理找到 Object.prototype,发现Object.prototype也没有b属性，继续通过__proto__查找到了null，所以b函数不存在，浏览器报错。则 F.a()，F.b()也不会执行
若注释了 f.b()，执行F.a()。F是函数，F上没有a属性，通过__proto__找到Function.prototype，发现Function.prototype没有a属性，继续通过__proto__,找到Object.prototype,找到了a属性，输出a
若注释了 f.b()，执行F.b()。同理找到Function.prototype，发现b属性，输出b

五、参考资料

JS 原型与原型链

如果有理解不对的地方，欢迎大佬指正！

我所理解的原型原型链相关推荐

JS难点剖析-原型原型链
2019独角兽企业重金招聘Python工程师标准>>> js的原型&原型链&闭包,在很多人看来是区分JS程序员水平的关键知识点,当然对这句话我不是十分赞同.但是掌握这 ...
JavaScript——原型/原型链中的顶层对象（图解）
本篇需要提前了解的知识储备:原型和原型链,以下仅概要介绍,不作详细讲解. 详细学习可参考: JavaScript--面向对象(封装):https://blog.csdn.net/qq_29493173 ...
js原型和原型链_初识JS原型/原型链/原型继承
本文思路: 原型->原型链->原型继承->基于原型的继承/ES6中的继承->__proto__与prototype 首先我们知道JS中有对象,比如: var 但是在我们没有对这 ...
深入理解Linux内核通知链(Notifier)
数据结构内核使用struct notifier_block结构代表一个notifier typedef int (*notifier_fn_t)(struct notifier_block *nb, ...
我所理解的原型原型链 1
一.题目我们先看一道题目 var F = function() {}; Object.prototype.a = function() {console.log('a');};Function.pr ...
新手理解的JS原型链
一直以来对于JavaScript 的原型链的概念,始终有些东西有一种模糊感,最近刚好有时间就塌下心认真的把<JavaScript高级程序设计>中相关内容认真读了一遍,也查看了很多网上很多资 ...
如何更加简单的理解JS中的原型原型链概念
前面写了很多关于前端经验之谈,今天就来点干货吧.这篇文章将会介绍原型这个概念原型是整个Javascript中比较重要的概念,如果面向对象想要学好,那么这个东西你必须要了解,不然后面的原型链,继承,多 ...
新手理解的JS原型链 1
一直以来对于JavaScript 的原型链的概念,始终有些东西有一种模糊感,最近刚好有时间就塌下心认真的把<JavaScript高级程序设计>中相关内容认真读了一遍,也查看了很多网上很多资 ...
[我的理解]Javascript的原型与原型链
一.原型与原型链的定义原型:为其他对象提供共享属性的对象注:当构造器创建一个对象,为了解决对象的属性引用,该对象会隐式引用构造器的"prototype"属性.程序通过const ...

我所理解的原型原型链

一、题目

二、解题关键

三、图片解析

四、题目解析

五、参考资料

我所理解的原型原型链相关推荐

最新文章

热门文章