JS 原型链学习总结
废话篇:
在js的学习过程中有一大难点就是原型链。学习的时候一直对这一内容不是十分的明白。纠结的我简直难受。,幸好总算给他弄通了,哇咔咔,总算可以不用在睡梦中还想着他了。
正文篇:
要了解原型链我们首先要记住的一点是JS中所有的东西都可以用对象来理解。函数在JS中实际上也是一个对象。然后再去看原型链的东西。
上图是首要的:

实际上我们可以吧JS中的对象看成两种,一种是我们所熟知的一般的对象,还有一种就是JS中所有的方法对象。
一般对象:
对于一般的对象而言,其实际上就是一个方法与属性的集合,而在js中由于除去基础定义的常量数据类型(例如字符串啊,整形啊,等等。我们在存储的时候实际上他只是一个不变量,不可改变,虽然可以调用方法,但是实际上是每一次调用的时候js会自动解析成为一个新的对象的缘故。)以外,其他的都是对象,所以在js中我们可以理解一般对象实际上就是常量属性和对象属性所集合而成的内容。
我们要创建一个一般对象首先要做的是为其编写一个构造方法。构造方法实际上是function关键字定义的有参数名称或者是有变量可以指代的一个函数对象。例如:
var test = function(){
var me =this;
me.name = "Arvin";
me.showNaem = function(){
alert(me.name);
}
}
var t = new test();
//t变量就是一个对象,而他的构造函数就是test只带的方法。
例如以上代码,test在解析的时候就作为了一函数对象存储起来,当我们使用new方法的时候,系统会调用这一函数,并初始化一块区域出来,用于存储当前一般对象中的一些特殊的数据和方法(就比如直接用当前的对象的this指针为当前的对象直接添加的一些对象或是常量属性,例如上面示例中定义的name对象和showName方法)。然后系统会给当前的对象设置一个_proto_属性,其指代的数据和构造函数对象的prototype属性所指代的内容是一样的,而不是副本,即所有的继承与同一对象的对象其_proto_属性指向的区域是同一块的,这一区域是共享的。由此我们可知,实际上new关键字的操作就是,为当前的新的对象开辟一块内存区域,然后把其特有的属性存储到这块区域中,最后设置一个指向公有区域即原型对象区域的_proto_属性以此来应用其中的方法。JS就是通过这样的方式来实现继承的。
当然在定义一般对象的时候,我们还有别的方式,例如直接写对象直接量的形式。其实吧,这样定义出来的对象是直接继承于Object对象的。所以并不是当杜生成一个独立的对象的,因为,上面豆花的很清楚啦,所有的对象都是继承于Object对象的啊。
函数对象:
而函数对象实际上就是在我们通过function关键字来定义方法的时候,编译器会吧当前我们所定义的函数通过Function对象的构造方法来使其编程为一个js的内部对象,在我们需要的时候来进行调用。具体的函数对象的内容请参见函数对象的定义和具体详解。当然在JS编辑器定义好函数对象之后会为函数对象添加一个prototype的原型对象的值,当然你也可以理解为表明当前构造函数创建的对象的继承原型。prototype其指向的原型中也有一回调值,指向的是当前的函数对象。
当然作为一个对象,函数也是有自己的_proto_属性的。就像一般对象一样,每次定义函数之后解析器生成函数对象的时候都会为其定义一个_proto_的值,而其指向的实际上就是它的构造函数(即Function对象)的prototype属性指向的原型函数。由于所有的函数对象的构造函数都是Function,所以其实包括Function本身(Function可以理解为函数对象的构造方法,所以也可以看成是一个构造函数。),所有的函数对象的_proto_的值实际上都指向一个Function.prototype原型对象,而这一对象的原型是Object对象。
原型链:
但是之所以叫做原型链是为什么呢,因为不论是一般对象中的_proto_还是函数对象中的prototype属性,其指向的内容实际上还是一个对象,而只要是对象就会有这两个属性中的一个或者两个都有。就像上面的图中所显示的那样。每一个对象实际上都会指向他的原型对象,而原型对象又指向更高一层的原型,最终总有一个原型对象是会指向Object对象的,而object对象的原型是null。就像一个树一样逐层的深入。这样就形成了链,所以我们称之为原型链。
JS 原型链学习总结的更多相关文章
- 深入理解JS原型链与继承
我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天 ...
- JS原型链
JS作为发展了多年了对象语言,支持继承,和完全面向对象语言不同的是,JS依赖原型链来实现对象的继承. 首先JS的对象分两大类,函数对象和普通对象,每个对象均内置__proto__属性,在不人为赋值__ ...
- 深入分析JS原型链以及为什么不能在原型链上使用对象
在刚刚接触JS原型链的时候都会接触到一个熟悉的名词:prototype:如果你曾经深入过prototype,你会接触到另一个名词:__proto__(注意:两边各有两条下划线,不是一条).以下将会围绕 ...
- 【09-23】js原型继承学习笔记
js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...
- js原型链与继承(初体验)
js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询 ...
- JS 原型链图形详解
JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...
- js 原型链和继承(转)
在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var ob ...
- 一张图看懂 JS 原型链
JS 原型链,画了张图,终于理清楚各种关系有木有 写在最后: __proto__是每个对象都有的一个属性,而prototype是函数才会有的属性!!! function Person() { } 是函 ...
- 简单粗暴地理解js原型链–js面向对象编程
简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...
随机推荐
- Kali-linux安装之后的简单设置
1.更新软件源:修改sources.list文件:leafpad /etc/apt/sources.list然后选择添加以下适合自己较快的源(可自由选择,不一定要全部): #官方源deb http:/ ...
- silverlight的第一个程序
摘要:silverlight是微软公司全力打造的一种跨平台.跨浏览器的RIA新技术,silverlight以XAML为界面呈现语言,支持2D矢量图形.动画.数据绑定.控件风格与模板.LINQ.WCF. ...
- .NET设计模式(13):享元模式(Flyweight Pattern)(转)
摘要:面向对象的思想很好地解决了抽象性的问题,一般也不会出现性能上的问题.但是在某些情况下,对象的数量可能会太多,从而导致了运行时的代价.那么我们如何去避免大量细粒度的对象,同时又不影响客户程序使用面 ...
- RMQ(st)
int dp[1111][12]; int a[1111]; int n; void RMQ_init() { for(int i=1;i<=n;i++) { d ...
- 用Python+Django在Eclipse环境下开发web网站【转】
一.创建一个项目如果这是你第一次使用Django,那么你必须进行一些初始设置.也就是通过自动生成代码来建立一个Django项目--一个Django项目的设置集,包含了数据库配置.Django详细选项设 ...
- SqlBulkCopy大批量数据插入到sql表中
alter TYPE TableType AS TABLE ( Name VARCHAR() , code VARCHAR() ) GO alter PROCEDURE usp_InsertProdu ...
- (转载) .NET2.0程序集无法在.net 4.0 中运行的解决方案
首先在MSDN上看到 4.0 的更新日志中有如下这条: .NET Framework 4 不能自动使用自己的公共语言运行时版本来运行由 .NET Framework 早期版本生成的应用程序. 若要使用 ...
- angularJS之$apply()方法
这几天,根据buddy指定的任务,要分享一点angular JS的东西.对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不 ...
- malloc/free 和 new/delete 的区别
1.malloc在C和C++中的区别 1.1.C中可以将任意的指针赋值给void*类型的变量.也可以将void*类型的值赋值给通常的指针变量. ---------------------------- ...
- Android Design Support Library 的 代码实验——几行代码,让你的 APP 变得花俏
原文:Codelab for Android Design Support Library used in I/O Rewind Bangkok session--Make your app fanc ...