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 相关文章推荐
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
js有序数组的连接问题
2013/10/01 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
js对象基础实例分析
2015/01/13 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
Python Flask框架扩展操作示例
2019/05/03 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
波兰补充商店:Muscle Power
2018/10/29 全球购物
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
大学生见习总结报告
2015/06/24 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python