注册 登录  
 加关注

网易博客网站关停、迁移的公告:

将从2018年11月30日00:00起正式停止网易博客运营
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Mr.7

我将骄傲的活在这个大唐盛世

 
 
 

日志

 
 

JS prototype彻底明白  

2014-04-15 18:39:10|  分类: 挨踢咋活 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

js有一个东西,搞不明白,就如鲠在喉般非常不爽。这个东西就是prototype。

不过搞明白的过程实在是太漫长了,在最后彻底明白的时候,已经失去了太大的热情。看来做东西还是要集中,要快

1.总图

JS prototype彻底明白 - Mr.7 - Mr.7
JS prototype彻底明白 - Mr.7 - Mr.7
 

2.结论

2.1 对象与函数对象

函数对象可以创建对象;对象不能创建对象。

函数对象也是一种对象。每个对象都有__proto__;只有函数对象才有prototype。


2.2 内部原型对象和外部js对象

JS中用到的Object、Function、Number等都是我们在js环境中可以访问的js外部对象。

其实他们都有内部对应的原型对象。

原型对象都是对象,而不是函数对象;故原型对象都没有prototype。

内部原型对象也有两个,对象原型对象[Object.prototype]和函数原型对象[Function.prototype]。前者是所有的基类,后者是函数对象的基类。

目前我们所见的js外部对象都是函数对象,因为他们都可以new来创建;而js外部对象都是内部函数原型对象[Function.prototype]所创建。因为他们都可以继续创建

2.3 __proto__和prototype

__proto__的主要目的是追溯基类。

prototype的主要目的是方便类型的继承和类的实例共享一些特性。

对象的__proto__是创建者的prototype。也就是obj.__proto__=Constructor.prototype。

2.4 typeof与instanceof

typeof用来区分普通数据类型、对象和函数对象。这个内部是通过对象的[[class]]来实现。

instanceof主要用来解决继承类型识别。其原理是看构造函数是否相同。

2.5 prototype继承的作用

主要是解决对象创建的公有和私有问题。

面向对象组织类和对象的方式,目的要做到:

  • 让类封装
  • 让对象创建时最省空间

构造函数内部定义的方法和属性 会被每个对象所复制一份;而原型中的方法和属性将会被所有对象公用

所以最好的方式就是混合的构造函数和原型方式。

参见:JS对象创建最好的解释

2.6 与面向对象的误区

Java中的万物之源是Object;但是JS中的万物之源其实是Object.prototype,而不是Object

Java通过类和实例来实现继承;而JS却是通过函数对象和原型对象两个对象来实现继承以及封装

3.例子

function Animal(){

}
var anim = new Animal();

console.log('***********Animal anim proto*****************');
console.log('typeof Animal.prototype:' +typeof Animal.prototype); //object
console.log('anim.__proto__===Animal.prototype:'+(anim.__proto__===Animal.prototype)); //true
console.log('Animal.__proto__===Function.prototype:'+(Animal.__proto__===Function.prototype)); //true
console.log('Animal.prototype.__proto__===Object.prototype:'+(Animal.prototype.__proto__===Object.prototype)); //true

console.log('***********Function proto*****************');
console.log('typeof Function.prototype:'+typeof Function.prototype); //function
console.log('typeof Function.__proto__:'+typeof Function.__proto__); //function
console.log('typeof Function.prototype.prototype:'+typeof Function.prototype.prototype); //undefined
console.log('typeof Function.prototype.__proto__:'+typeof Function.prototype.__proto__); //object
console.log('Function.prototype===Function.__proto__:'+(Function.prototype===Function.__proto__)); //true

console.log('***********Object proto*****************');
console.log('typeof Object.prototype:'+typeof Object.prototype); //object
console.log('typeof Object.__proto__:'+typeof Object.__proto__); //function
console.log('Object.prototype.prototype:'+Object.prototype.prototype); //undefied
console.log('Object.prototype.__proto__===null:'+(Object.prototype.__proto__===null)); //true

console.log('***********Function Object proto关系*****************');
console.log('Function.prototype===Object.__proto__:'+(Function.prototype===Object.__proto__)); //true
console.log('Function.__proto__===Object.__proto__:'+(Function.__proto__===Object.__proto__)); //true
console.log('Function.prototype.__proto__===Object.prototype:'+(Function.prototype.__proto__===Object.prototype)); //true

/********************* 系统定义的对象Array、Date ****************************/
console.log('**************test Array、Date****************');
var array = new Array();
var date = new Date();
console.log('typeof Array:'+(typeof Array)); //Function
console.log('typeof array:'+(typeof array)); //Object
console.log('typeof array:'+(typeof Array.prototype)); //object
console.log('typeof array:'+(typeof Array.prototype.prototype)); //undefined
console.log('array.__proto__===Array.prototype:'+(array.__proto__===Array.prototype)); //true
console.log('Array.__proto__===Function.prototype:'+(Array.__proto__===Function.prototype)); //true
console.log('date.__proto__===Date.prototype:'+(date.__proto__===Date.prototype)); //true
console.log('Date.__proto__===Function.prototype:'+(Date.__proto__===Function.prototype)); //true

4.参考:

ECMA262-5.1版js标准
JS对象创建最好的解释
JS内部细节最好的介绍
  评论这张
 
阅读(406)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018