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中length属性的探索
Jul 31 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
PHP中header用法小结
2016/05/23 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
跟老齐学Python之集合(set)
2014/09/24 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
医学生自荐信范文
2013/12/03 职场文书
师范毕业生个人求职信
2013/12/09 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
入职担保书范文
2014/05/21 职场文书
小学运动会班级口号
2014/06/09 职场文书
2014年化验室工作总结
2014/11/21 职场文书
优秀教研组申报材料
2014/12/26 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
用Python生成会跳舞的美女
2022/01/18 Python