1.什么是prototype?

function F() {}
f1 = new F();
f2 = new F();

以上的代码,F()是一个构造函数,f1和f2是由这个构造函数产生的对象。

prototype是构造函数的一个属性,它的值就是由这个构造函数构造出来的对象的原型对象。(换句话来说,prototype既是构造函数的属性,也是由这个构造函数构造出来的对象的原型对象)

原型对象的属性和方法都会被“继承”,换句话来说,F.prototype的属性和方法都会被f1和f2“继承”。

2.什么是__proto__?它与prototype有什么区别?

__proto__是某个对象的属性,它指向这个对象的原型对象。从上面的例子分析,f1.__proto__和f2.__proto__就等同于F.prototype。

但是,我们一般不会直接访问__proto__这个属性,而是采用以下的方法去访问:

Object.getPrototypeOf(f1)
Object.getPrototypeOf(f2)

先用一张图总结一下上面的东西吧:

3.原型链

每个对象都有自己的原型对象,那一层层地,就形成了原型链。原型链的最上端,就是Object.prototype(注意这里的Object是一个构造函数啊),它没有原型对象(为null)。原型链后面的对象,能够使用前面的属性和方法(假如没有覆盖掉的话)。因此,有着相同原型对象的两个对象,就可以使用与原型对象相同的方法和属性了,这也是使用prototype的好处了。

4.constructor

prototype对象有一个constructor属性,F.prototype.constructor的值就是F本身。用文字描述,一个函数对象的原型对象的constructor属性指向这个函数本身。

利用这一点,我们可以进行判断一个对象是否由某个构造函数产生的。(利用这个例子来理解constructor属性吧)

function A(){};
var a = new A();
console.log(a.constructor===A) //true

分析一下以上的代码,a原本是没有constructor这个属性的,但是它的原型对象有,所以它“继承”了下来,自己也能使用这个属性。即a.constructor,其实也等于a.__proto__.constructor和A.prototype.constructor,而A.prototype.constructor的值,就是A,因此返回true了。

关于constructor的作用还有很多,这里不详述了。

5.总结

这篇文章只是谈谈我对prototype这东西的理解,供日后回看,因此写得很不详尽。更为详细的分析,包括它的作用,更多的分析,请看下面的网页:

http://www.jb51.net/article/91826.htm

假如不理解prototype和__proto__,下面的网页会更好地帮助理解:

http://blog.csdn.net/ligang2585116/article/details/53522741

对JS prototype的理解的更多相关文章

  1. 前端基本知识(三):JS的闭包理解

    JS闭包的理解 一.变量的作用域 二.如何从外部读取局部变量 三.什么是闭包 四.深入理解闭包 五.闭包的用途 六.使用闭包注意情况 七.JavaScript的垃圾回收机制 八.一些思考题 一.变量作 ...

  2. 前端基本知识(三):JS的闭包理解(第一个思考题有错误,已修改)

    JS闭包的理解 一.变量的作用域 二.如何从外部读取局部变量 三.什么是闭包 四.深入理解闭包 五.闭包的用途 六.使用闭包注意情况 七.JavaScript的垃圾回收机制 八.一些思考题 一.变量作 ...

  3. 37.js----浅谈js原型的理解

    浅谈Js原型的理解 一.js中的原型毫无疑问一个难点,学习如果不深入很容易就晕了!    在参考了多方面的资料后,发现解释都太过专业,对于很多还没有接触过面向对象    语言的小白来说,有理解不了里面 ...

  4. js面向对象怎么理解

    js面向对象怎么理解 <一>. 认识对象.首先要认识对象:在编程中,对象(object)是具体的某一个实例,唯一的某一个个体.如:电脑就是一个统称,而你面前的这一台电脑就是对象.而电脑的统 ...

  5. 关于 this 和 prototype 的理解

    1:this 的理解比较好的书是 <Javascript语言精粹> 平时我们全局写 var a = 1, 其实就是 window.a = 1; var f = function(){},  ...

  6. angular.js的一点理解

    对angular.js的一点理解 2015-01-14 13:18 by MrGeorgeZhao, 317 阅读, 4 评论, 收藏, 编辑 最近一直在学习angular.js.不得不说和jquer ...

  7. JS底层知识理解之执行上下文篇

    JS底层知识理解之执行上下文篇 一.什么是执行上下文(Execution Context) 执行上下文可以理解为当前代码的执行环境,它会形成一个作用域. 二.JavaScript引擎会以什么方式去处理 ...

  8. js prototype 原型

    //https://xxxgitone.github.io/2017/06/10/JavaScript%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1%E7%9A%84%E4% ...

  9. JS闭包的理解及常见应用场景

    JS闭包的理解及常见应用场景 一.总结 一句话总结: 闭包是指有权访问另一个函数作用域中的变量的函数 1.如何从外部读取函数内部的变量,为什么? 闭包:f2可以读取f1中的变量,只要把f2作为返回值, ...

随机推荐

  1. bzoj2151 种树 双向链表+堆

    2151: 种树 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 1151  Solved: 613[Submit][Status][Discuss] ...

  2. 支持ipV6和ipV4的客户端编程

    ipv4和ipv6在socket初始化的时候是不一样的. ipv4 socket初始化: int CClient::InitSocket(CString strIP, short portNum) { ...

  3. 如何使用 VS生成动态库?

    如何使用 VS生成动态库? //.cpp 文件默认定义了 __cplusplus 宏 #ifdef __cplusplus extern "C"{ #endif xxx #ifde ...

  4. hihoCoder1319 岛屿周长 (bfs)

    思路:从给定坐标开始bfs,将所有联通点标记,然后把每个联通点的四个方向都判断一下,如果这个方向相邻的是一个非联通点说明需要把这条边实在最外围,即周长的一部分. AC代码 #include <s ...

  5. Hama顶点编程

    Hama是基于HDFS上的BSP模型实现. Apache Hame是Google Pregel的开源实现 Pregel是Google提出的一个面向大规模图计算的通用编程模型.许多实际应用中都涉及到大型 ...

  6. 阻止微信浏览器/QQ浏览器长按弹框“在浏览器打开”

    这个弹框实际上等同于PC环境下的鼠标右键的弹框,因此只要禁止页面的弹框事件就能完美屏蔽该弹框对我们功能带来的影响.程序代码如下: document.oncontextmenu=function(e){ ...

  7. AfxBeginThread和CreateThread具体区别

    1. 具体说来,CreateThread这个函数是windows提供给用户的 API函数,是SDK的标准形式,在使用的过程 中要考虑到进程的同步与互斥的关系,进程间的同步互斥等一系列会导致操作系统死锁 ...

  8. HTML多表头表格

    1.多表头表格代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  9. Axure使用心得分享

    因为之前很少涉及到原型设计,所以对这个原型设计工具也不太熟悉,第一次使用走了不少的弯路,在这里把自己在使用过程中的心得跟大家分享一下,希望能够对大家有所帮助. 一. 元素的选择 我觉得这是Axure原 ...

  10. 常用UI模板,loading框,提醒框,弹框确认框

    css部分 #public_box{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:rgba(0,0 ...