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 attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
vue远程加载sfc组件思路详解
Dec 25 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
JavaScript canvas实现雨滴特效
Jan 10 Javascript
vue3获取当前路由地址
Feb 18 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
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
vue实现通讯录功能
2018/07/14 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Python3.x中自定义比较函数
2015/04/24 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
师范生自荐信
2013/10/27 职场文书
历史专业毕业生的自我鉴定
2013/11/15 职场文书
文化产业实施方案
2014/06/07 职场文书
刑事起诉书范文
2015/05/19 职场文书
致青春观后感
2015/06/09 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
工作建议书范文
2019/07/08 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
SQL 聚合、分组和排序
2021/11/11 MySQL
MySQL分区以及建索引的方法总结
2022/04/13 MySQL