JavaScript——回调函数 + 函数自调用

322 阅读2分钟

一、回调函数

1.回调函数:其实就是将一个函数作为参数传递到另一个函数中,当另一个函数执行后,再执行当作参数传入的那个函数,被当作参数的那个函数就是回调函数。

        function fn(a,b,fm) {
            var sum = a+b
            return fm(sum)
	}
	function fm(n) {
            var pow = n*n
            console.log(pow)
	}
	fn(2,3,fm)

image.png

分析:先是fn(2,3,fm)调用fn函数,传入2,3,fm三个参数,并且fm参数是外边定义的函数,再运算将2+3的值赋值给sum变量,即sum=5;然后返回fm(sum),也就是将5作为参数再传入fm函数,然后执行n*n将结果赋值给pow变量,并打印。

总的说就是将一个函数也作为参数传入到另一个函数中,待其执行完毕后再执行传入的函数。

2.笔试题

           function sum() {
               if(arguments.length == 2) {
                    return arguments[0] + arguments[1]
		}else if(arguments.length == 1) {
                    var first = arguments[0]
                    return function(second) {
                        return first + second
                    }
		}
            }
            console.log(sum(2,3)) 
            console.log(sum(2)(3)) 

image.png

分析:首先第一次sum(2,3)调用函数是传入的两个参数,满足实参个数等于2的条件,因此直接返回了arguments[0] + arguments[1]的值,也就是2+3的值,也就是5,所以第一次打印结果为5.

第二次sum(2)(3)调用时,要先分开,先是sum(2)调用sum函数,它不满足实参个数等于2,但是满足了实参个数等于1,所以变量first就等于了传入的参数2;然后函数返回了另一个函数,也就是sum(2)的结果为function(second)函数,因此sum(2)(3)其实就相当于function(3)调用函数;然后返回first+second的值,但是此函数中没有first,于是到它的上一层函数中找(这里需要注意的是函数运行是在函数生成和定义的地方运行的,要找对作用域),first=2;所以first+second=5,打印结果为5.

二、函数自调用:

1、自调用函数是一次性函数,是指在函数声明的同时调用,页面加载完毕,函数也执行完毕。

2.函数自调用的作用:开启一个新的作用域,避免命名冲突。

3.函数自调用的方法:

1.使用()实现自调用
                        (function(n) {
                            if(n<=1){
				console.log(1)
                            }else{
				console.log(n)
                            }
			})(10)

image.png

2.使用 !实现自调用
                        !function(n) {
                            if(n<=1){
				console.log(1)
                            }else{
				console.log(n)
                            }
			}(10)

image.png

  3.使用  + 实现自调用
                        +function(n) {
                            if(n<=1){
				console.log(1)
                            }else{
				console.log(n)
                            }
			}(10)

image.png

4.使用 - 实现自调用
                        -function(n) {
                            if(n<=1){
                                   console.log(1)
                            }else{
				console.log(n)
                            }
			}(10)

image.png