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 04 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
js实现橱窗展示效果
Jan 11 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
原生js实现随机点名
Jul 05 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
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
js实现楼层导航功能
2017/02/23 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python连接字符串过程详解
2020/01/06 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
建筑学推荐信
2013/11/03 职场文书
黄河的主人教学反思
2014/02/07 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
毕业生评语大全
2015/01/04 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技