JavaScript 函数类型

在本教程中，您将了解 JavaScript Function 类型，它是 JavaScript 所有函数的类型。

JavaScript Function 类型介绍

在 JavaScript ，所有函数都是对象。它们是类型 Function 的实例。因为函数是对象，所以它们像其他对象一样具有属性和方法。

函数属性

每个函数都有两个重要的属性：length 和 prototype。

• length 属性确定函数声明指定的命名参数的数量。
• prototype 属性引用着真实的函数对象。

请阅读下面的示例：

function add(x, y) {
    return x + y;
}

console.log(add.length); // 2
console.log(add.prototype); // Object{}

add() 函数接受两个参数 x 和 y。因此，length 属性返回 2。

new.target

通常，您会像这样调用一个函数：

let result = add(10,20); 
console.log(result); // 30

此外，您也可以使用 new 关键词作为构造函数调用函数：

let obj = new add(10,20);

ES6 引入 new.target 伪属性，允许您检测是否使用 new 运算符调用函数或构造函数。

如果一个函数被正常调用，则 new.target 是 undefined。但是，如果使用关键字 new 作为构造函数调用函数，则 new.target 返回对构造函数的引用。

例如：

function add(x, y) {
  console.log(new.target);
  return x + y;
}

let result = add(10, 20);
let obj = new add(10, 20);

输出：

undefined
[Function: add]

通过使用 new.target，您可以控制函数的调用方式。例如，要防止使用关键字 new 作为构造函数调用 add() 函数，您可以通过检查 new.target 来确定函数调用方式或者是否抛出错误：

如下所示：

function add(x, y) {
  if (new.target) {
    throw 'The add function cannot be called as a constructor';
  }
  return x + y;
}

let obj = new add(10, 20);
console.log(obj);

函数方法 apply, call, and bind

函数对象具有三个重要方法：apply(), call() 和 bind()。

apply() 和 call() 方法

apply() 和 call() 方法使用指定 this （上下文）和参数调用函数。

apply() 和 call() 之间的区别在于 apply() 方法第二个参数是一个数组对象，而 call() 方法可以传递多个但不是以数组对象的形式。例如：

let cat = { type: 'Cat', sound: 'Meow' };
let dog = { type: 'Dog', sound: 'Woof' };

const say = function (message) {
  console.log(message);
  console.log(this.type + ' says ' + this.sound);
};

say.apply(cat, ['What does a cat say?']);
say.apply(dog, ['What does a dog say?']);

输出：

What does a cat sound?
Cat says Meow
What does a dog sound?
Dog says Woof

在这个例子中：

首先，声明两个对象 cat 和 dog 具有两个属性：

let cat = { type: 'Cat', sound: 'Meow' };
let dog = { type: 'Dog', sound: 'Woof' };

其次，定义接受一个参数的函数 say()：

const say = function (message) {
  console.log(message);
  console.log(this.type + ' says ' + this.sound);
};

第三、通过 apply() 方法调用 say() 函数：

say.apply(cat, ['What does a cat say?']);

在此示例中， apply() 方法的第一个参数是 cat 对象。因此，say() 函数中的 this 对象引用 cat 对象。

最后，调用 say() 函数并传递 dog 对象：

say.apply(dog, ['What does a dog say?']);

在这个例子中，say() 函数中的 this 引用 dog 对象。

call()方法类似于 apply() 方法，除了将参数传递给函数的方式外，：

say.call(cat, 'What does a cat say?');
say.call(dog, 'What does a dog say?');

bind() 方法

bind() 方法创建一个新的函数实例，其 this 值绑定到您在第一个参数指定的对象。例如：

首先，定义一个名为 car 的对象：

let car = {
    speed: 5,
    start: function() {
        console.log('Start with ' + this.speed + ' km/h');
    }
};

然后，定义另一个名为 aircraft 的对象：

let aircraft = {
    speed: 10,
    fly: function() {
        console.log('Flying');
    }
};

aircraft(飞行器)没有 start() 方法。要启动飞机，可以使用 car 对象 start() 方法 通过 bind() 方法绑定到飞行器：

let taxiing = car.start.bind(aircraft);

在这个语句中，我们将 car 对象的 start() 方法内部的 this 值更改为 aircraft 对象。bind() 方法返回一个函数分配给变量 taxiing。

现在，您可以通过 taxiing 变量调用 start() 方法：

taxiing();

它将打印以下消息：

Start with 10 km/h

下面使用 call() 方法调用 aircraft 对象的 start() 方法：

car.start.call(aircraft);

如您所见，bind() 方法创建一个您可以稍后执行的函数，而 call() 方法立即执行函数。这是 bind() 和 call() 方法之间的主要区别。

从技术上讲，飞行器对象可以通过 bind()，apply() 或 call()方法借用 car 对象 start() 的方法。

因此，bind()、call() 和 apply() 方法也称为借用函数。

结论

• 所有函数都是 Function 类型的实例，类型是具有属性和方法的对象。
• 一个函数有两个重要的属性：length 和 prototype。
• 一个函数也有三个重要的方法：call(), apply(), 和 bind()。