JavaScript基础—函数
2021-10-20 本文已影响0人
OmewSPG
函数基础
函数声明：
function sayHi(){
console.log('Hello World!');
}
如果函数不调用，自己是不会执行的：
sayHi();
函数的封装：是把一个或多个功能通过函数的方式封装起来并对外提供一个简单的接口
利用函数求累加和
function getSum(num1, num2){ // 这里声明的是形参
var sum = 0;
for(var i = num1 ;i <= num2 ;i++){
sum += i;
}
console.log(sum);
}
getSum(1,100); // 这里的是实参
getSum(1,50);
形参与实参的执行过程：
- 先执行的其实是函数调用，将调用语句中的实参传递到形参当中，然后再执行函数
- 参数可以有，也可以没有，并且个数不限
返回值return：
输出语句写进函数内部并不合理，因此使用return来返回值
function getAddNum(){
return 251;
}
var result = getAddNum() + 125;
console.log(result); // 376
函数只是用来实现某种功能，最终结果需要返回给函数调用语句
函数返回值
实例，利用函数求数组中的最大值：
var arr1 = [4, 6, 2, 55, 44, 67, 23, 116, 87, 9, 555];
function getArrMax(arr) {
var Max = arr[0];
for (var i = 0; i <= arr.length - 1; i++) {
if (arr[i] > Max) {
Max = arr[i];
}
}
return Max;
alert('这句代码并不会执行'); // return 之后的语句不会执行
}
var res = getArrMax(arr1);
console.log(res);
return 只能返回一个值，返回结果是最后一个值：
function fun1(num1, num2) {
return num1, num2;
}
console.log(fun1(2, 4)); // 4
如果需要返回多个值，可以返回一个数组：
function fun2(num1, num2) {
return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
}
var res = fun2(2, 4)
console.log(res);
函数若没有return，返回undefined
return 不仅可以退出循环，还可以结束整个函数
实例，判断用户输入的是否为素数，并弹窗提醒：
var temp = prompt('enter a number:');
var input = parseInt(temp);
function func(num1) {
for (var i = 2; i < num1; i++) {
if (num1 % i != 0) {
return 'this is a prime...';
}else{
return 'this is not a prime...';
}
}
}
var res = func(input);
alert(res);
内置argument方法
arguments 是当前函数的一个内置对象，其中存储了传递的所有实参：
function fun() { // 形参省略
console.log(arguments);
console.log(arguments.length);
console.log(arguments[2]);
}
fun(1,2,3,4,5);
arguments的展示形式是一个伪数组
伪数组特性:
- 具有数组的length属性
- 按照索引的方式进行存储
- 没有真实数组的方法，比如pop()、push()....
函数之间的调用
实例：
function fn1() {
console.log(111);
fn2();
console.log('fn1');
}
fn1(); // 111 222 fn2 fn1
function fn2() {
console.log(222);
console.log('fn2');
}
实例，输出当前年份2月的天数：
function backDay() {
var year = prompt('请输入一个年份：');
if(isRunYear(year)){ // 函数调用
alert('当前年份2月有29天');
}else{
alert('当前年份2月有28天');
}
}
backDay();
function isRunYear(year) { // 判断当前年份是否是闰年
var flag = true;
if(year % 4 ==0 && year % 100 != 0 || year % 400 == 0){
flag = true;
}else{
flag = false;
}
return flag;
}
函数的另一种声明方式，函数表达式（匿名函数）：
var num = function() {
console.log('this is a function...');
}
num(); // num是变量名，不是函数名
// num里面存储的并不是返回值，而是整个函数
// 函数表达式也可以用来传递参数
作用域与作用域链
JavaScript作用域（ES5版本）
全局作用域：整个script标签，或者一个单独的js文件
var num = 10;
console.log(num); // 10
局部作用域：函数作用域，只在函数内部起作用
function fn() {
var num = 20;
console.log(num); // 20
}
fn();
变量的作用域（按照作用域不同进行划分）
全局变量：
var num = 1; // 声明一个全局变量
console.log(num); // 1
function fun1() {
console.log(num); // 1
}
fun1();
局部变量：
function fun2() {
var num1 = 2; // 声明一个局部变量
num3 = 3; // 特殊情况，没有声明直接赋值使用的也算全局变量
console.log(num1);
}
fun2(); // 2
// console.log(num1); // error
console.log(num3); // 3
执行效率：
- 全局变量只有浏览器关闭时才会销毁，占用较多内存资源
- 局部变量在程序执行完毕后就会销毁，占用较少的内存资源
ES6版本新增块级作用域... {}代码块内
作用域链
- 内部函数访问外部函数变量，采用链式查找的方式来决定取哪个值
- 满足就近原则
var char = 'abc'
function func1() {
var char = 'a'
function func2() {
console.log(char);
}
func2();
}
func1(); // a
预解析
例1：直接打印一个尚未声明的变量会报错
console.log(num); // error
例2：如果先打印变量，后对其声明赋值，则会打印出undefined
console.log(num); // undefined
var num = 10;
例3：先调用函数，后对其进行函数声明，可以正常运行
fun(); // 11
function fun() {
console.log('11');
}
例4：同样是先调用函数，但如果声明方式是函数表达式，则会报错
fun1(); // error
var fun1 = function (){
console.log('22');
}
造成以上案例结果差异的原因就是预解析
1. js引擎运行代码分为两步： (1) 预解析 (2) 代码执行
(1). 预解析：js引擎会把js中所有的涉及 var 和 function 关键的字语句提升到当前作用域的最前面
(2). 代码执行：按照预解析后的顺序从上到下执行代码
2. 预解析分为： (1) 变量预解析（变量提升） (2) 函数预解析（函数提升）
(1). 变量提升 ：就是把所有的变量声明提升到当前的作用域的最前面 不提升赋值操作
(2). 函数提升 ：就是把所有的函数声明提升到当前作用域的最前面 不调用函数
预解析案例
例1：
var num = 10;
fun();
function fun() {
console.log(num);
var num = 20;
}
相当于以下代码：
var num;
function fun() {
var num;
console.log(num);
num = 20;
}
num = 10;
fun();
// 打印结果为undefined
例2：
var num = 10;
function fun() {
console.log(num);
var num = 20;
console.log(num);
}
fun();
相当于以下代码：
var num;
function fun() {
var num;
console.log(num);
num = 20;
console.log(num);
}
num = 10;
fun();
// 打印结果为：undefined 20
例3：
var a = 10;
fun();
function fun() {
var b = 9;
console.log(a);
console.log(b);
var a = '123';
}
相当于以下代码：
var a;
function fun() {
var b;
var a;
b = 9;
console.log(a);
console.log(b);
a = '123';
}
a = 10;
fun();
// 结果为： undefined 9
例4：
fn();
console.log(c);
console.log(b);
console.log(a);
function fn() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
相当于以下代码：
function fn() {
var a = 9 ; b = 9 ; c = 9; // b和c相当于全局变量
// 区别于集体声明 ： var a = 9 , b = 9 , c = 9;
console.log(a);
console.log(b);
console.log(c);
}
fn();
console.log(c);
console.log(b);
console.log(a);
// 输出为： 9 9 9 9 9 error
