javaScript-函数

发表于 更新于 分类于

JavaScript函数

在JavaScript中函数实际也是一种对象，每个函数都是Function类型的实例，能够定义不同类型的属性和方法

一、函数的定义

函数的定义大致上可以分为3种，分别是函数的声明、函数表达式和Function构造函数

1、函数声明

  • 函数的声明是直接使用function关键字接一个函数名，函数名后面是接收函数的形参
1
2
3
function sum(num1, num2){
	return num1 + num2;
}

2、函数表达式

  • 函数表达式的形式类似于普通变量的初始化，只不过这个变量初始化的值时函数
1
2
3
let sum = function(num1, num2){
	return num1 + num2;
}

3、Function()构造函数

  • 使用new操作符，调用Function()构造函数，传入对应的参数，也可以定义一个函数
1
let sum = new Function("a", "b", "return a + b");

  • 其中除了最后一个参数是执行的函数体，其他参数都是函数的形参

  • Function()构造函数每次执行时，都会解析函数主体，并创建一个新的函数对象

  • Function()函数在A函数中执行时无法访问A函数内的局部变量，只能访问全局变量

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

  • 在使用函数声明时，是必须设置函数名称的，这个函数名称相当于一个变量，以后函数的调用也会通过这个变量进行。

  • 而对于一个函数表达式来说，函数名称是可选的，可以定义一个匿名表达式，并赋给一个变量，然后通过变量进行函数的调用。

  • 对应函数声明，存在函数提升，函数的调用可以在函数声明之前使用，而函数表达式不存在。

二、函数的调用

1、函数调用模式

函数调用模式是通过函数声明或者函数表达式的方式定义函数，然后通过直接函数名调用的模式

1
2
3
4
5
6
7
8
9
10
11
12
// 函数声明
function add(a1, a2){
	return a1 + a2;
}

// 函数表达式
let sub = function(a1, a2){
	return a1 - a2;
}

add(1, 2);
sub(11, 6);

2、方法调用模式

方法调用模式会优先定义一个对象obj，然后在对象内部定义值为函数的属性property，通过对象obj.property()来调用

1
2
3
4
5
6
7
8
9
10
// 定义对象
let obj = {
	name: "node",
	// 定义getName属性，值为一个函数
	getName: function(){
		return this.name;
	}
};
obj.getName();   // 通过点调用
obj['getName']();   // 通过中括号调用

如果函数返回对象本身this，则可以利用链式调用的原理进行连续的函数调用

1
2
3
4
5
6
7
8
9
10
11
12
let obj = {
	name: "node",
	// 定义getName属性，值为一个函数
	getName: function(){
		return this.name;
	}
	setName: function(name){
		this.name = name;
		return this;   // 在函数内部返回函数对象本身
	}
};
obj.setName("Node").getName();   // 链式函数调用

3、构造器调用模式

构造器调用模式会定义一个函数，在函数中定义实例属性，在原型上定义函数，然后通过new操作符生成函数实例，在通过实例调用原型上定义的函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 定义函数对象
function Person(name){
	this.name = name;
}
// 原型上定义函数
Person.property.getName = function(){
	return this.name;
};

// 通过new操作符生成实例
let person = new Person('node');
// 通过实例调用函数
person.getName()

4、call()函数、apply()函数调用模式

通过call()函数或者apply()函数可以改变函数执行的主体，使得某些不具有特定函数的对象可以直接调用该特定函数。

1
2
3
4
5
6
7
8
9
// 定义一个函数
function sum(num1, num2){
	return num1 + num2;
}
// 定义一个对象
let person = {};
// 通过call()或者apply()函数调用sum()函数
sum.call(person, 1, 2);
sum.apply(person, [1, 2]);

5、匿名函数调用模式

匿名函数，就是没有函数名称的函数。匿名函数的调用有两种方式，一种是通过函数表达式调用函数，并赋值给变量，通过变量进行调用。

1
2
3
4
5
let sum = function(num1, num2){
	return num1 + num2;
};
// 通过sum()函数进行匿名函数调用
sum(1, 2);

另一种是使用小括号()将匿名函数括起来，然后在后面使用小括号()，传递对应参数进行调用。

1
2
3
(function(num1, num2){
	return num1 + num2;
})(1, 2);   // 3