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 相关文章推荐
用javascript自动显示最后更新时间
Mar 15 Javascript
Javascript中的相等与不等运算
Apr 25 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
浅析js封装和作用域
Jul 09 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
Paypal支付不完全指北
Jun 04 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
PHP Stream_*系列函数
2010/08/01 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
jquery实现手风琴效果实例代码
2013/11/15 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成"...")
2016/11/28 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
如何基于python生成list的所有的子集
2019/11/11 Python
python 实现多线程下载视频的代码
2019/11/15 Python
python如何调用java类
2020/07/05 Python
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
项目开发计划书
2014/01/09 职场文书
手工社团活动方案
2014/02/17 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
争做文明公民倡议书
2014/08/29 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
单位租房协议书样本
2014/10/30 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
2014年营业员工作总结
2014/11/18 职场文书
党员示范岗材料
2014/12/19 职场文书
求职自荐信怎么写
2015/03/04 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
JavaScript 对象创建的3种方法
2021/11/17 Javascript