随手记——前端面试题解析

2022-07-25,,

今天看别人分享了一个面试题,感觉挺复杂的,大致记录一下分析的过程

	function fun(n, o) {
        console.log(o);
        return{
            fn:function(m){
                return fun(m,n);
            }
        }
    }
    var c = fun(0).fn(1);
    c.fn(2);
    c.fn(3);

从上面的代码可以看出,这个代码的复杂性比较高,一步一步来解析一下
首先定义了c调用了最外层的函数

	var c = fun(0).fn(1)
	// 为了方便理解,我这里会将这个拆成几步来看
	function fun(n, o) { // fun(0) 传入 0 此时n = 0
        console.log(o); // 打印undefined
        return{ // 返回一个对象
            fn:function(m){  // fun(0).fn(1) 传入实参 1, 此时m = 1
                return fun(m,n); // 也就是此时m = 1, n = 0
            }
        }
    }
	// 注意,到了这里还没有结束,现在可以将c理解为
	fn(0){ 
		return fun(1,0)
	} 
	// 接下来继续解析,在上面的代码中我们还可以看到此时还没有执行完毕,得继续执行fun(1,0)函数
	// 此时又返回到了fun函数
	fun(n, o){	 // 执行fun(1,0) 传入实参 n=1,o=0
		console.log(o); // 打印0
        return{ // 继续返回一个对象,但是此时返回的对象并没有执行其中的函数
            fn:function(m){  
                return fun(m,n); // 也就是此时 m = undefined, n = 1
            }
        }
	}
	// 也就是c会得到一个对象,其中有一个未执行的函数fn
	var c = {
		fn:function(m){
			return fun(m,n) // 此时的n = 1
		}
	}

	// 接下来的
	c.fn(2);
		// 相当于调用了c对象中的fn()方法,并传递了实参2,但是由于传递的是第一个参数所以打印的会是第二个参数
		fn(2){
			return fun(2,1)
		}
		// 在fun中执行返回对象
		function fun(n, o) { // fun(2,1) 传入 实参 此时打印 1
        	console.log(o);
       	}
       	// 下面这个也是同样的道理,所以会打印 1
    c.fn(3);

最终打印顺序是的是

个人的愚见,如过有错漏,希望能够帮忙指出,共同学习进步,谢谢…

本文地址:https://blog.csdn.net/Kevins_Li/article/details/112547746

《随手记——前端面试题解析.doc》

下载本文的Word格式文档,以方便收藏与打印。