javascript原型链
来源:互联网 发布:启动盘制作工具mac版 编辑:程序博客网 时间:2024/06/10 00:32
原型链一直是个很抽象的概念,看不到,摸不着.随着最近对JavaScript进一步的学习,我对原型链有了一点理解,下面讲出来.
基础知识
在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链,我们称之为原型链.
访问一个对象的原型可以使用ES5中的Object.getPrototypeOf方法,或者ES6中的__proto__属性.
原型链的作用是用来实现继承,比如我们新建一个数组,数组的方法就是从数组的原型上继承而来的.
var arr = [];arr.map === Array.prototype.map //arr.map是从arr.__proto__上继承下来的,arr.__proto__也就是Array.prototype
图形化原型链
虽然我们都说"原型链",但实际上,在不考虑网页中frame的情况,js引擎在执行期间的某一时刻,所有存在的对象组成的是一棵原型树.默认情况下,只有一棵树.根节点可以说是Object.prototype,也可以说是null.
但我们可以再建立一棵原型树,通过使用Object.create方法
var foo = Object.create(null); //foo是一个对象,但它是游离的,不属于已有的那棵原型树var bar = Object.create(foo); //bar的原型是foovar baz = Object.create(foo); //baz的原型是foo
这样我们有了第二棵原型树
遍历原型链
我们没有办法遍历到所有以某个对象为原型的对象,但我们可以向上遍历,获取到一个对象所有的上层原型,这个原型链必定是线性的,尽头是null.
function getPrototypeChain(object) { var protoChain = []; while (object = object.__proto__) { protoChain.push(object); } protoChain.push(null); return protoChain;}
试验一下,不同的环境实现不同,显示形式也不同.下面是在chrome控制台中的显示.
>getPrototypeChain(new String(""))[String, Object, null] //依次是String.prototype,Object.prototype,null >getPrototypeChain(function(){})[function Empty() {}, Object, null] //依次是Function.prototype,Object.prototype,null
内置类型的对象的原型链并不长,下面试试宿主对象.
>getPrototypeChain(document.createElement("div"))[HTMLDivElement, HTMLElement, Element, Node, Object, null]
这个就长多了.
超长原型链
可以看出来,我们平时使用的对象并没有很长的原型链.但可以自己构造一个.
function Foo() {}for (var i = 0; i < 100; i++) { Foo.prototype["prop" + i] = i; Foo.prototype = new Foo;}console.dir(getPrototypeChain(new Foo));
最后的这个new Foo有多少个上层原型呢?
转自:http://www.cnblogs.com/ziyunfei/archive/2012/10/15/2723963.html- JavaScript原型,原型链
- JavaScript-原型、原型链
- JavaScript原型,原型链
- JavaScript-原型、原型链
- JavaScript原型对象、原型属性、原型链
- javascript原型和原型链
- javascript原型与原型链
- Javascript原型和原型链
- JavaScript原型以及原型链
- JavaScript原型与原型链
- JavaScript原型和原型链
- Javascript原型和原型链
- Javascript原型和原型链
- JavaScript原型和原型链
- JavaScript原型和原型链
- javascript原型与原型链
- javascript 原型和原型链
- javascript prototype 原型链
- 数据结构与算法实验题 4.2 Who is the strongest
- 【ZZ】COleVariant与常用基本数据类型之间的转换
- recovery怎么保存log
- linux实验4-bash1
- 明白自己在做什么?
- javascript原型链
- 如何使用perl解析excel2007
- cocos2d-X 节点(CCTMXLayer.h)API
- CFileFind用法
- spring mvc 拦截器 拦截子目录
- 【PAT Advanced Level】1019. General Palindromic Number (20)
- 《Windows via C/C++》学习笔记 —— 线程的相关性
- 详解Nginx+php-5.4+Mysql-5.5+Memcached+redis的架构部署
- uva 11029