JS中的原型与原型链

最近这段时间在学习JavaScript中的原型和原型链,其中这两个概念对于没有编程基础的人来讲,一开始学习javaScript的话还是比较难理解其中的概念的,有次我也正好学习到这里来了,根据自己的理解和参照MDN里面的详情,进行了总结和概括,于是,便有了这篇Blog!

01|全局对象

在讲到JavaScript的原型和原型对象之前,我们先来了解全局对象吧!这个全局对象还是值得我们在学习JavaScript之前需要好好了解的概念的!

"全局对象",顾名思义就是全局的对象,那么这种概念又是如何被提出来的呢?它的意义到底体现在哪里?对于我们编码中提供了什么好处呢?

所以我们在一开始就先围绕着这几个问题展开思考,我也从这几点说起:

"全局对象":

"全局对象"其实是有两种的:

1. global:

   global其实是由ECMAScript提出来的,是一个Global累的对象,可以在全局作用域中用this访问(但是只有在非严格模式下才可以,在严格模式下得到的是undefined),实际上,全局作用域包含了全局对象的属性的同时,还有它可能继承的属性!

   其中这段概念来自于MDN---JavaScript标准库

   其中global对象中包含的API示例列表有:

   • global.parseInt();
   • global.parseFloat();
   • global.Number();
   • global.Boolean();
   • global.Object();
   • global.String();
   • 等.....方法

2. Window:

   Window对象表示一个包含DOM(Document Object Model:文档对象模型)文档的窗口,其中的document属性指向窗口中载入的DOM文档,使用Document.defaultview属性可以获取指定文档所在的窗口!

   其中的Window对象实现了Window接口,此接口集成来自abstractView(抽象视图)接口.一些额外的全局函数,命名空间,对象,接口和构造函数与Window没有典型的关联,但却是有效的,其中在javaScript参考中 和 DOM参考 中列出!

   在标签浏览器中,比如说FireFox 或者是 Chrome中,每一个标签都有其自己的window对象.也就是说同一个窗口的标签之间不会共享一个window对象!

   Window所提供的API有:

   • window.alert
   • window.prompt
   • window.comfirm
   • window.console.log
   • window.console.dir
   • window.document
   • window.document.createElement
   • window.document.getElementById

   其中有关于全局对象的信息来自于MDN--Window

3. 可能你看了我上面的这两段话的解释,可能有点疑惑,为什么会有两个全局对象呢而不是一个呢?

   其实还是比较好理解的,如果你看过JavaScript的历史你不难理解为什么会有两个全局对象:

   • 1996年11月,NetSpace将JavaScript提交给国际化标准组织ECMA希望JavaScript成为国际标准!以此来对抗微软!
   • 1997年ECMA组织发布262号标准文件(ECMA-262)的第一版!
   • 第一代浏览器Mosaic诞生于1992年,美国国家超级电脑应用中心(NCSA)!

   采摘自阮一峰老师写的 JavaScript标准教程-wangdoc-JavaScript语言的历史

   1. 因为其中的两个全局对象一个是ECMAScript所提出来的,还有一个就是来自于浏览器所提出来的全局对象(Browser),而Browser早于ECMAScript,因而有两个全局对象也是有原因的！

   2. 还有就是我们常常用到的全局对象大部分都是浏览器所提供的Global object(全局对象)Window,因为我们常常是做的Web开发,前端这块的话,JavaScript的宿主环境是Browser(浏览器),和上面提到了浏览器所提供的全局对象为Window,因此很显而易见了!

   3. 在JavaScript在使用全局对象的时候大部分都是调用它里面的方法,其实可以使用Window作为前缀也可以省略,因为浏览器会自动识别该方法为全局对象的方法!

window.alert('Hi');//以全局对象Window作为前缀 调用alert方法!

alert('Hi');//直接调用alert方法!

window.prompt();//以全局对象Window作为前缀 调用prompt方法!

prompt();//直接调用prompt方法!

执行效果图:

global about Window example_01.jpg

global about Window example_02.jpg

global about Window example_03.jpg

global about Window example_04.jpg

window object compare this object.jpg

其实从图上的效果也不难看出来使用了全局变量调用的方法和直接使用方法最后的结果都是一样的!

还有一点就是其中的Window作为全局对象和this是可以互换使用的!this其实就是指代当前的全局对象!

后面有由此引出一个新的概念:全局函数(Global function)!

02|全局函数

在浏览器中或者是ECMAScript中本身所具有的function函数,不需要声明即可使用的函数,叫做全局函数!

当然我直接将概念可能很难吧去那句函数讲清楚,但是全局函数还是一个比较重要的概念,后面的部分涉及到原型和原型链,就通过题目的方式和画图展现出来!

1. Number

var n=new Number(1)创建一个Number对象

1与new Number(1)的区别是什么?看内存图

global function_01jpg.jpg

\

object compare number.jpg

其中通过图上不难看出,直接的1和new Number(1)其中两者的差异就是数字与对象的区别,也就是基本类型与复杂类型的区别,虽然说两者看起来没什么区别,但是如果说要调用方法的时候,两者的差异性便体现出来了!

通过typeof便可以很清楚的辨别两者之间到底什么类型,要查看number对象里面的方法和基本数据类型的方法查看完全不一样,因为Number()是作为function存在的 因此里面声明的对象也是函数对象的存在,而普通数据类型却没有对应的方法!

那么此时问题又来了,为什么我们使用的一个函数并且声明的对象,并且该对象就能直接使用里面提供的方法,那么这里面的方法又是从何而来?

由此进入到我们的正题:

03|原型和原型链

在学习JavaScript的时候,并且是谈到继承的时候,JavaScript只有一个结构,那么就是:对象,每个实例对象都有其对应的私有属性,称之为__proto__指向它的原型对象(protoType),该原型对象也有一个自己的原型对象(__proto__),层层向上直到一个对象的原型为null,null没有原型,并且作为这个原型链中的最后一环节!

protoType tree picture_01.jpg

从图中不难看出,其中通过function生命出来的对象,在拥有function的protoType的同时还拥有function的__proto__等属性,也就是Object的属性!

在全局对象中就是一条条链子的存在,因此也被称作为:原型链

原型链:

var a =new String(1);
// a ---->String.prototype(具有String自身所具有的属性)---->Object.prototype(具有object的本身的属性)---->null(原型链最后一环节)

其中有关原型和原型链的介绍参考了 MDN-继承与原型链

这里面的有部分细节可能阐述的不够到位,后面在我深入理解后会对其进行不断完善,如有疑问请联系我: Github:ProbeDream