博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS中prototype和__proto__分析
阅读量:5279 次
发布时间:2019-06-14

本文共 2274 字,大约阅读时间需要 7 分钟。

    今天偶然看到js继承的问题,想到之前看过的关于prototype原型链集成,可是一直不明白 prototype和__proto__之间到底什么关系,于是抽出时间来查了相关资料研究了一下午,下面是今天的小成果。希望大家多多批评指正。

   首先 先看js中原型链继承的方式

function monkey(){    this.climb = function (){        alert('I can climb')    }} function human(){    this.say = function (){      alert('I can say');    } } var Tom = new human(); Tom.say();//毫无疑问 弹出 i can say

这时我们想要Tom拥有mokey中的climb方法只需做如下修改

function monkey(){    this.climb = function (){        alert('I can climb')    }} function human(){    this.say = function (){      alert('I can say');    } }human.prototype = new monkey();//human的原型赋值为monkey的实例var Tom = new human();Tom.say();Tom.climb();//此时弹出 i can climb

通过给human的原型赋值 完成了继承。

下面我们来看__proto__和prototype之间的关系

在js中,每一个对象都有一个__proto__属性指向其原型对象

我们都知道 js 中一切皆对象,那么任何一个自定义函数也是一个对象。

那么我们看如下代码

function human(){
//human 为自定义函数 本身就是一个对象 this.say = function (){   alert('I can say'); } }var Tom = new human();console.log(human.__proto__);//输出为function Empty(){}console.log(human.prototype);//输出为human{}console.log(Tom.__proto__);//输出为human{}console.log(Tom.prototype);//输出为undefinedconsole.log(Tom.__proto__ === human.prototype);//输出为true

如上代码所示,human方法是自定义方法,那么它也是一个对象 ,于是human方法也就有__proto__属性指向其原型对象,

打印human的__proto__属性发现是 function Empty(){}

而human的prototype 是 human{},Tom.__proto__ 也是human{}

而 打印实例Tom.__proto__ === human.prototype 是 返回为true

通过以上可以发现 实例的__proto__就是方法(也可以叫类)的prototype;

而实例的prototype是undefined 未定义,也就是说 实例没有prototype属性

 

祖先Object

js中对象有一个共同的祖先那就是Object 

所有的对象的最终原型对象都是Object , 以上代码中 human其实相当于一个函数对象实例,根据 实例的__proto__就是方法(也可以叫类)的prototype

即 human.__proto__  == Function.prototype

而 Function.prototype.__proto__ 就等于 Object.protype

alert( Function.prototype.__proto__ === Object.prototype);//弹出 true

而Object.prototyep.__proto__ 为null

alert(Object.prototype.__proto__);//弹出 null

这也说明了 Object再往上没有祖先了

既然Object是祖先 那么我们可以给Object.__proto__添加方法从而是所有的对象都拥有这个方法

function human(){    this.say = function (){      alert('I can say');    } }Object.prototype.sing = function(){ alert('i can sing');}var Tom = new human();Tom.sing();//弹出 i can sing

总结

 实例的__proto__等于方法(也可以叫类)的prototype;

而方法本身就可以看做是Function的实例

Function又可是看做是 Object的实例

即 方法的__proto__等于 Function.prototype 

Function.prototype.__proto__ == Object.prototype 

 

转载于:https://www.cnblogs.com/fanxiaofan/p/4026998.html

你可能感兴趣的文章
WPF无边框实现拖动效果
查看>>
css 深入浅出定位
查看>>
如何添加自己的code snippet
查看>>
Java重写《C经典100题》 --34
查看>>
移动端简单拖拽
查看>>
《nodejs+gulp+webpack基础实战篇》课程笔记(六)--附加课
查看>>
2.9 DRBD编译安装中出现的问题及解决小结
查看>>
嵌入式系统分类介绍
查看>>
[MSSQL]附加.MDF文件时出现"所指定的文件不是有效的SQL Server数据库文件"解决
查看>>
bug:margin合并
查看>>
常用nginx rewrite重定向-跳转实例:
查看>>
理解JVM GC
查看>>
异步与闭包与fetch
查看>>
Linux C 遍历指定目录
查看>>
iOS常用宏定义
查看>>
springMVC返回指定结果集
查看>>
CVE-2014-1767
查看>>
Jni_Linux_01_转
查看>>
Codeforces Round #382 (Div. 2) C. Tennis Championship
查看>>
图像质量评价指标之 PSNR 和 SSIM
查看>>