JS 原型链学习总结

废话篇:

  在js的学习过程中有一大难点就是原型链。学习的时候一直对这一内容不是十分的明白。纠结的我简直难受。,型号总算给他弄通了,哇咔咔,总算可以不用在睡梦中还想着他了。

正文篇:

  要了解原型链我们首先要记住的一点是JS中所有的东西都可以用对象来理解。函数在JS中实际上也是一个对象。然后再去看原型链的东西。

  上图是首要的:

  

  实际上我们可以吧JS中的对象看成两种,一种是我们所熟知的一般的对象,还有一种就是JS中所有的方法对象。

一般对象:

  对于一般的对象而言,其实际上就是一个方法与属性的集合,而在js中由于除去基础定义的常量数据类型以外,其他的都是对象,所以在js中我们可以理解一般对象实际上就是常量属性和对象属性所集合而成的内容。

  我们要创建一个一般对象首先要做的是为其编写一个构造方法。构造方法实际上是function关键字定义的有参数名称或者是有变量可以指代的一个函数对象。例如:

 1 var test = function(){
 2     var me =this;
 3
 4     me.name = "Arvin";
 5
 6     me.showNaem = function(){
 7         alert(me.name);
 8     }
 9 }
10
11 var t = new test();
12
13 //t变量就是一个对象,而他的搞糟函数就是test只带的方法。

例如以上代码,test在解析的时候就作为了一函数对象存储起来,当我们使用new方法的时候,系统会调用这一函数,并初始化一块区域出来,用于存储当前一般对象中的一些特殊的数据和方法(就比如直接用当前的对象的this指针为当前的对象直接添加的一些对象或是常量属性,例如上面示例中定义的name对象和showName方法)。然后系统会给当前的对象设置一个_proto_属性,其指代的数据和构造函数对象的prototype属性所指代的内容是一样的,而不是副本。由此我们可知,实际上new关键字的操作就是,为当前的新的对象开辟一块内存区域,然后把其特有的属性存储到这块区域中,最后设置一个指向公有区域即原型对象区域的_proto_属性以此来应用其中的方法。JS就是通过这样的方式来实现继承的。

  

函数对象:

  而函数对象实际上就是在我们通过function关键字来定义方法的时候,编译器会吧当前我们所定义的函数通过Function对象的构造方法来使其编程一个js的内部对象,在我们需要的时候来进行对象的调用。具体的函数对象的内容请参见函数对象的定义和具体详解。当然在JS编辑器定义好函数对象之后会为函数对象添加一个prototype的原型对象的值,当然你也可以理解为表明当前构造函数创建的对象的继承原型。prototype其指向的原型中也有一回调值,指向的是当前的函数对象。

  当然作为一个对象,函数也是有自己的_proto_属性的。就像一般对象一样,每次定义函数之后解析器生成函数对象的时候都会为其定义一个_proto_的值,而其指向的实际上就是它的构造函数的prototype属性指向的原型函数。由于所有的函数对象的构造函数都是Function,所以其实包括Function本身(Function可以理解为函数对象的构造方法,所以也可以看成是一个构造函数。),所有的函数对象的_proto_的值实际上都指向一个Function.prototype原型对象,而这一对象的原型是Object对象。

原型链:

  但是之所以叫做原型链是为什么呢,因为不论是一般对象中的_proto_还是函数对象中的prototype属性,其指向的内容实际上还是一个对象,而只要是对象就会有这两个属性中的一个或者两个都有。就像上面的图中所显示的那样。每一个对象实际上都会指向他的原型对象,而原型对象又指向更高一层的原型,最终总有一个圆形对象是会指向Object对象的,而object对象的原型是null。就像一个链条一样逐层的深入。这样就形成了链,所以我们称之为原型链。

  

  

时间: 2024-11-18 02:16:07

JS 原型链学习总结的相关文章

深入理解JS原型链与继承

我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天要讨论的主题,有许多人写过许多精彩的文章,但是今天我还是想把自己的理解的知识记录下来.我在学习 掌握JS原型链和继承的时候,就是看得@阮一峰老师的写的文章,觉得他写的技术类的文章都容易让理解,简明概要,又好理解.他是我学习JS路程里面一个比较佩服的导师,昨天重新看了他写的<Javascript 面向

简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗

JS 原型链图形详解

JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语言,是通过对象来交互的.即使ECMAScript里边也有基本类型,但是,当需要的时候,它们也会被转换成对象. 一个对象就是一个属性集合,并拥有一个独立的prototype(原型)对象.这个prototype可以是一个对象或者null.* 让我们看一个关于对象的基本例子.一个对象的prototype是

js原型链与继承(初体验)

js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享

浅谈js原型链与继承

js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享

js 原型链和继承(转)

在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var obj = { name: "obj" }; 我们通过控制台把 obj 打印出来: 我们会发现 obj 已经有几个属性(方法)了.那么问题来了:valueOf / toString / constructor 是怎么来?我们并没有给 obj.valueOf 赋值呀. 上面这个图有点难懂,我手画

JavaScript面向对象(二)——成员属性、静态属性、原型属性与JS原型链

前  言 上一篇博客(https://www.cnblogs.com/qdjianghao/p/10177360.html )中,我们介绍了JS中的面向对象,并详细的解释了this的指向问题.本篇博客,我们继续来学习JS的面向对象.来深入理解一下JavaScript OOP中的成员属性/方法.静态属性/方法.原型属性/方法,并且一起来探讨一下JS中的原型与原型链. 一 成员属性与成员方法 在构造函数中,通过this.属性声明.或者实例化出对象后,通过"对象.属性"追加的.都属于成员属性

javascript原型原型链 学习随笔

理解原型和原型链.需从构造函数.__proto__属性(IE11以下这个属性是undefined,请使用chrome调试).prototype属性入手. JS内置的好多函数,这些函数又被叫做构造函数.如:Object---Array---Function---Math---Date---String---Number---Boolean---Symbol---RegExp. JS里,所有的对象,都是其构造函数的实例.如{}是Object的一个实例,[]是Array的一个实例.fn() {}是Fu

JS原型链

JS每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链,我们称之为原型链. 访问一个对象的原型可以使用ES5中的Object.getPrototypeOf方法,或者ES6中的__proto__属性. 原型链的作用是用来实现继承,比如我们新建一个数组,数组的方法就是从数组的原型上继承而来的. 在JavaScript中,每个函数 都有一个prototype属性,