Javascript之旅——第九站:吐槽function

      说到funciton,也是我对js非常吐槽的一点,封装的让我眼瞎,马蛋的,哥只能大眼睁着去黑盒的使用,简直只有完完全全的听各类图书对

function的道听图说,完全没有做到一点点的眼见为实。

 

一:function是什么

  在很久很久以前,我们只知道function是一个函数,用C#的话来说就是一个方法,既然是方法嘛,肯定就是挂在类下面的,但是其实呢?

在js中函数就是对象,并不是我们惯性思维中的方法。何以为证呢?看代码。

从图中可以看到我声明了一个say函数,但是我很奇怪的看到,为什么say函数会有一些属性和方法呢?比如本该属于Object的toString,valueOf,

constructor等等?然后比较好奇的去看看constructor到底是什么,可以看到其实是个Function构造函数,那这样我就非常清楚了,然来say只不过

是Function对象的一个实例引用,知道了这个我就可以很轻松的把代码恢复如下:

二:看看function中一些属性和方法

  现在我们知道了function其实就是一个对象,我们知道所有的引用类型都是继承自object,那为了好做比较,我定义了一个object的实例,

接下来看看function中到底都有那些专属属性和方法。

可以看到,子类function确实还是有点自己的东西,那接下来就简单探讨下常用的属性和方法。

 

1. arguments属性

  说到这个属性就特么的来气,就眼瞎,眼瞎的地方在于这个arguments属性里面其实做了很多很多的东西,以至于下面的一些奇怪现象

可能会让你目瞪口呆!!!

 

<1>奇怪现象一:我的function中都没有形参,居然还能接受到实参的值。。。

 

 

<2>奇怪现象2:形参和实参传递并不统一,可以多传递,可以少传递,js都不会报错。

 

 

<3>奇怪现象3:形参和arguments居然可以做到同步,太神奇了。

 

上面的三个现象是不是让你觉得很奇怪???这些奇怪的现象是不是让你觉得Function中封装的太狠,因为他们做了很多操作,而你却只能大眼

瞪小眼,啥也看不到。。。是不是非常遗憾呢???由于看不到源代码我也无能为力,只能根据书中的讲解以及自己的理解来领悟了。“高程3”中

是这么说的,当调用function中传递的实参其实是给了Function构造函数中的一个”内部数组“,而arguments其实是对”内部数组“的高层封装,

封装后的arguments不再是数组了,而是一个伪装的数组,之所以这么说是因为arguments还需要一个自己的独有属性callee,而这个callee

保存的就是当前的对象say,所以只能把arguments做成对象,我可以让你眼见为实。

然后最诡异的一个问题就是形参能够和arguments实现数据同步,既然能够做到同步,我的第一个反应就是使用同一块内存地址,但是仔细想想

他们怎么可能做到共享内存地址呢?但是再想想的话,arguments是对”内部数组“的封装,我就想这个name应该也是被做过手脚的,也就是说

name其实也是对”内部数组“的封装,就像ECMA5中对字段提供get/set访问器一样,当然这是我的一种猜测,解释代码如下:

 

从上图中我们看到,当我对name进行赋值的时候,其实改变的是args这个数组的值,同理当我改变arguments的值时,其实也是修改”内部数组“

的值,通过类似这种方法来达到我们上层看到的同步机制,画个简图如下:

 

2. length属性

  如果你知道了上面的原理,那这个也好猜测,要么取得是正真的“内部数组”的length,要么就是取伪类arguments的length,反正最终都是

”内部数组”的length,对不对,比较常用但是又没什么好说的。

 

3.prototype属性

   这个也是Function内部做出来的一个属性,很有意思,我想大家也有耳闻,也不是三言两语能说得清楚的,准备放在下篇详细的讲讲。

 

4.caller属性

   看这个名字大概也知道个一二,就是用来获取当前的父函数,不要小看这个caller哦,你有没有想过它可以实现C#中的stacktrace的功能

呢?有时候我们记js日志就靠这玩意了,比如下面这样。

 

5:call,apply方法

 因为这两个函数的功能都一样,只不过call方法必须逐一参数赋值,而apply必须传递数组,如果想眼见为实,可以看看它们在vs里面的代码

提示,一切都明白了,所以我就放在一块说了,不过这鸟东西有什么好处呢?它最大的好处就是可以随便绑定对象,然后就可以实现对绑定对象

动态新增方法和属性,可能说的有点抽象,看个例子就OK啦。

 我们发现,本来我的obj只是一个空对象,通过apply之后,我的obj对象具有name和age属性了,是不是很神奇呢?

时间: 2024-10-09 18:33:13

Javascript之旅——第九站:吐槽function的相关文章

Javascript之旅——第二站:对象和数组

原文:Javascript之旅--第二站:对象和数组   一觉睡到中午,本来准备起来洗洗继续睡,不过想想没辙,还得继续这个系列,走过变量的第一站,第二站我们再来看看对象和数组.   一:对象   说起对象,我们不自然就想起了面向对象中自封装的一个类,同样JS中也是遵循这个守则,在web编程中几乎天天用到的就是JSON.是的, 这就是一个对象,不过这个对象下面的字段都是字符串和值类型,如下图. 1 var delivery = { 2 no: 1, 3 sendtime: "2014-11-25&

Sql Server之旅——第九站 看公司这些DBA们设计的这些复合索引

原文:Sql Server之旅--第九站 看公司这些DBA们设计的这些复合索引 这一篇再说下索引的最后一个主题,索引覆盖,当然学习比较好的捷径是看看那些大师们设计的索引,看从中能提取些什么营养的东西,下面我们看 看数据库中一个核心的Orders表. 一:查看表的架构 <1> 先查看这个表的大概架构信息 1 --查看表的架构信息 2 SELECT c.column_id,c.name,t.name FROM sys.columns AS c 3 JOIN sys.types t 4 ON c.s

Javascript之旅——第一站:从变量说起

工作这几年,js学的不是很好,正好周末有些闲时间,索性买本<js权威指南>,大名鼎鼎的犀牛书,好好的把js深入的看一看.买过这本 书的第一印象就是贼厚,不过后面有一半部分都是参考手册.   一:作用域 说起变量第一个要说到的肯定就是作用域,正是因为不熟悉JS的作用域,往往就会把面向对象的作用域张冠李戴,毕竟有些东西总是习惯性 的这样,但是并不是每次照搬都是可以的,那么下一个问题就来了,js到底是什么作用域,当然是函数作用域了,我们的浏览器就是一个被实例 化的window对象,如果在window

Javascript之旅——第六站:看看writable特性

原文:Javascript之旅--第六站:看看writable特性 说起js中的那些特性标记,总觉得有些怪怪的,那为什么要说到这个attribute,起源于对一个问题的疑问,我们都知道window对象其实就是 浏览器窗口的一个实例,既然是一个实例,那这个实例就应该有"属性"和"方法",比如下面这样: 我们平时都在使用function的时候,都会定义一些属性,比如name,age等等,并且还可以对他们进行delete,set和update操作. 那么下面问题来了,既然

Javascript之旅——第八站:说说instanceof踩了一个坑

原文:Javascript之旅--第八站:说说instanceof踩了一个坑 前些天写js遇到了一个instanceof的坑,我们的页面中有一个iframe,我在index页面中计算得到了一个array,然后需要传递到Flight页面 这个嵌套的iframe中的一个函数(SearchFlight)中,作为防御性编程,我需要在SearchFlight函数中进行参数检测,也就是判断过来的参数一 定是Array类型.   一:抛出问题 举个例子,下面有两个页面. Index.html页面 1 <!DO

Javascript之旅——第四站:parseInt中要注意的坑

原文:Javascript之旅--第四站:parseInt中要注意的坑   前些天信用卡站点要接入一个新功能,不过还真比较坑爹,asp站点,大家都知道信用卡的背面是有一个有效期的,在对接银行中这个信息 一定是要传给银行做数据校验,用户在语音输入信用卡有效期后,系统会做一个有效期判断,为了不必要的麻烦,就是判断过期时间一定不能在 一个月内,由于输入的年月日在三个文本框中,再加上我嫌转成时间麻烦,就索性直接拿年,月,日的文本内容直接强转成int类型来判断,此为 背景. 说了这么多,终于说到文章主题了

Sql Server之旅——第二站 理解万恶的表扫描

原文:Sql Server之旅--第二站 理解万恶的表扫描 很久以前我们在写sql的时候,最怕的一件事情就是sql莫名奇妙的超级慢,慢的是撸一管子回来,那个小球还在一直转...这个着急也只有当事人才 明白,后来听说有个什么"评估执行计划",后来的后来才明白应该避免表扫描... 一:表扫描 1.现象 "表扫描"听起来很简单,不就是一行一行的扫嘛,你要说"执行计划"的话,我也会玩,为了更可观,我build一个表,再插入三行数据,如下图:   上面的P

Sql Server之旅——第一站 那些给我们带来福利的系统视图

原文:Sql Server之旅--第一站 那些给我们带来福利的系统视图 本来想这个系列写点什么好呢,后来想想大家作为程序员,用的最多的莫过于数据库了,但是事实上很多像我这样工作在一线的码农,对sql 都一知半解,别谈优化和对数据库底层的认识了,我也是这样...   一:那些系统视图 1. 系统视图是干什么呢? 从名字上看就知道,系统视图嘛?猜的不错的话,就是存放一些sqlserver系统的一些信息,很好,恭喜你,答对了.   2. 都定义在哪呢?  为了让你眼见为实,下面截图看看,从截图中你可以

javascript 提示submit is not a function错误

我遇到了一个很奇怪的问题,就是在利用Javascript控制表单提交时,浏览器提示document.genForm.submit is not a function.genForm是表单<form>的name,并且使用同样函数的另一个表单却执行正常,查找了半天也没有发现两个有什么不同,后来在网上搜索了一番,结果找到了原因. 当表单<form>-</form>中含有name="submit"时,提交时就会有冲突,这个错误常见于按钮上,如: 在Javas