myfreax

JavaScript 函数类型

您将了解 JavaScript Function 类型,它是 JavaScript 所有函数的类型,在JavaScript ,所有函数都是对象

JavaScript 函数类型
JavaScript 函数类型

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

JavaScript Function 类型介绍

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

函数属性

每个函数都有两个重要的属性:lengthprototype

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

请阅读下面的示例:

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

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

add() 函数接受两个参数 xy。因此,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.targetundefined。但是,如果使用关键字 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

在这个例子中:

首先,声明两个对象 catdog 具有两个属性:

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 类型的实例,类型是具有属性和方法的对象。
  • 一个函数有两个重要的属性:lengthprototype
  • 一个函数也有三个重要的方法:call(), apply(), 和 bind()

内容导航