JavaScript中的原型链prototype介绍


Posted in Javascript onDecember 30, 2014

JavaScript中的继承是通过原型链(prototype chain)来完成的:每个对象内部都有另外一个对象作为其prototype而存在,对象从这个prototype中继承属性(property)。对于每个对象来说,可以用以下三种方式来访问其原型对象:

1.__proto__。可以通过对象的__proto__属性来访问其原型对象。该属性仅在Firefox、Safari和Chrome中得到支持,在IE和Opera中不支持。

2.Object.getPrototypeOf()。可以将对象作为参数传入Object.getPrototypeOf()方法,执行后即返回对象的原型对象。此方法仅在ECMAScript 5标准中得到支持。

3.o.constructor.prototype。通过先获取对象的constructor函数,然后再通过访问constructor函数的prototype属性来访问到原型对象。使用此方法的前提为:对象中存在指向构造函数的constructor属性。

判断两个对象间是否存在原型链关系可以使用isPrototype()方法:

var p = {x:1};

var o = Object.create(p);

console.log(p.isPrototypeOf(o));//true

对于所有用字面量创建的对象而言,其prototype对象均为Object.prototype(作为一个特殊对象,Object.prototype没有原型对象):

var x = {a:18, b:28};

console.log(x.__proto__);//Object {}

而对于所有用new操作符创建的对象而言,其prototype对象均为constructor函数的prototype属性:

var x = {a:18, b:28};

function Test(c){

  this.c = c;

}

Test.prototype = x;

var t = new Test(38);

console.log(t);//Object {c=38, a=18, b=28}

console.log(t.__proto__);//Object {a=18, b=28}

console.log(t.__proto__.__proto__);//Object {}

JavaScript中使用new操作符创建对象的过程如下:

1.创建一个新的空对象。
2.将这个对象的__proto__属性指向constructor函数的prototype属性。
3.将这个对象作为this参数,执行constructor函数。

从上述创建过程可以得出结论:所有从同一个constructor函数中构造出来的对象,其__proto__属性(也即其原型对象)相等,也就是说,只存在一个原型对象:

var t = new Test(38);

var t2 = new Test(68);

console.log(t === t2);//false

console.log(t.__proto__ === t2.__proto__);//true

Javascript 相关文章推荐
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
javascript时间函数基础介绍
Mar 28 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
jQuery中:not选择器用法实例
Dec 30 #Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 #Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 #Javascript
jQuery中:last选择器用法实例
Dec 30 #Javascript
JavaScript中对象property的删除方法介绍
Dec 30 #Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 #Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 #Javascript
You might like
Search Engine Friendly的URL设计
2006/10/09 PHP
多php服务器实现多session并发运行
2006/10/09 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
ThinkPHP分页实例
2014/10/15 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
图片之间的切换
2006/06/26 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
webpack之devtool详解
2018/02/10 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
python环形单链表的约瑟夫问题详解
2018/09/27 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
解决python 上传图片限制格式问题
2019/10/30 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
餐厅总厨求职信
2014/03/04 职场文书
优秀班组长事迹
2014/05/31 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书