array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助(Microsoft Help Viewer)的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v;报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文(变量对象,作用域链,this)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记:快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习(二)Flotr2,雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树(Expression)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例:事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 JavaScript学习总结三:js基于原型面向对象 - 爱码网

      JavaScript原型概念说不好理解其实没那么难,说好理解其实也没那么简单,关键是你有没有找到一个合适自己的理解方法。

 

预备知识:

      我想研究js原型的人肯定对js有一定了解,所以基础的知识不再赘述。但是我还要强调一些变态的知识点:

l  JavaScript没有类的概念,是基于原型的面向对象。

l  function这个关键字一定要理解正确!这不是传统意义上的定义函数的关键字,而是类!一定要把function理解成类!所以,在function a(){}时,其实你是在创建一个functio的实例,a不是函数,而是对象!这正好符合一句真理:“一切皆对象”。

l  new关键字也不是传统的new。后边加的是对象,而不是类。

l  JavaScript中没有方法,只有属性。

l  .表示访问(获取成员属性),()表示执行。比如fun.x()可以理解为:fun这个对象访问了x属性,并执行这个属性。

 

概念描述(部分内容来自于网络):

      在说原型之前,还要先说点别的知识。上边提到function实际上是在创建对象,这时候它充当了两个角色:创建对象、构造函数。JavaScript就是这么规定的,所有的对象在创建时都要有构造函数。还有需要注意的就是new关键字后边接的全是对象,并不是类,new的功能和传统的语言也不一样,因为JavaScript是基于原型的,没有类,所以new不可能完成传统new的功能,那它做什么了呢?我就简单的说一句:new其实就实现了原型机制(具体怎么做的网上资料有的是)。

究竟什么是原型,下边是来自网络的一段话:

“javascript原型是一个对象。 javascript中所有的构造函数都有一个属性,叫prototype,这个属性存放的就是原型对象;访问这个属性通过:函数名.prototype ,从而可以访问到这个原型对象,也可以为这个原型赋值。在原型对象中有一个属性叫constructor,这个constructor指向函数本身。我们可以访问到原型中的这个属性:函数名.prototype.constructor;我们可以为原型对象添加属性并赋值:函数名.prototype.属性名=值;为函数原型添加的属性,都会成为构造函数的属性,从而成为对象的属性。既然对象具有了原型内的属性,说明对象中的这些属性是从原型中继承来的。所以javascript是基于原型的继承的。”

      其实原型就是对象的prototype属性指向的对象。对象通过prototype属性继承了“父类”的特性,甚至包括构造函数在内。证明继承了构造函数的例子:

 

<script type="text/javascript">
	function fun1(){alert("我爱中国");}//fun1的构造函数
	fun2 = new fun1();//通过fun1创建fun2
	fun3 = new fun2();//我们并没有定义fun2的构造函数,但是成功的创建了fun3,说明构造方法也会继承
	fun3();//输出“我爱中国”
</script>

 

      现在再回过头来看new和function,我们可以通过function和new两种方式创建对象,但两者都要求必须有构造函数,只不过function同时承担了创建对象和构造函数两个职责,而new却要找“父类”的构造函数(系统内部的对象比如Array也有构造函数,这样我们才可以顺利的new,只不过隐藏了)。此时,应该不难理解new实际上是把“父类”作为原型给“子类”的prototype属性。而function是新建,以自己为原型给自己的prototype属性。

      这差不多就是JavaScript的原型继承机制了!继续深入,上文提到JavaScript没有方法,只有属性。实际上所有的对象都可以理解为一个属性包,或者说散列数组(key,value),对象只有访问成员的操作。通过“.”指定要访问的属性,通过“()”执行属性(可以理解为方法),JavaScript并不管我们要执行的属性是什么,只负责通过key(属性名)找到相应的value(属性值),所以对象的属性值可以是对象,也可以是数值,是对象的话我们可以用“()”执行,是数值型的话就直接“.”+属性名访问。

 

原型链:

      我们可以自行更改prototype属性,也就是自行设置对象的原型对象。同时,原型继承是链式的。比如,b继承了a,c又继承了b,那么c也继承了a,这样就构成了原型链。原型链的特性是:读的时候从原型链上读,写的时候向自己里面写。大致意思就是:在刚刚abc的例子中,如果在c中访问了一个属性,但是c中没有,会自动去b、a中寻找;但是如果向c中添加属性,那么就直接写在c中。

      示例代码:

<script type="text/javascript">
	function fun1(){}//创建fun1对象,原型为自身
	function fun2(){}//创建fun2对象,原型为自身
	fun1.prototype = new Object();//设对象fun1的原型为最底层的系统的Object对象
	fun2.prototype = new fun1();//设对象fun2的原型为fun1
	Object.prototype.a="a";//给对象Object的原型添加一个数值型a属性
	fun = new fun2();//创建一个fun2的对象,继承fun2的所有属性
	alert(fun.a);//调用fun2继承来的a属性,实际上调用的Object原型中的a。打印出“a”
	fun1.prototype.a = "a1";//给fun1的原型(即Object)对象添加一个数值型a属性
	alert(fun.a);//调用fun2继承来的a属性,实际上调用的fun1原型(即Object)中的a。打印出“a1”
</script>

 

      图解:

JavaScript学习总结三:js基于原型面向对象

 

 

 

相关文章: