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的动态添加控件并取值的实现代码
Sep 24 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
JS制作简单的三级联动
Mar 18 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 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
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
Yii清理缓存的方法
2016/01/06 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
asp 取文本框名称代码
2008/12/02 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
javascript操作css属性
2013/12/30 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
浅谈javascript的调试
2015/01/28 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
JS实现百度搜索框
2021/02/25 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
python获取栅格点和面值的实现
2020/03/10 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
推广普通话的宣传语
2015/07/13 职场文书