在本教程中,您将了解 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()
。