对JS prototype的理解
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的理解的更多相关文章
- 前端基本知识(三):JS的闭包理解
JS闭包的理解 一.变量的作用域 二.如何从外部读取局部变量 三.什么是闭包 四.深入理解闭包 五.闭包的用途 六.使用闭包注意情况 七.JavaScript的垃圾回收机制 八.一些思考题 一.变量作 ...
- 前端基本知识(三):JS的闭包理解(第一个思考题有错误,已修改)
JS闭包的理解 一.变量的作用域 二.如何从外部读取局部变量 三.什么是闭包 四.深入理解闭包 五.闭包的用途 六.使用闭包注意情况 七.JavaScript的垃圾回收机制 八.一些思考题 一.变量作 ...
- 37.js----浅谈js原型的理解
浅谈Js原型的理解 一.js中的原型毫无疑问一个难点,学习如果不深入很容易就晕了! 在参考了多方面的资料后,发现解释都太过专业,对于很多还没有接触过面向对象 语言的小白来说,有理解不了里面 ...
- js面向对象怎么理解
js面向对象怎么理解 <一>. 认识对象.首先要认识对象:在编程中,对象(object)是具体的某一个实例,唯一的某一个个体.如:电脑就是一个统称,而你面前的这一台电脑就是对象.而电脑的统 ...
- 关于 this 和 prototype 的理解
1:this 的理解比较好的书是 <Javascript语言精粹> 平时我们全局写 var a = 1, 其实就是 window.a = 1; var f = function(){}, ...
- angular.js的一点理解
对angular.js的一点理解 2015-01-14 13:18 by MrGeorgeZhao, 317 阅读, 4 评论, 收藏, 编辑 最近一直在学习angular.js.不得不说和jquer ...
- JS底层知识理解之执行上下文篇
JS底层知识理解之执行上下文篇 一.什么是执行上下文(Execution Context) 执行上下文可以理解为当前代码的执行环境,它会形成一个作用域. 二.JavaScript引擎会以什么方式去处理 ...
- 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% ...
- JS闭包的理解及常见应用场景
JS闭包的理解及常见应用场景 一.总结 一句话总结: 闭包是指有权访问另一个函数作用域中的变量的函数 1.如何从外部读取函数内部的变量,为什么? 闭包:f2可以读取f1中的变量,只要把f2作为返回值, ...
随机推荐
- [翻译]【目录】编写高性能 .NET 代码
本篇是 Writing High-Performance .NET Code 的目录索引,翻译内容不定时更新,目录也会同步修改. 性能测量及工具 选择什么来衡量 平均数vs百分比 工具介绍 Visua ...
- java对excel表格上传和下载的处理方法
详见:http://www.jb51.net/article/120443.htm
- 前端JS面试题汇总 Part 2 (null与undefined/闭包/foreach与map/匿名函数/代码组织)
原文:https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questio ...
- C语言_简单的阶乘函数
include <stdio.h> long jc (int num); long jc2 (int num); int main() { long n; n = jc(); printf ...
- Hive分区表动态添加字段
场景描述: 公司埋点项目,数据从接口服务写入kafka集群,再从kafka集群消费写入HDFS文件系统,最后通过Hive进行查询输出.这其中存在一个问题就是:埋点接口中的数据字段是变化,后续会有少量字 ...
- 《android开发艺术探索》读书笔记(十一)--Android的线程和线程池
接上篇<android开发艺术探索>读书笔记(十)--Android的消息机制 No1: 在Android中可以扮演线程角色的有很多,比如AsyncTask.IntentService.H ...
- 一个逼格很低的appium自动化测试框架
Github地址: https://github.com/wuranxu 使用说明 1. 安装配置Mongo数据库 下载地址 mongo是用来存放元素定位的,截图如下: 通过case_id区分每个ca ...
- hibernate中的缓存问题与快照机制
1. 什么是缓存 数据存储到数据库里面,数据库本身是一个文件系统,使用流方式操作文件(效率不高) 改进方式:把数据存到内存中,不需要使用流方式,可以直接读取内存中的数据 缓存:内存中的临时数据,当内 ...
- 学习PHP的必备开发工具
对于PHP开发者,在互联网上有很多可用的开发工具,但对于初学者不知道哪个php开发工具比较好,找到一个合适的PHP开发工具是很难的,需要花费很多的时间精力.所以,今天常青春工作室就为初学者推荐几个最好 ...
- (2018干货系列五)最新UI设计学习路线整合
怎么学UI全链路设计 全链路设计师是参与整个商业链条,为每个会影响用户体验的地方提供设计的可解决方案,最后既满足了商业目标,又提升了产品的用户体验和设计质量,与平面设计.UI设计彻底区分开来,是真正的 ...