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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
JavaScript 指导方针
Apr 05 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
javascript数组includes、reduce的基本使用
Jul 02 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 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
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
js几个验证函数代码
2010/03/25 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
用JS实现选项卡
2020/03/23 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
详解Python的Django框架中的templates设置
2015/05/11 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
python如何将多个PDF进行合并
2019/08/13 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
python3注册全局热键的实现
2020/03/22 Python
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
英文版网络工程师求职信
2013/10/28 职场文书
药学专业个人自我评价
2013/11/11 职场文书
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
如何利用React实现图片识别App
2022/02/18 Javascript
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
使用scrapy实现增量式爬取方式
2022/06/21 Python