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 相关文章推荐
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
xml转json的js代码
Aug 28 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
一个SQL管理员的web接口
2006/10/09 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
用原生JS实现简单的多选框功能
2017/06/12 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
微信小程序日期选择器实例代码
2018/07/18 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
JS回调函数深入理解
2019/10/16 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
Python中的self用法详解
2019/08/06 Python
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
Ajax的优点和缺点
2014/11/21 面试题
大学生毕业求职自荐书范文
2014/02/04 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
毕业典礼致辞
2015/07/29 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python