js函数详解

谦虚且进步

已于 2022-07-21 18:33:48 修改

阅读量163

点赞数

分类专栏： JavaScript 文章标签：前端 javascript

于 2022-06-13 12:27:29 首次发布

本文链接：https://blog.csdn.net/weixin_44992737/article/details/125248712

版权

JavaScript 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

函数是对数据和代码地封装，把他们封装在一个代码块里。使用函数的最大好处就是：代码功能的复用。

一，声明一个js函数

1，使用function关键字

function func1(args1,args2,……){
//pass
}

调用函数时使用：func1(pars1，pars2，……)，即：函数名+英文括号()。

2，使用变量来接收一个函数类型

var func = function(args1,args2,...){
//pass
}

3，注意点

最好不要在if语句块和循环语句块里定义函数。

二，重复定义同名函数

定义多个同名函数，也就是同一个函数变量名。这时，只有最后一次定义的函数会生效，因为函数变量名与最后声明的代码块进行了绑定。

三，函数名的提升

变量提升是指：将变量的声明提升到他起作用的最顶端。

函数名实际上也是一个变量，使用function关键字定义的函数会发生函数名变量提升：即函数定义的语句会被提前解析。这会导致函数调用的代码可以写在函数定义语句之前。使用var声明的函数虽然会被提前但是不被解析，只会给个undefined值。由于变量名提升，所以下面这种方式是定义函数的最佳选择：

function func1(args1,args2,……){
//pass
}

如果存在变量名与函数名重名，则函数变量名和普通变量名都会提升，但是这个同名变量会优先与函数对象进绑定，如果对这个变量进行赋值操作，则会与函数对象解绑，这个同名函数将无法使用。

四，函数的属性及方法

函数作为函数对象，每个函数对象都有一些属性。

1，函数对象的name&length属性

name属性返回函数对象的变量名。如果需要打印函数对象的名字，需要使用func.name，而console.log(func)会打印出函数体。

length属性返回函数预期需要额参数个数，也就是返回函数的参数个数。

2，toString()方法

将函数体转换为字符串返回。

五，函数作用域

1，全局变量和局部变量

指的是：js中的各种变量起作用的范围。这里要讲函数体里面定义的变量起作用的范围是哪里。

在函数里面声明的变量称为局部变量，只能在函数里面使用，外部无法使用。在任意函数外部声明的变量称为全局变量，全局变量在任何位置都能被访问到。这里需要注意全局和局部同名变量的用法。

在函数体里只能使用全部变量，如果对其进行修改，则会在函数体里面新建一个同名变量对全局变量进行覆盖。

num = 1
function f(){
    console.log(num);
    num = 2;
    console.log(num);
}
f();
// 1
// 2

在函数体里面，使用var声明的变量才叫局部变量，在其他语句体里面，如if语句块，循环语句块里面用var声明的变量都是全局变量。

2，函数体里的变量提升

在函数体里使用var声明的变量也会变量提升，提升到这些变量起作用的区域的最前面，即把变量声明提前到函数体最前面，先创建变量名，创建的变量名是否绑定对象不用管。

六，函数参数

一定程度上，函数的作用就是处理各种数据，我们并不可能把所有数据都放到函数体里面，因为函数只是一个过程算法，他每次处理的数据都是不一样的。

在函数里，我们只能使用函数体里面的变量，也能使用全局变量但是不能修改。那么怎么才能让函数体里面的代码操作到函数体外面的数据呢？可以使用参数。

依照各种数据结构，比如数组，字符串，纯数字，可以把他们在内存中存放的地址或者值交给函数参数。函数参数是函数体代码可以使用的变量，而且现在这些参数变量又拿到了函数外部的数据地址和值，通过函数参数这个媒介，函数体就可以操作函数外面的数据了。

1，参数的设置

声明函数时，在后面括号里写的变量就是函数参数，这些参数变量属于函数体，是局部变量。假如不给参数传值或者少传值，则会造成undefined+undefined = NaN的情况。如果值传多了，则会按顺序拿，多余的不要。

function f(a,b){
//pass
}
//等价于
function f(var a,var b){
//pass
}
//a,b的值为undefined

2，参数值的传递

参数值的传递本质上是给参数变量赋值的过程。那么什么时候拿值什么时候拿地址呢？原始数据类型：数字，布尔，字符串属于值传递，可以认为将自身复制一份拿给函数参数；引用类型：数组，对象，函数等则直接拿出地址给函数参数，会造成本身的改变(给对象添加新的属性)。

a = 1;
b = 1;
function add(x,y) {
    console.log(x+y); // 123
}
add(a,b);
add(1,1);//实际上这两个1也存在内存里
console.log(a,b);
// 2
// 2
// 1 1

在函数体里面不使用var声明的变量会变成全局变量，但是他并不是创建了一个全局变量，而是作为全局对象window的一个属性。

function add() {
    console.log('z'); // 123
    num = 100;
}

add();
console.log(num);
// z
// 100

3，函数参数出现同名f(a,a)

第二个a会覆盖第一个a。即a绑定到了第二个参数。

4，arguments对象

arguments意思为实参，他长的像数组，但又不是数组，他是一个对象。他的作用就是将调用函数时传进来的所有实参进行收集。

function add(args) {
console.log(args);
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}
add(1,2,3,4);
// 1
// 1
// 2
// 3

七，函数返回值

函数对内部数据进行处理，或者对外部数据进处理之后，需要将处理结果告诉外界，使用return语句将处理结果或者其他数据返回给调用者。

1，不写return语句

不写return语句也会返回，返回的是undefined。写了return没有返回任何东西，默认也会返回undefined。但是返回值需要用变量来接收。

function f(){}
var re = f();//先创建变量re在栈中，再执行f()，将f()的结果与变量re绑定，之后返回f()的结果
console.log(re)
// undefined

2，return的作用

用于结束函数调用，即遇到return函数就会结束。语法：return 数据对象。return可以返回任何内容，只要是还放在内存里的对象都可以被返回。

function f() {
    console.log(1);
    return f;
}
var f1 = f();
f1();

八，自执行函数IIFE

提供一个语法，让函数自动运行自己。就是把：整个函数定义语句用英文括号()括起来，再在尾部加上英文括号或者尾部括号里面加上英文括号。另外函数变量名可以写也可以不写，因为是自执行函数，写了函数变量名也没用。

(function() {
    console.log(1);

})();

(function() {
    console.log(1);

}());

给自执行函数传递参数。有个()的作用就是执行函数。

var a = 1;
var b = 1;
(function(a, b) {
    console.log(a + b);

})(a, b);

(function(a, b) {
    console.log(a + b);

}(a, b));

(function(a, b) {
    console.log(a + b);

}(1, 1));