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 相关文章推荐
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
vue实现在线翻译功能
Sep 27 Javascript
vuex分模块后,实现获取state的值
Jul 26 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
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
python使用建议技巧分享(三)
2020/08/18 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
大学毕业后的十年规划
2014/01/07 职场文书
学生自我评价范文
2014/02/02 职场文书
起诉状范本
2015/05/20 职场文书
如何写好开幕词?
2019/06/24 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
python基础之错误和异常处理
2021/10/24 Python