在码农港湾
做一个实实在在的内行人

常见面试题JavaScript语言中四种函数调用方式实例分析

跳槽季,很多前端工程师在参加面试时,经常会有面试题目,是关于JavaScript中函数调用的四种方式的异同及注意事项。本文就来讲讲JavaScript语言中四种函数调用方式,希望对你所有帮助。

常见面试题JavaScript语言中四种函数调用方式实例分析

JavaScript函数调用的四种方式:

  • 函数调用模式
  • 方法调用模式
  • 构造器调用模式
  • call / apply / bind 调用模式

JavaScript进行函数调用是,会额外有 this 和 arguments 二个隐形参数供我们使用,但不同的调用方式,this 所代表的意义是不一样的;arguments 是一个参数组,它并不是一个真实的数组,但我们可以用 length 的方法来共取参数的个数。下面我们用实例来讲解这四种调用方法。

函数调用模式

我们通常就是用这种模式进行函数调用,故也称作普通调用模式。

常见面试题JavaScript语言中四种函数调用方式实例分析

请注意,上图的 add 函数中的 this 参数,此时是指向 window,控制台输入的 this 的的值如下图:

常见面试题JavaScript语言中四种函数调用方式实例分析

方法调用

函数被定义为对象的方法,以对象的形式进行的调用。如下:

常见面试题JavaScript语言中四种函数调用方式实例分析

请注意,以上代码中的 this 是指向 myobject 对象的。

构造器调用模式

和 C++ / Java 语言类似,当使用 new 操作符来创建一个对象时,将自动调用对象的构造函数。如下:

常见面试题JavaScript语言中四种函数调用方式实例分析

目前大多数人建议摒弃这种调用方式,具体原因以后专门来一篇文章进行说明,敬请关注。

call / apply / bind 调用

在 JavaScript 中每个自定义函数(甚至包括原生类型)都有一个原型(prototype)对象,这个原型对象内置实现了call、apply及bind 函数。call 与 apply 很类似,都是用来改变 this ,因为我们知道,this 默认指向调用者对象,通过 call / apply 可以改变这种默认行为。

apply()接收二个参数,第一个用来绑定 this ,第二个是参数数组,你想传递给这个函数的所有参数都在这个数组里,然后 apply() 函数会在调用函数时自动帮你将数组展开。

call() 的第一个参数也是用来绑定 this ,但后面接受的参数是不定参数,而不是一个数组。代码示例如下:

常见面试题JavaScript语言中四种函数调用方式实例分析

而 bind 函数与 call 函数不一样,但是 bind 实际上返回一个新的函数对象,用来延迟调用(并不会马上执行)。

再来看一个 call / apply / bind 调用的实例:

常见面试题JavaScript语言中四种函数调用方式实例分析

另外,头型函数调用,我们还需要了解下函数定义方式上的不同:一种是函数声明,一种是函数表达式,函数声明的一个重要特征是函数声明提升(function declaration hoisting),这也是两种声明方式的重要区别。

常见面试题JavaScript语言中四种函数调用方式实例分析

上图中的代码,因为函数声明,具有函数提升效应,不需要在调用 fun 函数之前进行 fun 函数的定义,是可以工作的。

反之,如果使用函数表达式,则必须注意函数调用必须在表达式定义之后:

常见面试题JavaScript语言中四种函数调用方式实例分析

注:上面这种函数表达式中创建的函数 function 关键字后面没有标识符,被称之为匿名函数(也叫Lamada函数),匿名函数的 name 属性为空字符串。


码农刷题必备工具 VS 码农进阶必读书籍

IT面试宝典宝典書城