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重要知识更新
Jul 08 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 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&java(一)
2006/10/09 PHP
php获取淘宝分类id示例
2014/01/16 PHP
PHP代码优化的53个细节
2014/03/03 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
js实现单一html页面两套css切换代码
2013/04/11 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
vue实现扫码功能
2020/01/17 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
python读写json文件的简单实现
2017/04/11 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
财务管理专业应届毕业生求职信
2013/09/22 职场文书
艺术系应届生的自我评价
2013/10/19 职场文书
英语专业学生个人求职信范文
2014/01/06 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
推荐信范文大全
2015/03/27 职场文书
护理工作心得体会
2016/01/22 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
详解Redis复制原理
2021/06/04 Redis
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android