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 相关文章推荐
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
javascript getElementsByClassName实现代码
Oct 11 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 Javascript
JavaScript十大取整方法实例教程
Dec 03 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 删除记录实现代码
2009/03/12 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
实现动画效果核心方式的js代码
2013/09/27 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
vue-axios使用详解
2017/05/10 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
一些Python中的二维数组的操作方法
2015/05/02 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
Python中的函数作用域
2018/05/07 Python
Python 互换字典的键值对实例
2019/02/12 Python
Python实现直播推流效果
2019/11/26 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
python中str内置函数用法总结
2020/12/27 Python
python 实现IP子网计算
2021/02/18 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
求职者怎样写自荐信
2014/04/13 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技