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中xml操作实现代码
Nov 21 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
jquery 使用简明教程
Mar 05 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
Vue触发input选取文件点击事件操作
Aug 07 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 4.2书写安全的脚本
2006/10/09 PHP
用PHP产生动态的影像图
2006/10/09 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
Python中的zipfile模块使用详解
2015/06/25 Python
django_orm查询性能优化方法
2018/08/20 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
详解python变量与数据类型
2020/08/25 Python
为数据库创建索引都需要注意些什么
2012/07/17 面试题
财务副总经理工作职责
2013/11/25 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
python 如何用terminal输入参数
2021/05/25 Python