【JS第15期】Function 详解

函数其实是一个对象。每一个函数都是Function 实例，并且都与其余引用类型同样具备属性和方法。因为函数也是对象，所以函数名实际上也是一个指向函数对象的指针。

函数定义方式

函数声明

function sum(num1, num2) {
  return num1 + num2;
}
复制代码

函数表达式

var sum = function(num1, num2) {
  return num1 + num2;
}
复制代码

Function 构造函数

var sum = new Function('num1', 'num2', 'return num1 + num2');
复制代码

注意：使用构造函数定义是不推荐的。由于这种语法会致使解析两次代码（第一次解析常规ECMAScript代码， 第二次是解析传入构造函数中的字符串）,从而影响性能

函数声明与函数表达式的区别

• 函数声明会首先被解析器读取，并使其在执行任何代码以前能够访问。如：

console.log(sum()) // 1
function sum() {
  return 1;
}
复制代码

• 函数表达式则必须等到解析器执行到它所在的代码块，才会真正被解析器执行。如：

console.log(sum()) // sum is not a function
var sum = function () {
  return 1;
}
复制代码

没有重载

在建立两个同名函数时，后面的函数会覆盖了前面的函数。如：

function sum() {
  return 1;
}
function sum() {
  return 2
}
sum() // 2;
复制代码

做为值的函数

由于ECMAScript 中函数名自己就是变量，因此函数能够做为值来使用。也就是说，不只能够像传递参数同样传递给另外一个参数，也能够将一个函数作为函数返回值返回，以下：

function test(func, arg) {
  return func(arg)
}
function test2() {
  return function() {
    console.log('test2')
  }
}
复制代码

函数内部属性

arguments

arguments 是一个类数组的对象，返回值为函数的全部参数。这个对象还有另一个属性callee,该属性是一个指针，指向arguments对象所在的函数的指针。举例说明：

// demo1.js
// 定义一个阶乘
function test(num){
  console.log('111')
    if(num <= 1){
        return 1;
    } else {
        return num * test(num - 1);
    }
}
test(5) // 120
// 将test函数赋值给另外一个变量
var test2 = test

// 咱们再从新给test定义一个方法
var test = function() {
  return 0;
}
test2(5) // 0;
test(5) // 0
复制代码

再看下使用callee属性后是如何

// demo2.js
// 定义一个阶乘
function test(num){
    if(num <= 1){
        return 1;
    } else {
        return num * arguments.callee(num - 1);
    }
}
test(5) // 120
// 将test函数赋值给另外一个变量
var test2 = test

// 咱们再从新给test定义一个方法
var test = function() {
  return 0;
}
test2(5) // 120;
test(5) // 0
复制代码

demo1.js 的代码咱们为test从新定义了方法，原test变量的指向的指针发生了变化，因此返回从新定义方法的返回值。

this

this 引用的是函数执行的环境对象。但有些特殊的例外，如settimeout,setInterval等

caller

caller保存着调用当前函数的函数引用，若是是在全局做用域下调用，则返回null。如：

function outer() {
  inner()
}

function inner() {
  console.log(inner.caller)
}
outer();
复制代码

以上代码为了实现松耦合，也能够经过arguments.callee.caller来访问。如：

function outer() {
  inner()
}

function inner() {
  console.log(arguments.callee.caller)
}
outer();
复制代码

IE、firefox、chrome、safri 的全部版本以及opera9.6都支持caller属性。

当函数在严格模式下运行时，访问arguments.callee会致使错误。

ECMAScript 5 还定义了 arguments.caller 属性，但在严格模式下访问它也会致使错误，而在非严格模式下这个属性始终是undefined。定义arguments.callee属性是为了分清arguments.caller和函数的caller属性。以上变化为了增强这门语言的安全性，这种第三方代码不能在相同的环境里窥视其余代码了。

严格模式还有一个限制：不能为函数的caller属性赋值，不然会致使错误。

函数的属性和方法

属性

length length属性表示函数但愿接收的命名参数的个数 prototype prototype 指向原型对象。包括诸如：toString()、valueof()等方法

方法

如下的方法都是改变函数的this指向的 call() call() 方法调用一个函数, 其具备一个指定的this值和分别地提供的参数(参数的列表)。 语法

fun.call(thisArg, arg1, arg2, ...)
复制代码

参数

参数	描述
thisArg	在fun函数运行时指定的this值。
arg1, arg2, ...	指定的参数列表。

返回值 返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。 apply()

方法调用一个函数, 其具备一个指定的this值，以及做为一个数组（或相似数组的对象）提供的参数。

语法

fun.call(thisArg, [argsArray])
复制代码

参数

参数	描述
thisArg	在fun函数运行时指定的this值。
argsArray	可选的。一个数组或者类数组对象，其中的数组元素将做为单独的参数传给 func 函数。

返回值 调用有指定this值和参数的函数的结果。 bind() bind()方法建立一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供以前提供一个给定的参数序列。

语法

fun.bind(thisArg[, arg1[, arg2[, ...]]])
复制代码

参数

参数	描述
thisArg	当绑定函数被调用时，该参数会做为原函数运行时的 this 指向。当使用new 操做符调用绑定函数时，该参数无效。
arg1, arg2, ...	当绑定函数被调用时，这些参数将置于实参以前传递给被绑定的方法。

返回值 返回由指定的this值和初始化参数改造的原函数拷贝

若有侵权，请发邮箱至wk_daxiangmubu@163.com 或留言，本人会在第一时间与您联系，谢谢！！

长按二维码关注咱们，了解最新前端资讯