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 相关文章推荐
js AspxButton的客户端操作
Jun 26 Javascript
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
js替代copy(示例代码)
Nov 27 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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 中的str_replace 函数总结
2007/04/27 PHP
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
PHP实现计算器小功能
2020/08/28 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
Python中的变量和作用域详解
2016/07/13 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
咖啡书吧创业计划书
2014/01/13 职场文书
自我鉴定写作要点
2014/01/17 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
2015年母亲节寄语
2015/03/23 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python