深入理解JavaScript系列:史上最清晰的JavaScript的原型讲解
一说起JavaScript就要谈的几个问题,原型就是其中的一个。说了句大话,史上最清晰。本来是想按照大纲式的行文写一下,但写到后边感觉其实就一个概念,没有什么条理性,所以下面就简单按照概念解释的模式谈下这个问题。
1.JavaScript的原型是什么?
原型,首先他是个对象。和在以对象为核心的JavaScript这门语言中的其他普通对象来说一样,只不过他的角色有点特殊。但首先要明白他就是一个对象,是一个无序的属性和值的序列对。
2.谁会具有原型这个对象?
所有的对象(包括函数这个对象)在默认的情况下都有一个原型对象。这句话的理解就和普通对象中再嵌套拥有对象是一个意思。
因为原型本身也是对象,所以每个原型自身又有一个原型对象(属性继承就是这么来的)。照这句话下去的话会成为一个无限继承的模式,所以一定会有一个结束点。所以例外来了,当对象原型追溯到原型链的最顶端的时候,这个最顶端的位置也就是在这种层层向上的关系到了Object这个构造函数的prototype,Object函数的的prototype对象如下图:
从图中可以看到,Object的属性里已经没有了__proto__。至于什么是__proto__,下边会讲。
3.__proto__和prototype分别是指什么?
每一个对象都有一个__proto__对象属性,每一个函数(函数也是对象)都有一个 prototype对象属性,所以总结来说就是每一个对象有一个__proto__,而每一个函数都有一 个prototype,但同时他又是一个对象,所以函数也会有__proto__。
4.__proto__和prototype的关系是怎么样的?
首先明白对象是怎么来的?对象无非是构造函数构造出来的或者是字面直接量的形式。
构造出来的对象的__proto__指向构造该对象的构造函数的prototype;字面直接量的对象的__proto__指向该对象类型所对应的的构造函数的prototype。
总结来说就是对象的__proto__指向该对象所对应的构造函数的prototype。
5.不同函数的prototype分别是什么?
其实这是两个问题,第一先回答不同函数。
首先JavaScript中只要是函数,都可以用new关键字当作构造函数来使用。但是,有些函数是我们自己实现的,还有一些函数是JavaScript语言标准里已经规定内置实现的。这些函数包括Array、Boolean、Date、Number、String、RegExp、Math。这里会有一个问题就是Math他是一个对象而不是函数,你可以去typeof检测一下。除去Math之后剩余的这些内置构造函数的prototype属性也是语言内置实现的,比如Array里我们常用的那些pop、push、shift这些方法,都统统包括在Array这个构造函数的prototype对象属性里。除了上面提到的内置构造函数外,其余的函数都是我们自己定义的函数,他们也会有prototype属性,但是如果我们不显示的去给prototype赋值的话,他就是一个空对象。
接下来回答第二个问题,prototype是什么。
其实上面已经说的很清楚了,prototype是函数的一个固有属性,即只要是个函数都会有的属性,内置的构造函数已经有实现好的prototype,它里边包括各种方法或者属性。而我们自己实现的函数也必定会有一个prototype属性,但是如果我们不显示赋值的话,他就是一个空对象。
6.那我们所说的原型和原型继承到底是什么意思?
如果你一字不落的看完上边的所有概念而且能理解到80%以上,就应该很自然的得出这个问题的答案了。
我们一般所说的原型就是对象的原型,对象的原型是指_proto_这个对象。而所有的对象的继承也是通过他来实现的。第4个问答中已经很明确了,__proto__指向该对象的构造函数的prototype,而该对象的构造函数的prototype作为对象会拥有一个__proto__,而这个__proto__又指向他的构造函数的prototype,层层向上,直到__proto__指向Object这个最顶端的函数对象的prototype,也就是第二条的图所示的便结束。
如上便是JavaScript通过原型继承的一个解释。
总结:我们该怎么掌握原型这个概念。
掌握一个东西,无非也就是 是什么,怎么样,怎么用这三点。
是什么。
首先明白__proto__和prototype,对象都会有__proto__,包括函数对象,函数对象除了__proto__,还拥有prototype。
原型是一个对象,指__proto__,每个对象都会拥有这个属性。__proto__指向该对象构造函数的prototype。__proto__的层层向上追溯的过程就是继承的过程,直到追溯到最顶端即Object这个构造函数的prototype。
怎么样。
怎么样也就是为什么的意思,原型之所以存在,是基于JavaScript这门语言的面向对象思想来说的。像其他语言都会有OO和继承等这些特性,JavaScript虽为脚本语言,灵活却不失功用,这个是他实现面向对象和继承的一个思想。可以简单的理解为此。
怎么用。
这个是个很大的话题,可以另开一篇文章来阐述。这里只是简单的举几个例子。
如果仅仅只是因为为了给一个实例添加属性而使用原型是没有多大意义的,这和直接添加属性到这个实例是一样的,假如我们已经创建了一个实例对象 ,我们想要继承一个已经存在的对象的功能比如说Array,我们可以像下面这样做:
var a = [1, 2];
a.__proto__ = Array.prototype;
console.log(a.length); //2
又比如我们自己实现了一个构造函数,上面已经说到,自己实现的函数的默认prototype是一个空对象,所以由这个构造函数创建生成的对象的__proto__指向的是一个空对象。我们这时候就可以用prototype来继承或者实现一些事情。
var MyFun = function (x, y) {
this.x = x;
this.y = y;
};
MyFun.prototype.getArea = function () {
return this.x * this.
}
var obj = new MyFun(2, 3);
var area = obj.getArea();
console.log(area); //6
写完才发现,可能这是史上最不清晰的阐述。但如果你对原型已经有了一知半解却还是有点模糊的话,好好的从头读到结尾,你会发现,原来掌握这个概念也是这么简单。
完!祝好运。
深入理解JavaScript系列:史上最清晰的JavaScript的原型讲解的更多相关文章
- 史上最全的javascript知识点总结,浅显易懂。
来源于:http://blog.csdn.net/qiushi_1990/article/details/40260471 一,认识javascript1-1为什么学习JavaScript一).你知道 ...
- Javascript系列之在HTML中使用JavaScript
本文主要包括以下几方面内容: 1)使用<script>元素 2)嵌入脚本和外部脚本 3)文档模式对JavaScript的影响 4)考虑禁用JavaScript的场景 只要一提到把Javas ...
- python基础之Day7part2 史上最清晰字符编码理解
二.字符编码 基础知识: 文本编辑器存取文件原理与py执行原理异同: 存/写:进入文本编辑器 写内容 保存后 内存数据刷到硬盘 取/读:进入文本编辑器 找到内容 从硬盘读到内存 notepad把文件内 ...
- 史上最全、JavaScript基础篇
本章内容: 简介 定义 注释 引入文件 变量 运算符 算术运算符 比较运算符 逻辑运算符 数据类型 数字 字符串 布尔类型 数组 Math 语句 条件语句(if.switch) 循环语句(for.fo ...
- 史上最详细的JavaScript事件使用指南
事件流 事件流描述的是从页面中接收事件的顺序,IE和Netscape提出来差不多完全相反的事件流的概念,IE事件流是事件冒泡流,Netscape事件流是事件捕获流. 事件冒泡 IE的事件流叫做事件冒泡 ...
- 史上最全的JavaScript工作笔记
/* * JavaScript查看对象函数 */ function resultTest( obj ){ var resultTest = ''; $.each(obj,function(key,va ...
- 史上最全 原生javascript的知识总结,适合新手及查资料用!
适合右键另存为图片保存,再放大看!
- 妙味课堂史上最全的javascript视频教程,前端开发人员必备知识点,新手易学,拔高必备!!!
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分 ...
- (一)我的Javascript系列:Javascript的面向对象旅程(上)
今宵酒醒何处,杨柳岸,晓风残月 导引 我的JavaScript系列文章是我自己对JavaScript语言的感悟所撰写的系列文章.现在还没有写完.目前一共出了下面的系列: (三)我的JavaScript ...
随机推荐
- IE兼容问题,各类css hack代码(亲测有效)
现在大部分企业对浏览器兼容要求是IE7+或者IE8+,要求IE6的很少,此处一并写出. IE6: _margin-top: 20px; IE6+IE7: *margin-top: 20px; +mar ...
- MySQL使用技巧收集,持续更新中......
1.查询时按某一内容为中文的字段,以拼音字母排序: SELECT * FROM game ORDER BY CONVERT(name USING GBK);
- 并发编程 20—— AbstractQueuedSynchronizer 深入分析
Java并发编程实践 目录 并发编程 01—— ThreadLocal 并发编程 02—— ConcurrentHashMap 并发编程 03—— 阻塞队列和生产者-消费者模式 并发编程 04—— 闭 ...
- 20169212《Linux内核原理与分析》第十一周作业
缓冲区溢出漏洞实验 缓冲区溢出漏洞:缓冲区溢出是指程序试图向缓冲区写入超出预分配固定长度数据的情况.这一漏洞可以被恶意用户利用来改变程序的流控制,甚至执行代码的任意片段.这一漏洞的出现是由于数据缓冲器 ...
- Python笔记总结week3
Set集合: 无序,不重复的序列 a. 创建 se = {"123,"456" } print(type(se)) #创建集合方式 s1 = se = {"12 ...
- JavaScript 面向对象(二) —— 案例篇
看案例前可以先看看基础篇:JavaScript 面向对象(一) —— 基础篇 案例——面向对象的选项卡:把面向过程的程序一步步改成面向对象的形式,使其能够更加的通用(但是通用的东西,一般会比较臃肿). ...
- easyui的textbox赋值小结
使用的系统中有个后台,需要填充单号,如下图: 每次往框里面填充都是一样的数据,复制.粘贴,而且当人数颇多的时候,就是体力活. 于是就想到通过执行js代码,自动填充这些数据. chrome下F12,查看 ...
- idea初使用之配置使用maven仓库
idea使用的理由已经无需多说.现在已经超过了eclipse.java开发种占有44%.第一次使用上手还是挺难的.跟用惯了myeclipse的我来说.对于project的概念深入人心.还理解不了它的M ...
- hdoj 1385Minimum Transport Cost
卧槽....最近刷的cf上有最短路,本来想拿这题复习一下.... 题意就是在输出最短路的情况下,经过每个节点会增加税收,另外要字典序输出,注意a到b和b到a的权值不同 然后就是处理字典序的问题,当松弛 ...
- Selenium的延迟等待
http://my.oschina.net/u/928852/blog/98885 Selenium的延迟等待分为 显式等待(Explicit Wait) & 隐式等待(Implicit Wa ...