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二维数组实现的省市联动菜单
May 08 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
js 实现验证码输入框示例详解
Sep 23 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 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
javascript下string.format函数补充
2010/08/24 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
2016/08/02 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
python 自动批量打开网页的示例
2019/02/21 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
医生自荐信
2013/10/11 职场文书
会计岗位职责范本
2014/03/07 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
秋天的图画教学反思
2014/05/01 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
初三语文教学计划
2015/01/22 职场文书
求职自我评价怎么写
2015/03/09 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
小学教师工作总结2015
2015/04/07 职场文书