JavaScript函数调用的四种方式

JavaScript 函数调用除了声明时定义的形式参数,每个函数还接收两个附加的参数:this 和 arguments.参数 this 在面向的对象 编程非常重要,它的值取决于调用的模式.典型的两种函数定义方式有:

var add = function(a, b) {
  return a + b;
};
function add(a, b) {
  return a + b;
}
1
2
3
4
5
6

这两种函数声明的区别是什么,是我上次百度面试的一个问题.当时没回答出来,很是尴尬.现在问了前端菊苣之后得出的答案是: 一个是声明了一个变量 add,并给它赋初始值(一个匿名函数)另一个是声明了一个名为 add 的具名函数区别有:

  1. add.name 不同,trace 的时候显示也不同(第一个 add.name 是"",第二个是"add")
  2. 由于声明会被提升,但赋值语句不会,所以在语句之前访问 add 的时候结果不同(这点老 IE 还有点区别)

在 JavaScript 中四种调用模式分别是:方法调用模式,函数调用模式,构造器调用模式和 apply 调用模式.这些模式在如何初始化关键 参数 this 上存在差异.

# 方法调用模式

当一个函数被保存为对象的一个属性时,我们称它为一个方法.当一个方法被调用时,this 被绑定到该对象.如果调用表达式包含一个提取属性 的动作(即包含一个 . 点表达式或[subscript]下标表达式),那么它就是被当做一个方法来调用.

var myObject = {
  value: 0,
  increment: function(inc) {
    this.value += typeof inc === 'number' ? inc : 1;
    console.log(inc);
  }
};
myObject.increment(); // 1
myObject.increment(2); // 3
1
2
3
4
5
6
7
8
9

方法可以使用 this 访问自己所属的对象,所以它能从对象中取值或对对象进行修改.this 到对象的绑定发生在调用的时候.这个"超级"延迟绑定(very late binding) 使得函数可以对 this 高度复用.通过 this 可取得他们所属对象的上下文的方法成为公共方法(public method).

# 函数调用模式

当一个函数并非一个对象的属性时,那么它就是被当做一个函数来调用的:

var sum = add(3, 4);
1

以此模式调用函数时,this 被绑定到全局对象(浏览器中就是 window 对象).这是语言设计上的一个错误.倘若语言设计正确,那么当内部函数被调用时,this 应该仍然绑定到 外部函数的 this 变量.这个设计错误的后果就是方法不能利用内部函数来帮助它工作,因为内部函数的 this 被绑定了错误的值,所以不能共享该方法对对象的访问权.幸运的是, 有一个很容易的解决方案:如果该方法定义一个变量并给它赋值为 this,那么内部函数就可以通过那个变量访问到 this.按照约定,我们把那个变量命名为 that:

myObject.double = function() {
  //给myObject增加一个 double 方法
  var that = this;
  var helper = function() {
    that.value = add(that.value, that.value);
    console.log(this);
  };
  helper(); //以函数的形式调用helper
};
myObject.double(); //以方法的形式调用double
1
2
3
4
5
6
7
8
9
10

# 构造器调用模式

如果在一个函数前面带上 new 来调用,那么背地里将会创建一个连接到该函数的 prototype 成员的新对象,同时 this 会被绑定到那个新对象上.

//创建一个名为Quo的构造器函数,它构造一个带有status属性的对象.
var Quo = function(string) {
  this.status = string;
};
//给 Quo的所以实例提供一个名为 get_status 的公共方法.
Quo.prototype.get_status = function() {
  return this.status;
};
//构造一个 Quo 实例
var myQuo = new Quo('confused');
1
2
3
4
5
6
7
8
9
10

一个函数,如果创建的目的就是希望结合 new 前缀来调用,那它就被称为构造器函数.这种构造器函数不推荐使用,详细内容请看《JavaScript 语言精粹》后续内容.

# Apply 调用模式

因为 JavaScript 是一门函数式的面向对象编程语言,所以函数可以拥有方法.

apply 方法让我们构建一个参数数组传递给调用函数.它允许我们选择 this 的值.apply 方法接收两个参数,第一个是要绑定给 this 的值,第二个就是一个参数数组.

var array = [3, 4];
var sum = add.apply(null, array);

var statusObject = {
  status: 'A-OK'
};
//statusObject并没有继承自 Quo.prototype,但我们可以在 statusObject 上调用
//get_status 方法,尽管 statusObject 并没有一个名为 get_status 的方法.
var status = Quo.prototype.get_status.apply(statusObject);
1
2
3
4
5
6
7
8
9

以上内容摘录于《JavaScript 语言精粹》.

Archlinux折腾笔记

四月也算过去了一大半了,经过了一个月的奔波与折腾,总算安顿好自己了.在学校本地找了一个还算不错的实习. 阴差阳错的选择了 Web 开发工程师的职位,其实我最想做的是后端开发,前端也还是比较喜欢的.但是我有个很大的 缺点就是不会设计... 不会设计的前端开发工程师很鸡肋的,每次网站开发都是同学出设计图我来做的.这样不行的, 我必须能独当一面才算能在公司站得住脚.

近况就是这些,接下来就是记录下自己在 Archlinux 下折腾的东西.方便自己以后查询使用.

# Linux 下视频截图制作动态 GIF

观看视频遇到经典的镜头当然得录下来做成 GIF~ 首先需要安装 imagemagick 这个软件包才行

mplayer -vo png -ss 00:08:28 -frames 200 123.mp4
mogrify -resize 848x480 *.png
convert -delay 4  *.png ry.gif
1
2
3

第一句话是利用 mplayer 输出 png 格式图片,从 8 分 28 秒开始,截图 200 帧,也可以换成

mplayer -vo png:z=1 -ss 00:08:28 -endpos 8  123.mp4
1

这样就是截取 8 秒,png 后面的 z=1 是压缩比例从 0 到 9 压缩程度递增,压缩速度也递增. 第二行便是修改尺寸,毕竟 720p 的 GIF 实在是吃不消啊.然后第三行变把这些 png 生成 GIF 了.

# sudo 设置环境变量

有时候程序需要使用 root 权限,但当我使用 sudo 的时候结果发现这时候程序又使用 root 用户的配置文件了.
现在的需求就是程序使用 root 权限运行但是执行时候读取 HOME 变量还是当前用户.
Run_X11_apps_using_sudo (opens new window) wiki 上有清楚的讲解这样的解决办法.

面试笔记

三月下旬,病还没有完全康复.我便赶往上海.只因为认识的一位菊苣帮我投递了一下简历.而且据说人家对我简历印象还不错. 现在想想,自己还真是幼稚...这句话就像你问店里员工我的菜怎么还没上,人家一定会回答:马上就好了,都已经下锅了. 刚刚抵达上海的时候已经是晚上,这是我人生第一次去上海,有种乡下人进城里的感觉.带着梦想与希望,来到了这个地方.

当天晚上便和 HR 联系面试时间,第二天早上 10 点就赶到约好的地方进行面试.说实话第一次面试,没有任何经验,炮灰的概率太大了. 虽然我有心理准备,但是面试的时候还是有点小紧张.不过面试的都很基础,例如问了我 python 如何进行文件读写,这不是太简单了么. 直接查看文档这不就几秒钟的事情么,简单到我根本不会去记住文件读写的具体写法.因为用的时候自然会去看文档,当然了熟练的话 就直接写出来了,我是一个对着电脑编程根本停不下来的人,但是给我纸笔的话反而写不好.这个文件读写放在项目里根本我都不当回事, 但是面试的时候尴尬的没回答好...后来菊苣也说了,这个时候你就如实回答查下文档不就行了么...

后来又去面试了一家公司,好吧.这回面试的公司主动反问我有什么想问的么...当时我就傻逼了,不是面试官考我么...我还问啥啊? 好吧,当时大脑空白不知道该说什么好就草草结束了这场面试,现在想想真是浪费了一次大好的机会.

第三次面试的是一家小公司,这家公司 HR 之前是知道我面试两家失败了的,然后她问了我一句:你有反思上两家面试的时候为什么失败么? 这可真是一针见血,虽然多多少少我知道自己的不足,但是还没有进行过深刻的反思,HR 就对我说了,首先,你说话太快,导致面试官很难听清 你到底在说什么,妈呀...我父母都说我说话太快.这确实是个问题,因为面试官不可能因为你说话快就让你再重复的,也就一带而过了. 第二就是说话紧张,很难发挥自己平常真实的一面,其实我是一个很怕生的人,让我不紧张实在太难了.第三就是转移话题,面试官问的问题要 就事论事,别扯太多,这个,说实话因为上两次面试没有好好的表达自己的能力这回就想多说点证明自己的实力结果还起了反效果... 第三次面试还是失败了,但是 HR 确实给我很深刻的印象,能告诉面试者不足的 HR 才是好的 HR,没有任何音讯的公司,以后我能力出众的时候你来 挖我我也不会去的,这体现的是一个公司的态度.

三次面试之后我便回学校了,因为上海的生活成本实在太高,我 HOLD 不住,在学校的时候把毕业论文搞定再说吧.不过在学校的时候也可以继续投递 简历,反思下自己哪方面做的不好有待进步.还是在本校接受电话面试,成功的话再去公司才是正确的选择.毕竟对于我这样的死宅来说长途旅行真是 要命,状态不知道要几天才能调节回来...如果有菊苣有好的职位推荐的话,顺便弱弱的球内推,实习职位即可.方向有:前端开发,Python 开发和运维 职位.希望自己之后的面试能顺顺利利~