Js中Prototype、__proto__、Constructor、Object、Function关系介绍
一、 Prototype、__proto__与Object、Function关系介绍
Function、Object:都是Js自带的函数对象。
prototype,每一个函数对象都有一个显式的prototype属性(普通对象没有prototype),它代表了对象的原型(Function.prototype是一个对象,有constructor和__proto__两个属性,constructor指向构造函数本身,__proto__指向于它所对应的原型对象)。
__proto__:每个对象都有一个名为__proto__的内部隐藏属性,指向于它所对应的原型对象(chrome、firefox中名称为__proto__,并且可以被访问到)。原型链正是基于__proto__才得以形成(note:不是基于函数对象的属性prototype)。
关于上面提到的函数对象,我们来看以下例子,来说明:
var o1 = {};
var o2 =new Object(); function f1(){}
var f2 = function(){}
var f3 = new Function('str','console.log(str)'); f3('aabb'); // aabb
console.log('typeof Object:'+typeof Object); //function
console.log('typeof Function:'+typeof Function); //function
console.log('typeof o1:'+typeof o1); //object
console.log('typeof o2:'+typeof o2); //object
console.log('typeof f1:'+typeof f1); //function
console.log('typeof f2:'+typeof f2); //function
console.log('typeof f3:'+typeof f3); //function
通常我们认为o1、o2是对象,即普通对象;f1、f2、f3为函数。
但是其实函数也是对象,是由Function构造的,
f3这种写法就跟对象的创建的写法一样。f1、f2最终也都像f3一样是有Function这个函数构造出来的
f1、f2、f3为函数对象,Function跟Object本身也是函数对象。
Js中每个对象(null除外)都和另一个对象相关联,通过以下例子跟内存效果图来分析Function、Object、Prototype、__proto__对象间的关系。
function Animal(){ }
var anim = new Animal(); console.log('***********Animal anim proto*****************');
console.log('typeof Animal.prototype:' +typeof Animal.prototype); //object
console.log('anim.__proto__===Animal.prototype:'+(anim.__proto__===Animal.prototype)); //true
console.log('Animal.__proto__===Function.prototype:'+(Animal.__proto__===Function.prototype)); //true
console.log('Animal.prototype.__proto__===Object.prototype:'+(Animal.prototype.__proto__===Object.prototype)); //true console.log('***********Function proto*****************');
console.log('typeof Function.prototype:'+typeof Function.prototype); //function
console.log('typeof Function.__proto__:'+typeof Function.__proto__); //function
console.log('typeof Function.prototype.prototype:'+typeof Function.prototype.prototype); //undefined
console.log('typeof Function.prototype.__proto__:'+typeof Function.prototype.__proto__); //object
console.log('Function.prototype===Function.__proto__:'+(Function.prototype===Function.__proto__)); //true console.log('***********Object proto*****************');
console.log('typeof Object.prototype:'+typeof Object.prototype); //object
console.log('typeof Object.__proto__:'+typeof Object.__proto__); //function
console.log('Object.prototype.prototype:'+Object.prototype.prototype); //undefied
console.log('Object.prototype.__proto__===null:'+(Object.prototype.__proto__===null)); //null console.log('***********Function Object proto关系*****************');
console.log('Function.prototype===Object.__proto__:'+(Function.prototype===Object.__proto__)); //true
console.log('Function.__proto__===Object.__proto__:'+(Function.__proto__===Object.__proto__)); //true
console.log('Function.prototype.__proto__===Object.prototype:'+(Function.prototype.__proto__===Object.prototype)); //true /********************* 系统定义的对象Array、Date ****************************/
console.log('**************test Array、Date****************');
var array = new Array();
var date = new Date();
console.log('array.__proto__===Array.prototype:'+(array.__proto__===Array.prototype)); //true
console.log('Array.__proto__===Function.prototype:'+(Array.__proto__===Function.prototype)); //true
console.log('date.__proto__===Date.prototype:'+(date.__proto__===Date.prototype)); //true
console.log('Date.__proto__===Function.prototype:'+(Date.__proto__===Function.prototype)); //true
Function、Object、Prototype、__proto__、constructor关系图
通过上图Function、Object、Prototype关系图中,可以得出一下几点:
所有对象(包括普通对象,函数对象)的原型链(__proto__)最终都指向了Object.prototype,而Object.prototype.__proto__===null,原型链至此结束。
var o1={}; //o1是普通对象
o1.__proto__ == Object.prototype; //true
*.prototype是一个普通对象,包含constructor和__proto__属性(constructor用来说明谁构造的实例,__proto__用来指向构造函数的prototype,继承就是通过他来实现的)。
Object是一个函数对象,也是Function构造的,Object.prototype是一个普通对象。
Object.prototype.__proto__指向null。
二 Prototype跟Constructor关系介绍
在 JavaScript 中,每个函数对象都有名为“prototype”的对象属性,该对象属性中有个名为“constructor”的属性,它反过来引用函数本身。这是一种循环引用( Animal.prototype.constructor===Animal)。
通过以下例子以及上图可以看出Prototype、constructor间的关系。
console.log('**************constructor****************'); console.log('anim.constructor===Animal:'+(anim.constructor===Animal)) ; //true
console.log('Animal===Animal.prototype.constructor:'+(Animal===Animal.prototype.constructor)) ; //true
console.log('Animal.constructor===Function.prototype.constructor:'+(Animal.constructor===Function.prototype.constructor)); //true
console.log('Function.prototype.constructor===Function:'+(Function.prototype.constructor===Function)); //true
console.log('Function.constructor===Function.prototype.constructor:'+(Function.constructor===Function.prototype.constructor)); //true console.log('Object.prototype.constructor===Object:'+(Object.prototype.constructor===Object)); //true
console.log('Object.constructor====Function:'+(Object.constructor===Function)); //true
注意Object.constructor===Function;本身Object就是Function函数构造出来的
如何查找一个对象的constructor,就是在该对象的原型链上寻找碰到的第一个constructor属性所指向的对象。
====================*参考资料*=========================================
原文地址:http://www.blogjava.net/heavensay/archive/2013/10/20/405440.html 部分有所改动
阮一峰的这几篇文章讲解的也非常好,有助于理解继承
http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html Javascript继承机制的设计思想
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html Javascript 面向对象编程(一):封装
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html Javascript面向对象编程(二):构造函数的继承
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html Javascript面向对象编程(三):非构造函数的继承
Js中Prototype、__proto__、Constructor、Object、Function关系介绍的更多相关文章
- Javascript Prototype __proto__ constructor 三者的关系
JavaScript三大毒瘤 --- this,原型链,作用域 在我等菜鸟一步一步升级中的过程中,这三个概念总是困扰这我们(可能只有我吧,我比较蠢).这三个东西往往都很绕,今天我就来分享一下我对原型. ...
- js中prototype和constructor的认识
最初对js中 object.constructor 的认识: 我们都知道,在JS中有一个function的东西.一般人们叫它函数.比如下面的代码 function Person(name) { ...
- js中prototype,constructor的理解
连看4篇前辈的文章,记录一些知识点 Javascript继承机制的设计思想 Javascript 面向对象编程(一):封装 Javascript面向对象编程(二):构造函数的继承 Javascript ...
- 【转】Js中Prototype、__proto__、Constructor、Object、Function关系介绍
一 Prototype.__proto__与Object.Function关系介绍 Function.Object:Js自带的函数对象. prototype,每一个 ...
- 再次理解JS的prototype,__proto__和constructor
个人总结: 下面这篇文章很好的讲解了js原型,原型链,个人的总结是要记住这三个属性 prototype.__proto__和constructor 首先明确,js中一切都是对象object(A). ( ...
- vue.js 中 data, prop, computed, method,watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- js中prototype,__proto__,constructor之间的关系
首先,我们需要了解三点: 1. 只要创建一个任意新函数,就会根据一个prototype属性,该属性指向函数的原型对象: 2. 每一个原型对象都会自动获得一个constructor属性,该属性只想pro ...
- js in depth: Object & Function & prototype & __proto__ & constructor & classes inherit
js in depth: Object & Function & prototype & proto & constructor & classes inher ...
- javascript中prototype、constructor以及__proto__之间的三角关系
三者暧昧关系简单整理 在javascript中,prototype.constructor以及__proto__之间有着“著名”的剪不断理还乱的三角关系,楼主就着自己对它们的浅显认识,来粗略地理理以备 ...
随机推荐
- delphi 相对路径
..代表上级目录 .代表当前目录 \代表目录分隔 ..\..\表上上一级目录
- Eclipse 工程Clear与build的作用
由于eclipse的编译是基于时间戳的判断机制的.因此当你按build all的时候有些eclipse认为时间戳没有改变的类不会被编译.因此你可以先clean一下再编译.这个时候eclipse会将所有 ...
- linux线程同步(4)-自旋锁
自旋锁与互斥量功能一样,唯一一点不同的就是互斥量阻塞后休眠让出cpu,而自旋锁阻塞后不会让出cpu,会一直忙等待,直到得到锁!!! 自旋锁在用户态使用的比较少,在内核使用的比较多!自旋锁的使用场景:锁 ...
- Solrj和Solr DIH索引效率对比分析
测试软件环境: 1.16G windows7 x64 32core cpu . 2.jdk 1.7 tomcat 6.x solr 4.8 数据库软件环境: 1.16G windows7 x64 ...
- Miller-Rabin素数快速检测
满足费马小定理 a^(n-1) === 1(mod n) --->伪素数 对于所有a belong Zn*,总存在满足的合数n,称为Carmichael数 ------------- ...
- REST架构
网络上的所有事物都被抽象为资源(resource): 每个资源对应一个唯一的资源标识符(resource identifier): 通过通用的连接器接口(generic connector inter ...
- DOM、Window操作
一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 一.基本语法: 数据类型(字符串,小数,整数,布尔,时间) var, v ...
- [No000033]码农网-如何锻炼出最牛程序员的编码套路
最近,我大量阅读了Steve Yegge的文章.其中有一篇叫"Practicing Programming"(练习编程),写成于2005年,读后令我惊讶不已: 与你所相信的恰恰相反 ...
- [No000018]都在背单词,为啥学霸那么厉害-如何在一天内记200个单词?
- Centos6 修改max user processes limits
ulimit:显示(或设置)用户可以使用的资源的限制(limit),这限制分为软限制(当前限制)和硬限制(上限),其中硬限制是软限制的上限值,应用程序在运行过程中使用的系统资源不超过相应的软限制,任何 ...