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 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
关于PHP语言构造器介绍
2013/07/08 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
python使用KNN算法识别手写数字
2019/04/25 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
如何基于Python创建目录文件夹
2019/12/31 Python
python自动化发送邮件实例讲解
2021/01/04 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
招商经理岗位职责
2013/11/16 职场文书
班主任对学生的评语
2014/04/26 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
百万英镑观后感
2015/06/09 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript