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属性了,是不是很神奇呢?
Javascript之旅——第九站:吐槽function的更多相关文章
- Javascript之旅——第二站:对象和数组
一觉睡到中午,本来准备起来洗洗继续睡,不过想想没辙,还得继续这个系列,走过变量的第一站,第二站我们再来看看对象和数组. 一:对象 说起对象,我们不自然就想起了面向对象中自封装的一个类,同样JS中也 ...
- Javascript之旅——第一站:从变量说起
工作这几年,js学的不是很好,正好周末有些闲时间,索性买本<js权威指南>,大名鼎鼎的犀牛书,好好的把js深入的看一看.买过这本 书的第一印象就是贼厚,不过后面有一半部分都是参考手册. 一 ...
- Sql Server之旅——第九站 看公司这些DBA们设计的这些复合索引
这一篇再说下索引的最后一个主题,索引覆盖,当然学习比较好的捷径是看看那些大师们设计的索引,看从中能提取些什么营养的东西,下面我们看 看数据库中一个核心的Orders表. 一:查看表的架构 <1& ...
- JavaScript之旅(DOM)
JavaScript之旅(DOM) [TOC] 一.认识DOM 什么是 DOM? DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准 ...
- JavaScript之旅(三)
JavaScript之旅(三) 三.函数 在JavaScript中,定义函数的方式如下: function abs(x) { ... return ...; } 如果没有return,返回结果为und ...
- JavaScript之旅(二)
JavaScript之旅(二) 二.进阶知识 js的正则表达式 异常处理 调试 变量提升 表单验证 JSON javascript:void(0) JavaScript 代码规范 二.进阶知识 1. ...
- Javascript之旅(一)
Javascript之旅(一) 一.基础知识 基本语法 变量 数据类型 字符串 数组 对象 条件判断 循环 Map和Set iterable 为什么要学习JavaScript JavaScript 是 ...
- JavaScript学习09 函数本质及Function对象深入探索
JavaScript学习09 函数本质及Function对象深入探索 在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念 ...
- JavaScript基础知识(JSON、Function对象、原型、引用类型)
19.JSON 概念:JavaScript 对象表示法(JavaScript Object Notation),是一种轻量级的数据交换格式 特点:易于程序员编写和查看:易于计算机解析和生成 数据结构 ...
随机推荐
- Asp.net Mvc模块化开发之“开启模块开发、调试的简单愉快之旅”
整个世界林林种种,把所有的事情都划分为对立的两个面. 每个人都渴望的财富划分为富有和贫穷,身高被划分为高和矮,身材被划分为胖和瘦,等等. 我们总是感叹,有钱人的生活我不懂;有钱人又何尝能懂我们每天起早 ...
- virtualbox创建com对象失败(解决方法)
我的电脑是win7 64bit的,和舍友同时安装virtualbox,她的是win8,安装得很顺利. 我的就比较坎坷了,安装完打开后就出现了这个问题. 试过网上的好几个方法都不行,最后结合了两 ...
- MAC安裝CocoaPods
前言,鑒於很多人都比較趕時間,有人是為了去應付工作,有人是為了去找妹子,總之,不管你懂不懂,如果你只是想安裝一下,那麼你只需要按照濤叔下面畫黃色的命令複製粘貼到終端順序執行就好了. 一.安裝 1.Ru ...
- linux非常用但很有用的命令
查找指定目录下包含指定字符串的所有文件 grep -rl 'abc' / top查看命令的完整启动路径 top 按c top以MB为单位显示内存信息 top -M 查看内存top io趋势 pidst ...
- 设计3D标签
java自带的Label太枯燥了,真是拿不出手啊. 所以,我们要设计3D标签!! 看看下面这张图 原理 看看这图,可以看到哈哈有三种颜色:白色.黑色和灰色 实现的时候并不像PS那样,按几个按钮就O了 ...
- MyBank(自助银行)系统
光阴似箭,岁月如梭. 从开始学Java到现在学C#已快四个月了,我们学的东西越来越多了.但是虽说学到现在,都不知道有什么用?没地方表现啊. 那么今天我就来给大家说说说这些东西的用处吧. 就拿MyBan ...
- (原) tmux安装与使用
本文为原创文章,转载请注明出处,谢谢 tmux安装 1.yum search tmux 2.yum install package (package为选择要安装的包名,如上图“tmux.x86_64” ...
- java--POI解析excel兼容性问题
近日,使用POI解析excel,发现2003版本的excel解析与2007版本的excel解析存在问题.特此总结: 1.所需jar包 : 2.java类代码(读取excel文件): public vo ...
- rem在响应式布局中的应用
rem/em/px/pt的基友关系 px 像素相对长度单位,相对于显示器屏幕分辨率而言 em 相对长度单位,根据其父元素来设置字体大小 pt point,是印刷行业常用单位,等于1/72英寸 rem ...
- 错误解决:SharePoint Designer 2010编辑后,出现数据源控件未能执行插入命令,data source control failed to execute the insert command
打了SharePoint 2010 最新的SP 2的补丁,但是使用SharePoint Designer 2010 定义任何一个列表的“插入视图”时,总是出现标题那样的错误: 数据源控件未能执行插入命 ...