js的原型链理解
2015-09-06 17:10
676 查看
js 的原型链第一反应是prototype,但是不一定能反应到__proto__这个属性。
而事实上,原型链是__proto__串起来的,而不是prototype。
prototype只能说是在构建这个原型链的机制中起到关键作用。
以String为例,String的原型链为:
每一个箭头都是一个__proto__属性。而最后结尾是null。
这个null的作用是带来链的终结,同时记住这是null,不是undefined。
我们可以看到原型链的起点是一个对象,这个对象可以是任何对象或者函数
事实上String.prototype是为String所实例化的对象提供原型链的,执行这条命令之后,str的原型链是什么样的:
这是因为当我们执行var str=new String('123')时,js自动将str的__proto__赋值为String.prototype。于是形成这样的链。
再看为什么String.prototype->Object->prototype。
这个我们可以想像。String.prototype的实现一定是这样的:
链图如下:
1.从下往上遍历A的原型链。
2.如果链上的某个节点等于B.prototype,则返回true。
3.否则继续向上取原型链节点。
根据这个规则,我们可以推断:
byebye
而事实上,原型链是__proto__串起来的,而不是prototype。
prototype只能说是在构建这个原型链的机制中起到关键作用。
一,常见类的原型链
下图的原型链图中,箭头代表__proto__属性。以String为例,String的原型链为:
String->Function.prototype->Object.prototype->null
每一个箭头都是一个__proto__属性。而最后结尾是null。
这个null的作用是带来链的终结,同时记住这是null,不是undefined。
我们可以看到原型链的起点是一个对象,这个对象可以是任何对象或者函数
(js里面对象和函数的差别太微妙了) > function f1(){} > undefined > f1 instanceof Object > true > typeof f1 > "function"这个原型链的终点是null,而原型链的中间节点全部是XXX.prototype.这就是prototype在构建原型链时所起到的关键角色。
二,实例化对象的原型链
这是你可能要问了String.prototype到哪去了,String的原型链难道和String.prototype没什么关系吗?是的。var str=new String('123')
事实上String.prototype是为String所实例化的对象提供原型链的,执行这条命令之后,str的原型链是什么样的:
str->String.prototype->Object.prototype->null为什么如此,我们先看str->String.prototype,
这是因为当我们执行var str=new String('123')时,js自动将str的__proto__赋值为String.prototype。于是形成这样的链。
再看为什么String.prototype->Object->prototype。
这个我们可以想像。String.prototype的实现一定是这样的:
String.prototype=new Object();//### String.prototype.indexOf=function(){}; String.prototype.substr=function(){}; ...根据刚才的经验,执行###这一行时,js也是自动把String.prototype的__proto__赋值为Object.prototype.所以有了这一个链。
链图如下:
三,instanceof的实现原理
现在来看一个操作符的实现原理,A instanceof B加入有上面这条语句,那么背后的判断过程是:
1.从下往上遍历A的原型链。
2.如果链上的某个节点等于B.prototype,则返回true。
3.否则继续向上取原型链节点。
根据这个规则,我们可以推断:
//由第一个图可以看出: String instanceof Function; //true String instanceof Object; //true //从第二个图可以看出 var str=new String('123'); str instanceof String; //true str instanceof Object; //true str instanceof Function; //false
byebye
相关文章推荐
- js闭包的用途
- 纯javascript代码编写计算器程序
- json之注意
- js实现的Easy Tabs选项卡用法实例
- JavaScript基础进阶知识汇总
- javascript的for...in
- JS fso 处理
- jsp笔记
- js格式化日期、金额
- 有关JS中构造函数和原型函数的一些基础知识
- js中常见数据类型输出情况
- js小知识点
- javaScript系列:js中获取时间new Date()详细介绍
- 关于javascript跨域及JSONP的原理与应用
- js实现鼠标点击左上角滑动菜单效果代码
- JS中的prototype(转)
- JS模板引擎的实现原理
- Javascript封装DOMContentLoaded事件
- Json
- js解析url